Redux 工具包：创建 Thunk 函数

Thunk 是什么？

在编程中，这个词指的是执行延迟工作的代码部分，例如 JavaScript 中的异步函数。

Redux store 本身并不处理异步逻辑。它只知道如何：

但是，如果是这样的话，我们如何调用 API 并根据其响应更新状态呢？这通常需要时间。我们该如何处理呢？

这就是 thunk 函数发挥作用的地方。

什么是 Thunk 函数？

thunk 函数是为处理异步逻辑（如调用 API）而创建的函数。它需要两个参数“dispatch”和“getState”来分派操作并在需要时访问当前状态。

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

返回的函数是 thunk 函数，并且在此示例中，“getAllUsers”被称为 thunk 动作创建者，它将像这样分派：

dispatch(getAllUsers())

如果需要，可以调度 thunk 动作创建器，并附带在 thunk 函数中使用的参数。

使用 createAsyncThunk 创建 Thunk

Redux Toolkit 提供了 `createAsyncThunk` API 来轻松生成 thunk：

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

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

`fetchUserById` 是此处创建的 thunk 函数。`createAsyncThunk` 接受两个参数：

为什么要使用 createAsyncThunk？

除了让你为 API 调用创建 thunk 函数之外，`createAsyncThunk` 还会自动分派操作来跟踪 API 请求的状态：

这真的很有用。例如，当状态为“待处理”时，我们可以在 UI 中显示加载器，并让用户知道正在发生某事。

在切片中使用 Thunk

现在我们已经创建了 `fetchUserById` thunk，我们可以使用 `userSlice` 中的 `extraReducers` 字段来处理状态变化：

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 条件

如果我们想在调用 API 之前检查一些条件怎么办？例如，如果状态已经是待处理，我们不想调用两次。在这种情况下，我们可以使用 `createAsyncThunk` 接受的第三个参数来写入条件。

export const fetchUserById = createAsyncThunk(
  "user/fetchUserById",
  async (userId) => {
    const response = await someHttpRequest(userId);
    return response;
  },
  {
    condition(_, { getState }) {
      const status = selectStatus(getState());
      if (status !== "idle") {
        return false;
      }
    },
  }
);

要了解如何将 Typescript 与 thunk 函数结合使用，请阅读类型检查 Redux Thunks。