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的源码很简单。下面是具体实现。