Redux-Thunk 的核心作用是让 action 创建函数返回函数以执行异步逻辑、条件判断或多次 dispatch。它解决 Redux 默认只接受普通对象 action 而无法处理异步操作的问题，将副作用从 reducer 和组件中抽离到 action creator 层，支持 REQUEST/SUCCESS/FAILURE 三阶段流程，并提供 dispatch 和 getState 参数用于控制执行时机与状态判断。
Redux-Thunk 的核心作用是让 action 创建函数可以返回函数（而非普通 action 对象），从而在其中执行异步逻辑、条件判断或多次 dispatch，最终把真正需要更新状态的 action 发送给 reducer。
为什么需要 Redux-Thunk？
Redux 默认只接受 plain object 类型的 action，而异步操作（如 API 请求）无法立刻得到结果，必须等响应返回后才能 dispatch 合适的 action。若不借助中间件，你无法在 dispatch 中直接写 fetch() 或 setTimeout() —— 它们会破坏纯函数约束，且无法被 Redux 拦截处理。
Redux-Thunk 提供了“可延迟执行、可控制流程”的 action 创建方式，把副作用（side effect）从 reducer 和组件中抽离出来，集中到 action creator 层。
异步 Action 的典型任务流
一次完整的异步请求（比如拉取用户列表）通常包含三个阶段：开始请求（loading）、请求成功（success）、请求失败（error）。对应地，你会 dispatch 三个不同的 action：
立即学习“Java免费学习笔记（深入）”；
- REQUEST：标记加载中，UI 可显示 loading 状态
- SUCCESS：携带数据 payload，更新 store 中的列表和状态
- FAILURE：携带错误信息，用于提示用户或重试逻辑
Thunk 函数内部按顺序组织这些 dispatch，并利用 Promise 或 async/await 控制执行时机。
一个标准的 Thunk Action Creator 示例
下面是一个获取用户列表的异步 action 创建函数：
const fetchUsers = () => {
return async (dispatch) => {
dispatch({ type: 'FETCH_USERS_REQUEST' });
try {
const response = await fetch('/api/users');
const users = await response.json();
dispatch({ type: 'FETCH_USERS_SUCCESS', payload: users });
} catch (error) {
dispatch({ type: 'FETCH_USERS_FAILURE', error: error.message });
}
};
};
调用时仍使用 dispatch(fetchUsers())。注意：这个函数本身不返回 action，而是返回一个接收 dispatch 的函数；Redux-Thunk 中间件会识别并执行它。
关键细节与注意事项
- Thunk 函数接收
dispatch和getState两个参数，后者可用于读取当前 state 做条件判断（例如避免重复请求） - 不要在 reducer 里写异步代码，也不要在组件里直接调用 API 后手动 dispatch —— 这会让逻辑分散、难以测试和复用
- 多个异步操作需串行时，可在 thunk 内部 await 其他 thunk 调用（前提是它们也返回 promise）
- 实际项目中常配合
createAsyncThunk（来自 @reduxjs/toolkit）简化样板代码，但底层原理仍是 Thunk
