关于javascript:redux源码解析之中间件

redux源码解析之中间件

了解中间件

简略来说，中间件就是对store 的dispatch办法进行包装扩大。
它在 dispatch action 和达到 reducer 的那一刻之间提供了逻辑插入点。能够应用 Redux 中间件进行日志记录、异样监控、与异步 API 对话、路由等。
具体能够见官网文档 Middleware 中间件 | Redux 中武官网

具体实现

在redux中常见的中间件写法为

function middleWare({ getState,dispatch }) {
  return next => action => {
       // xxx   
    return next(action)
   }
}

咱们能够看到这里屡次应用到高阶函数，看起来很简单，上面咱们来对他进行逐渐的解析。为了不便标记，我这里将箭头函数，改成函数申明的模式

function middleWare1({ getState, dispatch }) {
  return function nextHandle1(next) {
    return function actionHandle1(action) {
         //xxx
      return next(action)
    }
  }
}

上面就开始解说middleware nextHandle actionHandle的具体应用场景

applyMiddleware

首先从入口讲起，常见的应用中间件的形式如下
const store = createStore(reducer, applyMiddleware([thunk, logger]));
能够看出，咱们是通过applyMiddleware办法将中间件办法包了一层。那么对应的applyMiddleware办法中解决中间件的流程为：

export default function applyMiddleware(
  ...middlewares: Middleware[]
) {
// 省略局部代码
  const middlewareAPI: MiddlewareAPI = {
    getState: store.getState,
    dispatch: (action, ...args) => dispatch(action, ...args)
  }
 // 调用middleware办法，并传参
  const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 外围逻辑 将函数按序组合 compose(a, b, c)(dispatch) => a(b(c(dispatch)))
  dispatch = compose<typeof dispatch>(...chain)(store.dispatch)
  return {
    ...store,
    dispatch
  }
}
//简化compose函数实现
export default function compose(...funcs: Function[]) {
    return funcs.reduce(function(preFnA, itemFnB){
      return function (...args) {
          return preFnA(itemFnB(...args));
      }
  });
}

通过下面两行外围代码middlewares.map以及dispatch = compose(xxx)，咱们能够剖析失去middlewares本质上是在对原有的dispatch进行改写增强。
对应的咱们之前写的middleWare1函数在此处被调用，那么就成了

const chain = middlewares.map(middleware => middleware(middlewareAPI))
// middlewares在调用map办法后就成了
const chain = [nextHandle1, nextHandle2,...]

dispatch = compose<typeof dispatch>(...chain)(store.dispatch)
// chain中函数再次被compose组合，那么就成了
dispatch = actionHandle1(actionHandle2(actionHandle3(store.dispatch)))
dispatch = function actionHandle1(action){
   console.log('start1')
   const result = next(action);//此处的next函数即nextHandle2中的actionHandle2
   console.log('end1')
   return result 
}
function actionHandle2(action){
   console.log('start2')
   const result = next(action); //此处的next函数即actionHandle3
   console.log('end2')
   return result 
}
function actionHandle3(action){
   console.log('start3')
   const result = next(action); //此处的next函数即store.dispatch
   console.log('end3')
   return result 
}

实际上在middlewares调用过程中，能够用洋葱模型(面向切面编程（AOP）)来形容

上述代码在执行过程中会顺次打印 start1=> start2 =>start3 =>end3=> end2 =>end1。
最两头的那一层就是原始的store.dispatch(action),其余包裹它的中间件，都是对dispatch的增强

总结

到这里，构造就比拟清晰明了了，能够用一个图来概括