redux中的compose源码分析

1. redux中compose用来组合各种中间件来实现链式调用，例子如下

 compose(
          applyMiddleware,
          devTools,
          persistState,
          createStore
      )

2. 再来看看compose的源码， 分别写了ES6 和 ES5两个版本

 // ES6
 export default function compose(...funcs) {
     if (funcs.length === 0) {
       return arg => arg
     }

     if (funcs.length === 1) {
       return funcs[0]
     }      

     return funcs.reduce((a, b) => (...args) => a(b(...args)))
   }

  // ES5
  function compose() {
     for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
       funcs[_key] = arguments[_key];
     }

     if (funcs.length === 0) {
       return function (arg) {
         return arg;
       };
     }

     if (funcs.length === 1) {
       return funcs[0];
     }

     return funcs.reduce(function (a, b) {
       return function () {
         return a(b.apply(undefined, arguments));
       };
     });
   }
   

3. 最主要的 funcs.reduce((a, b) => (...args) => a(b(...args))) 这句话就是把函数包成洋葱卷，一层一层调用，上一个函数的返回值作为下一个函数的参数

4. 具体分析下每一步就是如下

 compose(
         applyMiddleware,
         devTools,
         persistState,
         createStore
     )
 1.第一次运行后
     a 为:
     functin(){
         return applyMiddleware(devTools(...args))
     }
     b 为:  devTools

 2.第二次运行
     a 为：
     functon(){
         return  applyMiddleware(devTools(...args))( persistState(...args) )
     }

     b 为:  persistState

 3.第三次运行
     a 为：
     functon(){
         return  applyMiddleware(devTools(...args))( persistState(...args) )( createStore(...args) )
     }
     b 为： createStore

 可以看见最终返回一个函数：
     applyMiddleware( devTools(...args) ) (  persistState(...args) ) (  createStore(...args) )