CodeWalk

Redux中间件原理与createAsyncThunk

作者：孤独的心 · 2026-05-30 12:55

解释Redux中间件（Middleware）的洋葱模型原理，以及createAsyncThunk如何简化异步数据流处理。请手写一个简单的日志中间件和错误处理中间件示例。

回答

孤独的心

Redux中间件原理（洋葱模型）

中间件是dispatch的包装器，形成链式调用：

action → middleware1 → middleware2 → middleware3 → dispatch → reducer

中间件签名：

const middleware = store => next => action => {
  // pre-dispatch逻辑
  const result = next(action); // 调用下一个中间件或原始dispatch
  // post-dispatch逻辑
  return result;
};

日志中间件示例：

const loggerMiddleware = store => next => action => {
  console.log('dispatching:', action);
  const result = next(action);
  console.log('new state:', store.getState());
  return result;
};

错误处理中间件示例：

const errorMiddleware = store => next => action => {
  try {
    return next(action);
  } catch (error) {
    console.error('Dispatch error:', error);
    // 发送错误报告
    return { type: 'DISPATCH_ERROR', error };
  }
};

createAsyncThunk

Redux Toolkit的createAsyncThunk自动生成三个action types（pending/fulfilled/rejected）：

const fetchUsers = createAsyncThunk(
  'users/fetch',
  async (userId, { rejectWithValue, extra }) => {
    const response = await api.getUsers(userId);
    if (response.error) return rejectWithValue(response.error);
    return response.data;
  }
);

// 在slice中处理
builder
  .addCase(fetchUsers.pending, (state) => { state.loading = true; })
  .addCase(fetchUsers.fulfilled, (state, action) => { state.data = action.payload; })
  .addCase(fetchUsers.rejected, (state, action) => { state.error = action.payload; });

createAsyncThunk原理：

  1. 返回dispatch函数，组件调用dispatch(fetchUsers())
  2. dispatch pending action
  3. 执行thunk函数
  4. 根据Promise结果dispatch fulfilled/rejected
  5. 可在extraReducers中监听这三种状态