汪微的博客
zane,做一个有思维的开发者

汪微的博客

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

2017年12月07日90 browse

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



博主 zane 发表于 2017-12-07 14:17:47,添加在了 redux 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

2

2018-02-11 18:04:42

1

2018-01-22 15:22:45

萨达

2017-12-20 18:20:31

bu

2017-12-20 18:20:12

阿斯顿飞

2017-12-20 15:58:50