Redux Toolkit: Mencipta Fungsi Thunk

Apa itu Thunk?

Dalam pengaturcaraan, perkataan thunk merujuk kepada bahagian kod yang melakukan kerja tertunda, seperti fungsi async dalam JavaScript.

Dengan sendirinya, kedai Redux tidak mengendalikan logik tak segerak. Ia hanya tahu bagaimana untuk:

1. Menghantar tindakan secara serentak.
2. Kemas kini keadaan melalui pengurang.
3. Beritahu UI tentang perubahan keadaan.

Tetapi tunggu, jika itu yang berlaku, bagaimanakah kita boleh memanggil API dan mengemas kini keadaan berdasarkan respons mereka, yang biasanya mengambil masa? Bagaimana kita mengendalikannya?

Di sinilah fungsi thunk masuk.

Apakah Fungsi Thunk?

Fungsi thunk ialah fungsi yang dicipta untuk mengendalikan logik tak segerak, seperti memanggil API. Ia memerlukan dua argumen dispatch dan getState untuk menghantar tindakan dan mempunyai akses kepada keadaan semasa jika perlu.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

Fungsi yang dikembalikan ialah fungsi thunk dan getAllUsers dipanggil pencipta tindakan thunk dalam contoh ini, dan ia akan dihantar seperti ini:

dispatch(getAllUsers())

Pencipta tindakan thunk boleh dihantar dengan hujah untuk digunakan dalam fungsi thunk, jika perlu.

Mencipta Thunks dengan createAsyncThunk

Redux Toolkit menyediakan createAsyncThunk API untuk menjana thhunks dengan mudah:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk(
  'user/fetchUserById',
  async (userId) => {
    const user = await someHttpRequest(userId);
    return user;
  }
);

fetchUserById ialah fungsi thunk yang dicipta di sini. createAsyncThunk mengambil dua hujah:

• Argumen pertama ialah awalan rentetan yang digunakan untuk jenis tindakan yang dijana (cth. user/fetchUserById/pending, user/fetchUserById/fulfilled atau user/fetchUserById/rejected).
• Argumen kedua ialah fungsi "pencipta muatan". Ia sepatutnya mengembalikan Janji dengan data yang diperlukan atau ralat.

Mengapa Menggunakan createAsyncThunk?

Selain membenarkan anda membuat fungsi thunk untuk panggilan API, createAsyncThunk menghantar tindakan secara automatik untuk menjejaki keadaan permintaan API:

• belum selesai: Permintaan sedang dijalankan.
• dipenuhi: Permintaan berjaya.
• ditolak: Permintaan gagal.

Ini sangat berguna. Contohnya, kami boleh menunjukkan pemuat dalam UI apabila keadaan belum selesai dan memberitahu pengguna sesuatu sedang berlaku.

Menggunakan Thunks in the Slice

Sekarang kami telah mencipta gaya fetchUserById, kami boleh menggunakan medan extraReducers dalam userSlice kami untuk mengendalikan perubahan status keadaan:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle', // 'idle' | 'pending' | 'succeeded' | 'failed'
  error: null,
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.user.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.user.email = action.payload;
    },
    userDataCleared: (state) => {
      state.user = null;
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong.';
      });
  },
});

export const { usernameUpdated, emailUpdated, userDataCleared } = userSlice.actions;

// Selector for the status to use in the application's components
export const selectStatus = (state) => state.user.status;

createAsyncThunk Syarat

Bagaimana jika kita ingin menyemak beberapa syarat sebelum memanggil API? Sebagai contoh, jika status itu belum selesai, kami tidak mahu memanggilnya dua kali. Dalam kes itu, kita boleh menggunakan hujah ketiga yang createAsyncThunk terima untuk menulis syarat.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

Untuk mengetahui cara menggunakan Typescript dengan fungsi thhunk, sila baca Type Checking Redux Thunks.

Atas ialah kandungan terperinci Redux Toolkit: Mencipta Fungsi Thunk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!