redux中的compose源码分析

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

1 compose(
2          applyMiddleware,
3          devTools,
4          persistState,
5          createStore
6      )

 

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

 1 // ES6
 2 export default function compose(...funcs) {
 3     if (funcs.length === 0) {
 4       return arg => arg
 5     }
 6   
 7     if (funcs.length === 1) {
 8       return funcs[0]
 9     }      
10   
11     return funcs.reduce((a, b) => (...args) => a(b(...args)))
12   }
13 
14  // ES5
15  function compose() {
16     for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
17       funcs[_key] = arguments[_key];
18     }
19   
20     if (funcs.length === 0) {
21       return function (arg) {
22         return arg;
23       };
24     }
25   
26     if (funcs.length === 1) {
27       return funcs[0];
28     }
29   
30     return funcs.reduce(function (a, b) {
31       return function () {
32         return a(b.apply(undefined, arguments));
33       };
34     });
35   }
36

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

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

 1 compose(
 2         applyMiddleware,
 3         devTools,
 4         persistState,
 5         createStore
 6     )
 7 1.第一次运行后
 8     a 为:
 9     functin(){
10         return applyMiddleware(devTools(...args))
11     }
12     b 为:  devTools
13  
14 2.第二次运行
15     a 为：
16     functon(){
17         return  applyMiddleware(devTools(...args))( persistState(...args) )
18     }
19     
20     b 为:  persistState
21  
22 3.第三次运行
23     a 为：
24     functon(){
25         return  applyMiddleware(devTools(...args))( persistState(...args) )( createStore(...args) )
26     }
27     b 为： createStore
28  
29 可以看见最终返回一个函数：    
30     applyMiddleware( devTools(...args) ) (  persistState(...args) ) (  createStore(...args) )

 

posted @ 2018-09-21 10:09  Jason.Zeng  阅读(696)  评论(0)  编辑  收藏  举报