React Academy · 课时

使用 createAsyncThunk 处理异步逻辑

使用 createAsyncThunk 在 Redux 中处理 API 调用及 pending、fulfilled、rejected 生命周期。

使用 createAsyncThunk 处理异步逻辑 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

本课将介绍如何使用 createAsyncThunk 在 Redux 中处理 API 调用，以及如何在切片中处理 pending、fulfilled 和 rejected 生命周期操作。

什么是 createAsyncThunk

createAsyncThunk 会生成一个异步操作创建器，并自动分发三个生命周期操作：pending（已开始）、fulfilled（已完成）和 rejected（已失败）。您可以在 extraReducers 中分别处理它们。

定义异步操作

使用一个类型字符串和一个异步负载创建函数调用 createAsyncThunk。返回您希望作为 fulfilled 负载的数据。

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

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId) => {
    const response = await fetch('/api/users/' + userId);
    return response.json(); // becomes action.payload on fulfilled
  }
);

在 extraReducers 中处理

在切片的 extraReducers 中为三个生命周期状态全部添加处理分支，并相应管理加载、数据和错误状态。

extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => {
      state.loading = true;
      state.error = null;
    })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
}

分发异步操作

在组件中使用 useDispatch 分发异步操作。直接将参数传给异步操作创建器。

const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

在异步操作中访问状态

负载创建函数会将 thunkAPI 对象作为第二个参数接收。使用 thunkAPI.getState() 读取当前 Redux 状态，并使用 thunkAPI.dispatch() 分发其他操作。

export const saveItem = createAsyncThunk(
  'items/save',
  async (item, { getState }) => {
    const { auth } = getState();
    return fetch('/api/items', {
      method: 'POST',
      headers: { Authorization: 'Bearer ' + auth.token },
      body: JSON.stringify(item),
    }).then(r => r.json());
  }
);

使用 rejectWithValue 处理错误

如果要向 rejected 分支传递自定义错误负载，请使用 thunkAPI.rejectWithValue()。被拒绝操作的 action.payload 将包含您的自定义错误对象。

export const fetchData = createAsyncThunk(
  'data/fetch',
  async (id, { rejectWithValue }) => {
    const res = await fetch('/api/' + id);
    if (!res.ok) return rejectWithValue({ status: res.status });
    return res.json();
  }
);
// In rejected case: action.payload.status is available

取消异步操作

将 AbortController 信号传递给异步操作中的 fetch。当通过 dispatch.abort() 取消异步操作时，createAsyncThunk 会通过 thunkAPI.signal 自动提供该信号。

async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

等待已分发的异步操作

分发异步操作时，dispatch() 会返回一个 Promise。您可以使用 await 等待它，以了解异步工作何时完成；这对于保存后重定向模式很有用。

const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

构建器表示法与对象表示法

在 extraReducers 中使用 builder.addCase 回调模式——这种方式具有类型安全性并且受到支持。较早的对象键表示法已在近期 RTK 版本中弃用。

快速检查

当 createAsyncThunk 内部的异步函数抛出错误时，会发生什么？

回顾

createAsyncThunk 会自动生成 pending、fulfilled 和 rejected 操作。在 extraReducers 中处理这三种操作。使用 rejectWithValue 传递自定义错误负载，并使用 thunkAPI.getState() 在异步操作中访问当前状态。

接下来

下一课：**RTK Query：端点与自动缓存**——您将使用 createApi 定义 API 端点，并让 RTK Query 自动管理缓存。

常见问题解答

「使用 createAsyncThunk 处理异步逻辑」课时是免费的吗？

是的 — 「使用 createAsyncThunk 处理异步逻辑」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 createAsyncThunk 处理异步逻辑」这节课中我会学到什么？

使用 createAsyncThunk 在 Redux 中处理 API 调用及 pending、fulfilled、rejected 生命周期。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 createAsyncThunk 处理异步逻辑」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy