React实战-深入源码了解Redux用法之Middleware

谈到MiddleWare的由来在官方网站有清楚的说明，并且是一步一步的讲解了它的演进过程，其中中文说明见http://cn.redux.js.org/docs/advanced/Middleware.html（微信：react-javascript）。
重点讲解了几点内容：
1.为什么采用MiddleWare？
综合起来看就是我们在进行业务操作时，常常会有其它的附加需求，如：所有操作的操作记录日志；操作异常的错误日志；测试过程的测试类信息等等。
然而我们即不希望改变原有代码，也不希望在有太多重复的代码，所以在Redux中提供了一种简易的方式，将附加操作单独编写，采用appplyMiddleware进行统一封装，将业务操作与附加操作分离。
2.Middleware是怎么实现的？
正如官网分析的一样，我们有多种方法去实现，但是那种方式才是最简单、耦合度最低的呢？
毋庸置疑的是这种情形下最适合采用的就是装饰者模式。也就是保持原有代码不变的情况下，对初始对象进行不断的增加新的数据或操作。
在面向对象的语言中，装饰者模式是一种常见的开发模式，实现的方式有多种，主要采用的是重构和组合的方式：通过继承和组合的方式，定义装饰类，将原有类的对象作为装饰类的内部元素，然后根据需要增加新的数据和操作。
在Javascript中要实现这种方式主要采用的是Mondkeypatching的方式，采用将原有function进行重写，在重写的function中增加新的数据和操作。如：
function A(){
}
A.prototype.add(i,j){
return i+j;
}
Monkeypatching将重写add，并添加日志信息。
var a = new A();
var originalAdd = a.add;
A.add = function(i,j){
console.log(‘begin add’);
return originalAdd(i,j);
}
从上面的代码可以看出基本上是javascript对重构的一种实现。
基本思路如此，但是还有一点需要特别注意的是，为什么不完全采用Monkeypatching。主要原因是Middleware不只有一个，而是多个，这就需要实现dispatch的链式效果，每次封装的后的dispatch将作为后一个Middleware的初始dispatch。
另外我们可以看到在Redux源码中，通过以下代码实现了Middleware的链式链接。
applyMiddleware中：
chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(…chain)(store.dispatch)
compose中：
const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(…args))。
3.Middleware怎么写？
具体到Middleware怎么写就变的很简单了，在官网的多个例子中，选取最简单的看看吧。
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}
采用的是箭头函数，我们需要了解的是三个嵌套箭头函数的参数：
1.store：全局数据对象
2.next：上一个被封装的dispatch
3.action：操作。
基本上了解这些你就可以编写自己的附加操作了。需要注意的是对next的使用，是要获取结果，还是要进行附加操作，另外就是要将再次封装的next传出去。
在构建store时，也将改为以下代码：
const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(thunk, api, createLogger()),
      DevTools.instrument()
    )
  )