免费购物商城网站建设/广告推广语

前言

作为React全家桶的一份子，Redux为react提供了严谨周密的状态管理。但Redux本身是有点难度的，虽然学习了React也有一段时间了，自我感觉算是入了门，也知道redux的大概流程。但其背后诸如creatstore,applymiddleware等API背后到底发生了什么事情，我其实还是不怎么了解的，因此最近花了几天时间阅读了Redux的源码，写下文章纪录一下自己看源码的一些理解。

一、源码结构（redux4.0版本）

Redux是出了名的短小精悍（恩，这个形容很贴切），只有2kb大小，且没有任何依赖。它将所有的脏活累活都交给了中间件去处理，自己保持着很好的纯洁性。再加上redux作者在redux的源码上，也附加了大量的注释，因此redux的源码读起来还是不算难的。

先来看看redux的源码结构，也就是src目录下的代码：

源码结构

其中utils是工具函数，主要是作为辅助几个核心API，因此不作讨论。
（注：由于篇幅的问题，下面代码很多都删除了官方注释，和较长的warn）

二、具体组成

index.js是redux的入口函数具体代码如下：

2.1 index.js

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'
import __DO_NOT_USE__ActionTypes from './utils/actionTypes'function isCrushed() {}
if (process.env.NODE_ENV !== 'production' &&typeof isCrushed.name === 'string' &&isCrushed.name !== 'isCrushed'
) {warning()
}export {createStore,combineReducers,bindActionCreators,applyMiddleware,compose,__DO_NOT_USE__ActionTypes
}

其中isCrushed函数是用于验证在非生产环境下 Redux 是否被压缩，如果被压缩就会给开发者一个 warn 的提示。

在最后index.js 会暴露 createStore, combineReducers, bindActionCreators, applyMiddleware, compose 这几个redux最主要的API以供大家使用。

2.2 creatStore

createStore函数接受三个参数：

• reducer：是一个函数，返回下一个状态，接受两个参数：当前状态 和 触发的 action；
• preloadedState：初始状态对象，可以很随意指定，比如服务端渲染的初始状态，但是如果使用 combineReducers 来生成 reducer，那必须保持状态对象的 key 和 combineReducers 中的 key 相对应；
• enhancer：是store 的增强器函数，可以指定为中间件，持久化 等，但是这个函数只能用 Redux 提供的 applyMiddleware 函数来进行生成

下面就是creactStore的源码，由于整体源码过长，且 subscribe 和 dispatch 函数也挺长的，所以就将 subscribe 和 dispatch 单独提出来细讲。

 import $$observable from 'symbol-observable'import ActionTypes from './utils/actionTypes'
import isPlainObject from './utils/isPlainObject'export default function createStore(reducer, preloadedState, enhancer) {if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {enhancer = preloadedStatepreloadedState = undefined}// enhancer应该为一个函数if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')}//enhancer 接受 createStore 作为参数，对  createStore 的能力进行增强，并返回增强后的  createStore 。//  然后再将  reducer 和  preloadedState 作为参数传给增强后的  createStore ，最终得到生成的 storereturn enhancer(createStore)(reducer, preloadedState)}// reducer必须是函数if (typeof reducer !== 'function') {throw new Error('Expected the reducer to be a function.')}// 初始化参数let currentReducer = reducer   // 当前整个reducerlet currentState = preloadedState   // 当前的state,也就是getState返回的值let currentListeners = []  // 当前的订阅store的监听器let nextListeners = currentListeners // 下一次的订阅let isDispatching = false // 是否处于 dispatch action 状态中, 默认为false// 这个函数用于确保currentListeners 和 nextListeners 是不同的引用function ensureCanMutateNextListeners() {if (nextListeners === currentListeners) {nextListeners = currentListeners.slice()}}// 返回statefunction getState() {if (isDispatching) {throw new Error(......)}return currentState}// 添加订阅function subscribe(listener) {......}}
// 分发actionfunction dispatch(action) {......}//这个函数主要用于 reducer 的热替换，用的少function replaceReducer(nextReducer) {if (typeof nextReducer !== 'function') {throw new Error('Expected the nextReducer to be a function.')}// 替换reducercurrentReducer = nextReducer// 重新进行初始化dispatch({ type: ActionTypes.REPLACE })}// 没有研究，暂且放着，它是不直接暴露给开发者的，提供了给其他一些像观察者模式库的交互操作。function observable() {......}// 创建一个store时的默认state// 用于填充初始的状态树dispatch({ type: ActionTypes.INIT })return {dispatch,subscribe,getState,replaceReducer,[$$observable]: observable}
}

subscribe

function subscribe(listener) {if (typeof listener !== 'function') {throw new Error('Expected the listener to be a function.')}if (isDispatching) {throw new Error(......)}let isSubscribed = true// 如果 nextListeners 和 currentListeners 是一个引用，重新复制一个新的ensureCanMutateNextListeners()nextListeners.push(listener)return function unsubscribe() {if (!isSubscribed) {return}if (isDispatching) {throw new Error(.......)}isSubscribed = falseensureCanMutateNextListeners()const index = nextListeners.indexOf(listener)// 从nextListeners里面删除，会在下次dispatch生效nextListeners.splice(index, 1)}}

有时候有些人会觉得store.subscribe用的很少,其实不然，是react-redux隐式的为我们帮我们完成了这方面的工作。subscribe函数可以给 store 的状态添加订阅监听，一旦我们调用了 dispatch来分发action ，所有的监听函数就会执行。而 nextListeners 就是储存当前监听函数的列表，当调用 subscribe，传入一个函数作为参数时，就会给 nextListeners 列表 push 这个函数。同时调用 subscribe 函数会返回一个 unsubscribe 函数，用来解绑当前传入的函数，同时在 subscribe 函数定义了一个 isSubscribed 标志变量来判断当前的订阅是否已经被解绑，解绑的操作就是从 nextListeners 列表中删除当前的监听函数。

dispatch

dispatch是redux中一个非常核心的方法，也是我们在日常开发中最常用的方法之一。dispatch函数是用来触发状态改变的，他接受一个 action 对象作为参数，然后 reducer 就可以根据 action 的属性以及当前 store 的状态，来生成一个新的状态，从而改变 store 的状态；

function dispatch(action) {// action 必须是一个对象if (!isPlainObject(action)) {throw new Error(......)}// type必须要有属性，不能是undefinedif (typeof action.type === 'undefined') {throw new Error(......)}// 禁止在reducers中进行dispatch，因为这样做可能导致分发死循环，同时也增加了数据流动的复杂度if (isDispatching) {throw new Error('Reducers may not dispatch actions.')}try {isDispatching = true
//       当前的状态和 action 传给当前的reducer，用于生成最新的 statecurrentState = currentReducer(currentState, action)} finally {  // 派发完毕isDispatching = false}// 将nextListeners交给listenersconst listeners = (currentListeners = nextListeners)// 在得到新的状态后，依次调用所有的监听器，通知状态的变更for (let i = 0; i < listeners.length; i++) {const listener = listeners[i]listener()}return action}

其中 currentState = currentReducer(currentState, action);这里的 currentReducer 是一个函数，他接受两个参数：

• 当前状态
• action

然后返回计算出来的新的状态。

2.3 compose.js

compose 可以接受一组函数参数，从右到左来组合多个函数，然后返回一个组合函数。它的源码并不长，但设计的十分巧妙：

export default function compose(...funcs) {if (funcs.length === 0) {return arg => arg}if (funcs.length === 1) {return funcs[0]}return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

compose函数的作用其实其源码的注释里讲的很清楚了，比如下面这样：

compose(funcA, funcB, funcC)

其实它与这样是等价的：

compose(funcA(funcB(funcC())))

ompose 做的只是让我们在写深度嵌套的函数时，避免了代码的向右偏移。

2.4 applyMiddleware

applyMiddleware也是redux中非常重要的一个函数，设计的也非常巧妙，让人叹为观止。

export default function applyMiddleware(...middlewares) {return createStore => (...args) => {// 利用传入的createStore和reducer和创建一个storeconst store = createStore(...args)let dispatch = () => {throw new Error(`Dispatching while constructing your middleware is not allowed. ` +`Other middleware would not be applied to this dispatch.`)}const middlewareAPI = {getState: store.getState,dispatch: (...args) => dispatch(...args)}// 让每个 middleware 带着 middlewareAPI 这个参数分别执行一遍const chain = middlewares.map(middleware => middleware(middlewareAPI))dispatch = compose(...chain)(store.dispatch)return {...store,dispatch}}
}

通过上面的代码，我们可以看出 applyMiddleware 是个三级柯里化的函数。它将陆续的获得三个参数：第一个是 middlewares 数组，第二个是 Redux 原生的 createStore，最后一个是 reducer，也就是上面的...args；

applyMiddleware 利用 createStore 和 reducer 创建了一个 store，然后 store 的 getState 方法和 dispatch 方法又分别被直接和间接地赋值给 middlewareAPI 变量。

其中这一句我感觉是最核心的：

dispatch = compose(...chain)(store.dispatch)

我特意将compose与applyMiddleware放在一块，就是为了解释这段代码。因此上面那段核心代码中，本质上就是这样的(假设...chain有三个函数)：

dispatch = f1(f2(f3(store.dispatch))))

2.5 combineReducers

combineReducers 这个辅助函数的作用就是，将一个由多个不同 reducer 函数作为 value 的 object合并成一个最终的 reducer 函数，然后我们就可以对这个 reducer 调用 createStore 方法了。这在createStore的源码的注释中也有提到过。

并且合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象。 由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

下面我们来看源码，下面的源码删除了一些的检查判断，只保留最主要的源码：

export default function combineReducers(reducers) {const reducerKeys = Object.keys(reducers)// 有效的 reducer 列表const finalReducers = {}for (let i = 0; i < reducerKeys.length; i++) {const key = reducerKeys[i]const finalReducerKeys = Object.keys(finalReducers)// 返回最终生成的 reducerreturn function combination(state = {}, action) {let hasChanged = false//定义新的nextStateconst nextState = {}// 1，遍历reducers对象中的有效key，// 2，执行该key对应的value函数，即子reducer函数，并得到对应的state对象// 3，将新的子state挂到新的nextState对象上，而key不变for (let i = 0; i < finalReducerKeys.length; i++) {const key = finalReducerKeys[i]const reducer = finalReducers[key]const previousStateForKey = state[key]const nextStateForKey = reducer(previousStateForKey, action)nextState[key] = nextStateForKeyhasChanged = hasChanged || nextStateForKey !== previousStateForKey}// 遍历一遍看是否发生改变，发生改变了返回新的state，否则返回原先的statereturn hasChanged ? nextState : state}
}

2.6 bindActionCreators

bindActionCreators可以把一个 value 为不同 action creator 的对象，转成拥有同名 key 的对象。同时使用 dispatch 对每个 action creator 进行包装，以便可以直接调用它们。
bindActionCreators函数并不常用（反正我还没有怎么用过），惟一会使用到 bindActionCreators 的场景就是我们需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，并且不希望把 dispatch 或 Redux store 传给它。

// 核心代码，并通过apply将this绑定起来
function bindActionCreator(actionCreator, dispatch) {return function() {return dispatch(actionCreator.apply(this, arguments))}
} 
// 这个函数只是把actionCreators这个对象里面包含的每一个actionCreator按照原来的key的方式全部都封装了一遍，核心代码还是上面的
export default function bindActionCreators(actionCreators, dispatch) {// 如果actionCreators是一个函数，则说明只有一个actionCreator，就直接调用bindActionCreatorif (typeof actionCreators === 'function') {return bindActionCreator(actionCreators, dispatch)}// 如果是actionCreator是对象或者null的话，就会报错if (typeof actionCreators !== 'object' || actionCreators === null) {throw new Error(... ... }// 遍历对象，然后对每个遍历项的 actionCreator 生成函数，将函数按照原来的 key 值放到一个对象中，最后返回这个对象const keys = Object.keys(actionCreators)const boundActionCreators = {}for (let i = 0; i < keys.length; i++) {const key = keys[i]const actionCreator = actionCreators[key]if (typeof actionCreator === 'function') {boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)}}return boundActionCreators
}

小节

看一遍redux，感觉设计十分巧秒，不愧是大佬的作品。这次看代码只是初看，往后随着自己学习的不断深入，还需多加研究，绝对还能得到更多的体会。

作者：申若天
链接：https://www.jianshu.com/p/06d866dda043
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。