Redux源码详细分析四 ———— compose

compose这个Api主要是对函数的调用进行组合，即执行完一个函数得到结果后，传入下一个函数中，以此类推，而函数的调用顺序是自右向左

compose

源码很简单，但是内部的逻辑不是很容易懂：

//compose方法接收任意多个参数，每个参数都为一个function，并把这些参数组合成数组传入
export default function compose(...funcs) {

    //如果没有传入任何方法，这直接执行后续的调用，即compose()('hello')会直接得到hello
    if (funcs.length === 0) {
        return arg => arg
    }

    //如果传入一个方法，则直接调用这个方法
    if (funcs.length === 1) {
        return funcs[0]
    }

    /*
        当参数的个数大于1时，会执行以下方法，这里调用了数组的reduce方法，
        并返回一个function，后续的参数作为这个function的参数传入。
        换成es5的写法是这样：
            funcs.reduce(function(a, b){
                return function(){
                    return a(b.bind(undefined, arguments))
                }
            })
        数组的reduce方法是这样：
            [1, 2, 3].reduce((a, b) => (a + b))结果为6，
            其执行顺序是正序，即第一次：a=1、b=2，a+b=3；第二次：a=3、b=3，a+b=6返回
        而下面的方法中数组的每一项都为function，所以第一项会在最后执行，最后一项会最先执行，即：
            compose(f, g, h)(...args)相当于f(g(h(...args)))
    */
    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

compose这个Api虽然看上去简单，但要理解还是不容易的，明白reduce的执行原理，就会轻松很多

compose应用实例

平时在用redux时，为了方便调试会应用redux-devtools工具，而这个工具的用法如下：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

/*
    这里传入的参数只有一个function，即applyMiddleware(thunk)，
    根据上面的判断，会直接执行applyMiddleware(thunk)，
*/
const store = createStore(reducer, composeEnhancers(
    applyMiddleware(thunk)
));

传入多个参数的情况会在分析applyMiddleware这个Api中提到。

其实，不止在redux中，很多库或者平时开发中都可以应用compose方法。

赏

谢谢你请我吃糖果