Redux中间件用于在action分发后、reducer处理前拦截并执行额外逻辑，如日志、异步操作等。其核心结构为三层函数：接收store、next和action，利用闭包实现功能扩展。例如日志中间件可记录状态变化，thunk中间件支持函数action以处理异步请求。通过applyMiddleware组合多个中间件时需注意顺序，前者优先执行。中间件应保持纯净，避免副作用失控，从而提升应用的可维护性与灵活性。
Redux中间件是处理状态管理中副作用和异步逻辑的核心机制。它让你在dispatch一个action到reducer之前，拦截并执行额外操作，比如日志记录、异步请求、错误监控等。开发自定义中间件可以增强Redux应用的灵活性和可维护性。
理解Redux中间件的工作原理
Redux中间件位于action发出之后、到达reducer之前。它本质上是一个函数，接收store的getState和dispatch方法，并返回一个函数链，最终调用next(action)将action传递下去。
中间件的基本结构如下：
const myMiddleware = store => next => action => {
// 在这里可以访问 state: store.getState()
// 可以修改或记录 action
// 调用 next(action) 继续流程
return next(action);
};
这种三层函数结构利用了JavaScript的闭包特性，确保每一层都能访问外层参数。
立即学习“Java免费学习笔记（深入）”；
开发一个日志中间件示例
一个常见的中间件用途是记录每次action的类型和当前state变化。这有助于调试。
const logger = store => next => action => {
console.log('dispatching:', action);
console.log('state before:', store.getState());
const result = next(action);
console.log('state after:', store.getState());
return result;
};
将该中间件加入store创建时的applyMiddleware调用中即可启用。
处理异步操作：模拟thunk中间件
默认情况下，Redux只接受普通对象作为action。要支持函数形式的action（用于异步），需要中间件支持。thunk就是典型实现。
你可以自己实现一个简易thunk：
const thunk = store => next => action => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return next(action);
};
这样就可以dispatch函数，在其中进行API调用后再dispatch真正的action。
组合多个中间件
使用applyMiddleware可以将多个中间件一起注入store。
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import logger from './middleware/logger';
import thunk from './middleware/thunk';
const store = createStore(
rootReducer,
applyMiddleware(thunk, logger)
);
中间件的顺序很重要。前面的中间件会更早接收到action，也更早封装dispatch行为。
基本上就这些。掌握中间件机制后，你可以构建缓存、持久化、请求重试等各种高级功能。不复杂但容易忽略的是，每个中间件都应保持纯净，避免副作用失控。
