Redux中间件通过三层函数嵌套实现对dispatch的链式增强，利用柯里化和高阶函数拦截action处理流程，支持异步、日志等扩展功能，核心由applyMiddleware整合，以闭包形式访问storeAPI并组合成新dispatch。
Redux作为JavaScript应用中广泛使用的状态管理工具，其核心思想是通过单一状态树和不可变更新来管理应用状态。但真正让Redux灵活可扩展的，是它的中间件机制。理解中间件的源码实现，有助于我们掌握Redux的运行逻辑，并在实际开发中更好地调试和定制行为。
中间件的作用与设计思想
Redux中间件本质上是一个函数，用于拦截store.dispatch方法，在action发出后、到达reducer之前执行额外逻辑。常见用途包括异步处理（如redux-thunk）、日志记录、性能监控等。
中间件的设计遵循函数式编程思想，利用了函数柯里化和高阶函数的特性。它通过层层包装dispatch，形成一个可链式调用的增强流程。
applyMiddleware 源码解析
Redux提供applyMiddleware函数来组合多个中间件。它是整个中间件机制的核心。简化后的源码结构如下：
立即学习“Java免费学习笔记（深入）”；
function applyMiddleware(...middlewares) {
return function(createStore) {
return function(reducer, preloadedState) {
const store = createStore(reducer, preloadedState);
let dispatch = () => {
throw new Error('Dispatch正在初始化中...');
};
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
};
// 中间件传入middlewareAPI
const chain = middlewares.map(middleware => middleware(middlewareAPI));
// 包装原始dispatch
dispatch = compose(...chain)(store.dispatch);
return {
...store,
dispatch
};
};
};
}
关键点在于：
- 三层函数嵌套分别接收中间件列表、createStore、以及reducer和初始状态
- 在中间件执行时，只传入getState和dispatch，不暴露整个store对象，保证封装性
- 使用compose将多个中间件函数从右到左组合，最终生成一个新的dispatch函数
中间件的通用结构
一个标准的Redux中间件长这样：
const logger = (storeAPI) => (next) => (action) => {
console.log('dispatching:', action);
const result = next(action);
console.log('next state:', storeAPI.getState());
return result;
};
这三层函数分别表示：
- 第一层：接收store的部分API（getState/dispatch）
- 第二层：接收下一个dispatch函数（即被包装前的dispatch）
- 第三层：真正被调用的dispatch函数，处理action并决定是否传递给下一个中间件或原生dispatch
这种结构使得每个中间件都能访问状态、控制流程，并与其他中间件协作。
异步中间件原理（以redux-thunk为例）
redux-thunk是最简单的异步中间件之一，源码极简：
function createThunkMiddleware() {
return ({ dispatch, getState }) => (next) => (action) => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
}
它判断action是否为函数，如果是，则执行该函数并传入dispatch和getState，从而实现异步逻辑。否则正常传递给下一个中间件。
基本上就这些。Redux中间件通过巧妙的函数组合和闭包机制，实现了高度解耦和可扩展的状态处理流程。理解其源码不仅有助于深入掌握Redux，也为构建自己的插件系统提供了思路。
