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) )