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 的纯净性，又提供了强大的扩展能力。不复杂但容易忽略细节。
