中间件机制通过改造dispatch方法，在状态变更中插入可扩展逻辑，采用洋葱模型和函数柯里化实现。
前端状态管理中的中间件机制，本质是在状态变更的流程中插入可扩展的处理逻辑。它借鉴了函数式编程和洋葱模型的思想，让开发者可以在 action 发出后、reducer 执行前进行拦截、记录、异步处理或副作用操作。实现一个中间件机制，关键在于改造 store 的 dispatch 方法，并串联多个中间件函数。
理解中间件的执行模型
中间件通常采用“洋葱模型”结构，每一层都可以在 action 进入 reducer 前后执行逻辑。它的核心是函数柯里化，结构如下：
({ getState, dispatch }) => next => action => {
// 中间件逻辑
return next(action);
}
三层函数分别用于：
- 第一层接收 store 实例，可调用 getState 或 dispatch
- 第二层接收下一个中间件的 dispatch 函数（next）
- 第三层接收 action，是实际的 dispatch 调用入口
手动实现一个简易中间件系统
不需要依赖 Redux，也能实现类似机制。以下是一个极简版中间件链构造方式：
立即学习“前端免费学习笔记（深入）”；
function createMiddlewareStore(reducer, initialState) {
let state = initialState;
let listeners = [];
let currentDispatch = null;
const getState = () => state;
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
};
const originalDispatch = (action) => {
state = reducer(state, action);
listeners.forEach(l => l());
return action;
};
function applyMiddleware(...middlewares) {
const chain = middlewares.map(mw => mw({ getState, dispatch: (action) => currentDispatch(action) }));
currentDispatch = chain.reduceRight((next, middleware) => middleware(next), originalDispatch);
}
currentDispatch = originalDispatch;
return {
getState,
subscribe,
dispatch: (action) => currentDispatch(action),
applyMiddleware
};
}
使用方式：
const logger = ({ getState }) => next => action => {
console.log('dispatching:', action);
const result = next(action);
console.log('new state:', getState());
return result;
};
const asyncMiddleware = ({ dispatch }) => next => action => {
if (typeof action === 'function') {
return action(dispatch);
}
return next(action);
};
const store = createMiddlewareStore(reducer, {});
store.applyMiddleware(logger, asyncMiddleware);
</store>
常见中间件功能实现思路
通过中间件可以轻松扩展状态管理能力：
- 日志记录：打印 action 和状态变化，便于调试
- 异步支持：判断 action 是否为函数，实现 thunk 模式
- 副作用管理：集成 Promise、Observable 或 Saga 模式
- 持久化：在特定 action 后将状态保存到 localStorage
- 条件拦截：根据当前状态决定是否继续 dispatch
结合现代框架的实际应用
在 React 中，可通过自定义 Hook 封装中间件逻辑。例如基于 useReducer 构建带中间件的 hook：
function useEnhancedReducer(reducer, initialState, middlewares = []) {
const [state, dispatch] = useReducer(reducer, initialState);
const enhancedDispatchRef = useRef();
useEffect(() => {
const chain = middlewares.map(mw =>
mw({ getState: () => state, dispatch: enhancedDispatchRef.current })
);
const composed = chain.reduceRight(
(next, mw) => mw(next),
dispatch
);
enhancedDispatchRef.current = composed;
}, [state, dispatch, middlewares]);
return [state, enhancedDispatchRef.current];
}
这样就能在函数组件中灵活使用中间件模式。
基本上就这些。核心在于理解函数组合与 dispatch 的代理机制，不复杂但容易忽略 next 的调用顺序和上下文传递。
