这是2017年的第一篇博客,上周参加完各种年会聚会,本来准备周末写的,可是周末又突然有事,所以一直拖到现在,而且这是2017的第一篇技术博客,所谓好的开始是成功的一半,希望新的一年,自己可以继续坚持,变得更好。
redux
其实我工作项目中接触的redux并不多,应该说只有一两个项目用到了redux,要求也是基本的redux的使用,dispatch一个action这种程度,react-redux也还没有涉及到,可能是项目的复杂程度不够大吧,所以涉及到redux的相关技术现在都是靠自学(唉,现在公司PHP迁移到JAVA,业务压力这么重,哪有时间自学啊,连示例都没看完,囧2333~)。
吐槽完毕,回到正题上来吧,学习一个库和框架最好的方法就是直接看源码,看源码好处有很多,不仅仅是学习API,还可以学习别人编写这个库(框架)的思想,这才是最为重要的,所以这次来写一篇redux源码相关的博客。
redux源码解读
先把redux下载下来,发现很小,且没有依赖其他第三方库,简直是短小精悍啊,下面就让我好好见识下里面的思想。
我们直接看到src文件夹下,发现下面一共有七个文件或文件夹,分别是utils,applyMiddleware.js,bindActionCreators.js,combineReducers.js,compose.js,createStore.js,index.js。我们分别来看看。
utils
这个是公用的工具方法,里面就warning.js一个文件,打开文件可以看到,里面就一个warning函数。
|
|
这个函数的主要目的就是抛出异常(错误),这个应该没什么好说的。
index.js
接下来看看index.js文件,这种文件的主要目的一般是作为入口文件,里面代码也不多。
|
|
首先看到一个空函数isCrushed
,后面跟了一个if
判断,第一个判断条件是process.env.NODE_ENV !== ‘production’
,我记得process是node里的一个核心模块,然后我去node环境找了下process.env.NODE_ENV,发现undefined,说明本身是没有这个参数的,谷歌了一下,发现这是node的环境变量,如果process.env.NODE_ENV == ‘production’
,则表示生产环境,具体参考地址在这里。这是第一个判断条件,而后面两个判断条件都是判断文件代码是否被压缩,因为如果被压缩了,那么isCrushed函数就不叫isCrushed函数了,同时浏览器发出警告。最后export一堆接口,分别是createStore,combineReducers,bindActionCreators,applyMiddleware,compose这五个。
createStore
这应该是redux主要的一个函数,不对,应该是最主要的,顾名思义,createStore
的意思就是创建store,而一个应用中只有唯一的一个store,你说这能不重要吗?
废话不多说,先看代码吧。
|
|
终于把createStore文件解读完了,下面来看看combineReducers函数。
combineReducers.js
reducer函数的作用是得到action后生成新的state,而由于一个app只拥有一个state,所以这个state肯定是比较复杂,数据比较多的,因此这个对应的处理生成state的reducer肯定也会是很复杂的,所以为了降低复杂度,也为了逻辑的解耦,我们会把这个大的reducer拆分成多个小的reducer,而这个combineReducers函数是为了整合所有的小的reducer,重新变为一个大的reducer,这就是combineReducers存在的原因,本来我想直接就把combineReducers的源码放上来的,不过我觉得可以先不忙,先具体的说一说combineReducers做的事情,下面这段讲解借鉴于阮一峰的博客。
|
|
compose.js
|
|
总结?
这一次的redux源码解读先讲到这里吧,感觉这个信息量已经很大了,这些代码都是比较精简且耦合度低,没依赖其他的第三方库,仅仅读一遍还是远远不够的,除了代码的优秀,作者的设计思想也是十分优秀的,我还需要不断的学习才能达到这个高度,而至于bindActionCreators和applyMiddleware两个文件没有讲,我准备之后再来讲,外面天都黑了,非工作日一个人在办公室坐了一天,感觉周围都是寒冷😓。。。
2017年的第一篇博客over。