17370845950

Redux中间件通过三层函数结构拦截action，在dispatch前后插入日志、异步等逻辑，利用compose形成洋葱模型，从左到右执行进入流程，再逆序返回，从而增强dispatch而不改变store本身。

Redux 中间件的核心作用是扩展 Redux 的功能，让开发者可以在 dispatch action 的前后插入自定义逻辑，比如处理异步操作、打印日志、崩溃报告等。理解中间件的原理，关键在于搞清楚它如何“拦截”action 并增强 store 的 dispatch 方法。

Redux 中间件的基本结构

一个 Redux 中间件本质上是一个函数，它遵循三层嵌套的结构：

({ getState, dispatch }) => next => action => {
  // 自定义逻辑
  return next(action);
}

这三层分别代表：

• 第一层：接收 store 的 getState 和 dispatch，可以访问状态或派发新 action
• 第二层：接收原始的 next（下一个中间件或最终的 reducer 处理）
• 第三层：接收当前的 action，在这里可以执行副作用或修改流程

中间件如何拦截 action

Redux 在创建 store 时通过 applyMiddleware 将中间件链式组合。每个中间件都包裹下一个中间件，形成一个从外到内的调用链。

当调用 store.dispatch(action) 时，实际调用的是被层层包装后的 dispatch 函数。action 会依次经过每个中间件的处理，最后才到达 reducer。

以日志中间件为例：

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

它在 action 被处理前后打印信息，但不阻断流程，只是“观察”并放行。

实现异步支持：thunk 中间件原理

Redux 默认只接受普通对象类型的 action。要支持异步，需要中间件如 redux-thunk 来识别函数类型的 action。

thunk 的核心逻辑非常简单：

const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }
  return next(action);
};

如果 action 是函数，就调用它，并传入 dispatch 和 getState；否则正常传递给下一个环节。这样就可以在函数中延迟 dispatch 或进行 API 请求。

中间件的执行顺序与 compose

多个中间件通过 compose 组合，执行顺序是从左到右。例如：

applyMiddleware(thunk, logger)

action 先进入 thunk，再进入 logger。但在返回阶段（即 next 调用之后），则是反过来的：先从 logger 返回，再回到 thunk。

这种洋葱模型使得每个中间件都能在 action 流程的“进入”和“返回”两个阶段执行逻辑。

基本上就这些。Redux 中间件通过高阶函数的方式，巧妙地增强了 dispatch，既保持了 Redux 的纯净性，又提供了强大的扩展能力。不复杂但容易忽略细节。