Redux 中的中间件是什么，thunks 如何工作？

Question

Accepted Answer

**Middleware** 位于 dispatching 一个 action 和该 action 到达 reducer 之间，让你拦截 actions 以处理 **side effects**（async API 调用、日志记录）——这是 reducers 不能做的，因为它们必须保持纯净。**Thunks** 是最常见的中间件，可以实现 async 逻辑。

## Middleware 的位置

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware 包装 `dispatch`，所以每个 action 在到达 reducers 之前都会经过它。这是放置 reducers 禁止的 side effects 的指定位置。

## Thunks 解决的问题

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

你需要一个地方来执行 async 工作（fetch）然后 dispatch 结果。Thunk middleware 允许 dispatch 一个 **函数** 而不是普通对象。

## Thunk — 一个获取 dispatch 的函数

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

Thunk 执行 async 工作，并在每个阶段 dispatch 普通 actions（`loading`/`loaded`/`error`）——保持 reducers 纯净，同时 side effect 在 thunk 中进行。

## 其他 middleware 用途和替代方案

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## 为什么这很重要

Middleware 是 Redux 处理 reducers 无法处理的所有事情的方式——尤其是 **async side effects** ——同时保持纯净性，这使 reducers 可预测且可测试。

Thunks 是执行 async 操作的标准、易于理解的方式（获取数据、dispatch loading/success/error actions）。

理解 middleware 管道和 thunk 模式对实际的 Redux 应用至关重要，因为几乎所有应用都需要加载数据；RTK 的 `createAsyncThunk` 正是基于这一原理构建的。