redux-toolkit 异步请求 多种方法

Redux Toolkit 提供了多种处理异步请求的方法，除了上面提到的 `createAsyncThunk`，还有以下几种方法：

1. `createAsyncThunk` + `createSlice`

这种方法和之前提到的相同，使用 `createAsyncThunk` 函数创建一个异步 action，并在 `createSlice` 中处理请求状态。

示例代码：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUser } from './api';

export const getUser = createAsyncThunk(
  'user/fetch',
  async (userId, thunkAPI) => {
    const response = await fetchUser(userId);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
    isLoading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [getUser.pending]: (state, action) => {
      state.isLoading = true;
    },
    [getUser.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.user = action.payload;
    },
    [getUser.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.error.message;
    },
  },
});

2. `createSlice` + `createAsyncThunk` + `createReducer`

这种方法和第一种方法类似，但是使用了 `createReducer` 函数来处理请求状态。

示例代码：

import { createSlice, createAsyncThunk, createReducer } from '@reduxjs/toolkit';
import { fetchUser } from './api';

export const getUser = createAsyncThunk(
  'user/fetch',
  async (userId, thunkAPI) => {
    const response = await fetchUser(userId);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
    isLoading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(getUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = action.payload;
      })
      .addCase(getUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      });
  },
});

const userReducer = createReducer(userSlice.initialState, userSlice.reducers);

export default userReducer;

3. `createSlice` + `createAsyncThunk` + 手写 reducer

这种方法和第二种方法类似，但是手写了 reducer 函数来处理请求状态。

示例代码：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUser } from './api';

export const getUser = createAsyncThunk(
  'user/fetch',
  async (userId, thunkAPI) => {
    const response = await fetchUser(userId);
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
    isLoading: false,
    error: null,
  },
  reducers: {
    setIsLoading: (state, action) => {
      state.isLoading = action.payload;
    },
    setUser: (state, action) => {
      state.user = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
    },
  },
});

export const userReducer = (state = userSlice.initialState, action) => {
  switch (action.type) {
    case getUser.pending.type:
      return { ...state, isLoading: true };
    case getUser.fulfilled.type:
      return { ...state, isLoading: false, user: action.payload };
    case getUser.rejected.type:
      return { ...state, isLoading: false, error: action.error.message };
    default:
      return userSlice.reducer(state, action);
  }
};

export const { setIsLoading, setUser, setError } = userSlice.actions;

总之，Redux Toolkit 提供了多种方法来处理异步请求，开发者可以根据自己的喜好和项目需求来选择使用哪种方法。