如何使用createAsyncThunk帮助器分派AsyncThunk

createAsyncThunk 是 Redux Toolkit 中的一个非常有用的工具，它用于创建异步的 Redux Thunk 动作创建器。这些动作创建器可以帮助你以一种更简洁、更可预测的方式来处理异步逻辑，比如 API 调用。

基础概念

Redux Thunk: 是一个中间件，允许你在 Redux 中编写异步逻辑。Thunk 是一个函数，它可以延迟函数的执行，通常用于处理异步操作。

createAsyncThunk: 是 Redux Toolkit 提供的一个函数，用于创建异步 Thunk。它会自动生成一系列的动作类型，并提供一个 Thunk 函数，该函数会自动分发这些动作。

优势

简化异步逻辑: 自动处理请求的开始、成功和失败状态。
类型安全: 自动生成的动作类型减少了拼写错误的可能性。
可组合性: 可以与其他 Redux Toolkit 工具（如 createSlice）无缝集成。

类型

createAsyncThunk 返回一个 Thunk 函数，该函数接受一个参数并返回一个 Promise。它还会生成三个动作类型：

{actionName}/pending
{actionName}/fulfilled
{actionName}/rejected

应用场景

API 请求: 处理数据的获取、提交等操作。
复杂的状态逻辑: 当状态更新依赖于异步操作的结果时。

示例代码

假设我们有一个 API 端点 /api/data，我们想要获取数据并在 Redux store 中保存。

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

// 创建一个异步 Thunk
export const fetchData = createAsyncThunk(
  'data/fetchData', // 动作名称
  async (_, { rejectWithValue }) => {
    try {
      const response = await axios.get('/api/data');
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// 创建一个 slice 来处理异步操作的状态
const dataSlice = createSlice({
  name: 'data',
  initialState: {
    entities: [],
    loading: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = 'pending';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = 'fulfilled';
        state.entities = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = 'rejected';
        state.error = action.payload;
      });
  },
});

export default dataSlice.reducer;