createAsyncThunk完整用法介绍

createAsyncThunk 是 Redux Toolkit 库中的一个功能，它用于创建处理异步逻辑的 thunk action creator。Redux Toolkit 是一个官方推荐的库，用于简化 Redux 开发过程，特别是处理常见的 Redux 模式，如异步数据流。createAsyncThunk 自动处理了诸如派发不同阶段的 action（如 pending、fulfilled、rejected）、取消正在运行的异步操作等功能，使得编写异步 Redux 逻辑变得更加简洁和高效。

基本用法

首先，确保你已经安装了 @reduxjs/toolkit：

npm install @reduxjs/toolkit

然后，你可以这样使用 createAsyncThunk：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

// 定义异步操作
const fetchUserById = createAsyncThunk(
  'users/fetchById', // 第一个参数是 action type 的基础名称，Redux Toolkit 会自动为pending、fulfilled、rejected添加后缀
  async (userId, thunkAPI) => {
    try {
      const response = await axios.get(`/api/users/${userId}`);
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message); // 错误处理，将错误信息传递给 payload
    }
  }
);

// 创建 Slice
const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: null,
    status: 'idle', // 或 'loading', 'succeeded', 'failed'
    error: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

// 在组件中 dispatch 异步 action
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { fetchUserById } from './userSlice';

function UserDetail({ userId }) {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.data);
  const status = useSelector((state) => state.user.status);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUserById(userId));
    }
  }, [status, dispatch, userId]);

  // ...
}

解释

• createAsyncThunk: 接收两个参数，第一个是action的类型前缀，第二个是一个异步函数，该函数可以访问到 thunkAPI 对象，它提供了 dispatch、getState 和其他有用的方法。
• extraReducers: 在创建的 slice 中，使用 extraReducers 来处理由 createAsyncThunk 自动生成的不同状态的 action。
• 状态管理: 异步操作的状态（如 loading、success、failure）通常会反映在 Redux 状态中，以便 UI 能够根据状态展示不同的内容或加载指示器。
• 组件中使用: 在需要的地方使用 useDispatch 和 useSelector 来 dispatch 异步 action 并获取状态。

createAsyncThunk 提供了一种清晰、统一的方式来管理 Redux 中的异步逻辑，减少了样板代码，并提高了代码的可读性和可维护性。