redux源码解析

前言

redux的源码是我阅读过的一些库的源码中，相对简单的。若是你们的感兴趣强烈推荐你们亲自阅读一下。

本文为了方便理解抛开了一些容错处理以及边缘条件的判断。

combineReducers

combineReducers是redux中内置的工具函数，目的是将多个reducer函数合并为一个最终的reducer函数。这个最终的reducer函数能够用于createStore中做为参数。

下面两种写法是彻底等价的。

combineReducers的实现很是的简单。在A处首先对reducers对象进行遍历，排除value值的类型不是function的value。

在B处，咱们会遍历通过前一步过滤的reducers对象，依次的执行reducers对象中每个reducer函数, 将返回的结果存储在新的对象nextState中，最后返回新的对象。

createStore

createStore, 会建立一个Store, 存放应用中所有的state, 造成state树。

另外Store会提供额外的四个方法。getState 获取Store存储的state树；dispatch分发action更改Store中的state；subscribe注册监听器会在dispatch时触发；replaceReducer替换用来计算state的reducer。

createStore, 接收3个参数：

• reducer，负责处理action，返回新的state树。
• preloadedState，初始的state。若是是经过combineReducers建立reducer，初始的preloadedState的keys必须与reducers对象保持一致。
• enhancer，store加强器，enhancer是一个高阶函数，返回值是一个通过包装的强化的store。而redux的applyMiddleware自己就是一个enhancer。

dispatch

dispatch将会用来分发action, 更新currentState对象。在更新完成后，同时会更新currentListeners，并依次执行监听者列表。

getState

replaceReducer

使用新的reducer替换现有的reducer，同时执行dispatch({ type: ActionTypes.REPLACE })(ActionTypes.REPLACE是随机的字符串)。初始化state。

subscribe

subscribe会为dispatch注册监听器，监听器存储在nextListeners数组中，subscribe返回的函数则会注销监听器。

compose

compose并非redux中的概念，而是函数式编程中概念。相似的方法在ramda等工具库均有实现。

从右往左执行函数组合（右侧函数的输出做为左侧函数的输入）。最右侧函数能够是多参函数，其他函数必须是单参函数。相似a(b(c(arg)))。

middleware

redux的中间件的模型相似与koa。在next前面以及next，由外向里依次执行。当最里层的next执行完成后，next后面的代码，会由内向外依次执行。很是相似koa的洋葱中间件模型。

如下是一个简单的redux中间件的示例。

下面是redux文档中, 为介绍中间件的原理而给出的applyMiddleware的单纯的实现。

中间件会对dispatch进行一层包装，而且老是会返回包装后的dispath。下一个中间件，会基于上一个中间件返回的dispatch再次进行处理。

applyMiddleware

在前面咱们说过applyMiddleware是redux内置的enhancer。咱们先来回顾一下enhancer的使用方法。

在createStore中调用enhancer。参数为createStore自身，enhancer会返回一个新的函数。接收reducer, preloadedState对象做为参数。

在applyMiddleware中，利用js的闭包的特性使用createStore以及reducer, preloadedState参数建立store。

使用管道compose，将store.dispatch逐层的进行包装📦，返回的dispath会覆盖store中dispatch。

bindActionCreators

bindActionCreators在平时工做中出镜率不多，bindActionCreators主要用处是将dispatch方法包装到action creator中。bindActionCreators的源码很简单。下面是具体实现。