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