redux源码分析中理解中间件简单来说，中间件就是对store的dispatch方法进行封装和扩展。它提供了调度动作和它到达减速器的时刻之间的逻辑插入点。您可以使用Redux中间件进行日志记录、异常监控、与异步API对话、路由等。详见官方文档MiddlewareMiddleware|Redux中文官网具体实现。redux中常见的写中间件是functionmiddleWare({getState,dispatch}){returnnext=>action=>{//xxxreturnnext(action)}}我们可以看到这里多次使用了高阶函数，看起来很复杂。我们一步一步来分析。为了标记方便，我把箭头函数改成了函数声明的形式下面开始讲解中间件的具体使用场景nextHandleactionHandleapplyMiddleware首先从入口说起，中间件常用的使用方式如下conststore=createStore(reducer,applyMiddleware([thunk,logger]));可以看出，我们是中间件方法被applyMiddleware方法包裹起来的。那么对应的applyMiddleware方法中处理中间件的过程就是：exportdefaultfunctionapplyMiddleware(...middlewares:Middleware[]){//省略部分代码constmiddlewareAPI:MiddlewareAPI={getState:store.getState,dispatch:(action,...args)=>dispatch(action,...args)}//调用中间件方法并传递参数constchain=middlewares.map(middleware=>middleware(middlewareAPI))//核心逻辑结合函数按顺序compose(a,b,c)(dispatch)=>a(b(c(dispatch)))dispatch=compose(...chain)(store.dispatch)return{...store,dispatch}}//简化compose函数实现exportdefaultfunctioncompose(...funcs:Function[]){returnfuncs.reduce(function(preFnA,itemFnB){returnfunction(...args){returnpreFnA(itemFnB(...args));}});}通过上面两行核心代码middlewares.map和dispatch=compose(xxx)，我们可以分析出，middlewares本质上是对orig的改写和强化最终派遣。这里调用了我们之前写的对应的middleWare1函数，那么就变成constchain=middlewares.map(middleware=>middleware(middlewareAPI))//调用map方法后middlewares变成constchain=[nextHandle1,nextHandle2,...]dispatch=compose(...chain)(store.dispatch)//链中的函数再通过compose组合起来，就变成dispatch=actionHandle1(actionHandle2(actionHandle3(store.dispatch)))dispatch=functionactionHandle1(action){console.log('start1')constresult=next(action);//这里的下一个函数是nextHandle2中的actionHandle2console.log('end1')returnresult}functionactionHandle2(action){console.log('start2')constresult=next(action);//这里的下一个函数是actionHandle3console.log('end2')returnresult}functionactionHandle3(action){console.log('start3')constresult=next(action);//这里下一个函数是store.dispatchconsole.log('end3')returnresult}其实在中间件调用过程中，可以用洋葱模型（面向切面编程（AOP））来描述上面的代码在执行过程中会依次打印start1=>start2=>start3=>end3=>end2=>end1。中间层是原来的store.dispatch(action)，其余包裹它的中间件都是对dispatch的增强。总结到这里，结构比较清晰，可以用图来概括
