Redux 工具包：创建 Thunk 函数
最新回答
我自有舟渡
2024-04-22 04:44:01
Thunk 函数是 Redux 中处理异步逻辑的核心机制，Redux Toolkit 提供了 createAsyncThunk 来简化其创建过程。
Thunk 函数基础概念
Thunk 是执行延迟工作的代码部分，在 Redux 中专门用于处理异步操作（如 API 调用）。Redux 核心本身只处理同步操作，Thunk 函数通过接收 dispatch 和 getState 参数来扩展功能：
const getAllUsers = () => { return async (dispatch, getState) => { dispatch(fetchingAllUsers()); try { const users = await getUsers(); dispatch(userUpdated(users)); } catch (err) { dispatch(logError(err)); } };};- Thunk 动作创建者：getAllUsers 这类返回函数的函数
- 调度方式：dispatch(getAllUsers())
使用 createAsyncThunk 创建 Thunk
Redux Toolkit 的 createAsyncThunk 是创建标准化 Thunk 的推荐方式：
import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchUserById = createAsyncThunk( 'user/fetchUserById', async (userId) => { const user = await someHttpRequest(userId); return user; });参数说明- 类型前缀：第一个参数定义自动生成的动作类型（如 user/fetchUserById/pending）
- 有效负载创建者：第二个参数是返回 Promise 的异步函数
- 条件检查（可选）：第三个参数可添加执行条件
createAsyncThunk 会自动生成三种状态的动作：
- pending：请求开始时触发
- fulfilled：请求成功时触发
- rejected：请求失败时触发
在 Slice 中处理 Thunk 状态
通过 extraReducers 字段可以处理 Thunk 的不同状态：
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: { // 同步reducer... }, 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.'; }); },});条件执行 Thunk
通过第三个参数可以添加执行条件，防止重复请求：
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; // 阻止Thunk执行 } }, });最佳实践
- 优先使用 createAsyncThunk：相比手动创建 Thunk，它能自动处理状态和错误
- 合理设计状态结构：包含 status 和 error 字段便于 UI 展示
- 利用条件检查：避免重复请求和竞态条件
- 类型安全：结合 TypeScript 使用可获得更好的开发体验
通过这种方式创建的 Thunk 函数能够清晰地管理异步操作的生命周期，使状态变化可预测且易于维护。
热门标签
