redux v3.7.2源码解读与学习之compose

redux是什么、有什么作用，解决什么问题，如果你还不知道，请先去这里： redux中文文档

下面的文章适合对redux有一定理解和使用经验的人

项目github地址：https://github.com/wangweianger/redux-source-code-learning

如果你觉得对你有帮助的话记得给我一个star 呢

说明：

• 代码使用parcel自动化编译，项目零配置，很方便简单的搭建工程，如果你不了解parcel是什么 你可以：看看parcel是什么
• 对redux源码做了详细的解释
• 对每个方法建了个相应的mean文件测试案例

运行方式：

git clone git@github.com:wangweianger/redux-source-code-learning.git
yarn install 
npm run dev

redux源码中的index.js文件主要是导出createStore,combineReducers,bindActionCreators,applyMiddleware,compose 这几方法，代码简洁简单。

下面对每个方法一个一个的解析，达到全面的掌握它们的目的，首先从compose方法开始：

compose 是redux中提供的一个工具方法，作用是从右到左来组合多个函数，并返回一个最终的函数。

文字比较枯燥，我们来用代码说明：

1.使用compose的写发：

finalCreateStore = compose(
        applyMiddleware,
        devTools,
        persistState，
        createStore
    )

2.不使用compose的写法如下：

finalCreateStore = applyMiddleware() 
    (   
        devTools
        ( 
            persistState
            ( 
                createStore 
            )
        )
    )

仔细看看上面案例的写法额。 既然我们知道了它是做什么的那它的实现原理又是什么呢？我们先来看一个知识点：Array.prototype.reduce()。

如果你还不知道或者不清楚reduce方法的作用你可以前往下面的参考链接，也可以运行下面的案例代码。

参考链接：Array.prototype.reduce()

在自己电脑浏览器的console控制台中运行下面的一段代码，看看结果吧：

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
    console.log(previousValue)
    console.log(currentValue)
    return previousValue + currentValue;
});

现在我们已经十分熟悉了reduce方法的作用，现在我们来看看redux中compose.js的源代码：

代码很简单也很简洁，核心在runcs.reduce处，代码不太好理解我们es5来从写一下：

现在感觉是不是清晰多了呢？

接下来我们来试着推理一下面这段代码的运行：

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

正如源代码注释中的 (...args) => f(g(h(...args))) 你看懂了吗？好好理解理解额。

接下来我们进入到redux的最核心方法 createStore

redux v3.7.2源码解读与学习之 createStore