背景

因为就得去实习了。所以打算开始补补坑。比如自己阅读源码的计划。所以今天来聊聊redux的源码。后续会有redux-thunk和react-redux的源码阅读。搞定这些的话，就开始阅读一个node的库的源码了，比如eventproxy和anywhere。

开始

• 总览, redux的文件结构

文件看起来貌似不少，其实，要理解redux的内部实现，主要就看 createStore.js

，applyMiddleware.js ，combineReducers.js和compose.js。下面从createStore.js开始看。

• createStore.js

  export default function createStore(reducer, preloadedState, enhancer) {// 如果第二个参数没有传入初始的state，而是传入了enhancer(为applyMiddleware调用的返回值), 那就将第二个参数，即preloadedState赋值给enhancerif (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {enhancer = preloadedStatepreloadedState = undefined}// 如果传入了enhancer，但enhancer不是一个函数，报错if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')}// 反之, 执行。注意此处。此处意味着，如果createStore的时候传入了enhancer，是会将createStore传入enhancer中，执行enhancer, 而enhancer的返回值也是一个函数。具体的可以等到下面我们讲解applyMiddleware，看完你就知道到底发生了什么。return enhancer(createStore)(reducer, preloadedState)}// 如果没传入enhancer，就继续下面的逻辑// reducer是要求为一个函数的，如果不是一个函数，报错if (typeof reducer !== 'function') {throw new Error('Expected the reducer to be a function.')}    ..........// 最后createStore就会返回dispatch，subscribe, getState等几个常用的apireturn {dispatch,subscribe,getState,replaceReducer,[$$observable]: observable};    
  }
  复制代码

  ​

  上面的代码给大家展览了下createStore这个函数大概做了什么，其实就是封装了一些api，最后暴露给用户使用。接下来看一下各个api的实现：

  先看一下私有变量的定义

    let currentReducer = reducer // 就是reducer嘛let currentState = preloadedState // 就是传入的初始state嘛let currentListeners = [] // 当前的监听器队列let nextListeners = currentListeners // 未来的监听器队列let isDispatching = false //  标志是否正在dispatch
  复制代码

  getState : 用来获取store中的state的。因为redux是不允许用户直接操作state，对于state的获取，是得通过getState的api来获取store内部的state。

    function getState() {// 如果正在dispatch的话, 说明新的state正在计算中，现在的state是旧的，为了确保用户能获得新的// state，所以要加一个判断，如果是正在dispatch的话，就报错，反之，返回现在的stateif (isDispatching) {throw new Error('You may not call store.getState() while the reducer is executing. ' +'The reducer has already received the state as an argument. ' +'Pass it down from the top reducer instead of reading it from the store.')}return currentState}
  复制代码

  subscribe ：redux提供了用户一个监听state变化的api，这个尤为重要，如果没有这个api的暴露，react-redux应该就比较实现了。

    function subscribe(listener) {// listener是state变化时的回调，必须是个函数if (typeof listener !== 'function') {throw new Error('Expected the listener to be a function.')}// 如果是正在dispatch中，就报错。因为要确保state变化时，监听器的队列也必须是最新的。所以监听器的注册要在计算新的state之前。if (isDispatching) {throw new Error('You may not call store.subscribe() while the reducer is executing. ' +'If you would like to be notified after the store has been updated, subscribe from a ' +'component and invoke store.getState() in the callback to access the latest state. ' +'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.')}// 标志是否注册，额，其实个人感觉没啥必要。不过仔细想想，应该是防止用户多次调用取消监听的函数。let isSubscribed = true// 其实这个函数就是判断当前的监听器队列和未来的是否一样，如果不一样那就将当前的赋值给未来的，额，还是不是很理解为什么得这么实现，可能是为了达到数据不可变的效果，避免压进新的回调时，导致当前的监听器队列也有这个回调ensureCanMutateNextListeners()// 将回调压进未来的监听器队列中nextListeners.push(listener)// 注册监听器后会返回一个取消监听的函数return function unsubscribe() {// 如果是已经调用该函数取消监听了，就返回if (!isSubscribed) {return}if (isDispatching) {throw new Error('You may not unsubscribe from a store listener while the reducer is executing. ' +'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.')}// 标志已经取消了isSubscribed = falseensureCanMutateNextListeners()// 删除const index = nextListeners.indexOf(listener)nextListeners.splice(index, 1)}}
  复制代码

  dispatch : 该函数是与getState对应的，getState是读，那dispatch就是写。redux的改动state，只能通过发起一个dispatch，传达一个action给reducer，reducer会根据action和currentState以及自己的内部实现逻辑，来计算出新的state，从而达到写的目的。

    function dispatch(action) {// action要求是一个简单对象，而一个简单对象就是指通过对象字面量和new Object()创建的对象，如果不是就报错。if (!isPlainObject(action)) {throw new Error('Actions must be plain objects. ' +'Use custom middleware for async actions.')}// reducer内部是根据action的type属性来switch-case，决定用什么逻辑来计算state的，所以type属性是必须的。if (typeof action.type === 'undefined') {throw new Error('Actions may not have an undefined "type" property. ' +'Have you misspelled a constant?')}// 如果是已经在dispatch的，就报错，避免不一致if (isDispatching) {throw new Error('Reducers may not dispatch actions.')}// 这里就是计算新的state，并赋值给currentStatetry {isDispatching = truecurrentState = currentReducer(currentState, action)} finally {isDispatching = false}// state更新了后，就如之前我们所说的subscribe，将注册的回调都触发一遍。大家要注意这里，是都触发一遍哦！这个点了解，react-redux的一些原理会比较容易理解。const listeners = (currentListeners = nextListeners)for (let i = 0; i < listeners.length; i++) {const listener = listeners[i]listener()}return action}
  复制代码

  以上就是createStore的大致实现。这个函数难度不大，更多的是一个了解redux的入口。咱们从这个入口来一点点挖掘别的代码的实现。下面先从combineReducers开始

• combineReducers

  • 这个函数是用来整合多个reducers的, 因为createStore只接受一个reducer。
  • 这个函数分为两部分，第一部分是检验用户传入的reducers的准确性。第二部分就是计算state的逻辑。第一部分大家看一看也就了解了为什么，咱们主要看看第二部分

  export default function combineReducers(reducers) {................return function combination(state = {}, action) {if (shapeAssertionError) {throw shapeAssertionError}if (process.env.NODE_ENV !== 'production') {const warningMessage = getUnexpectedStateShapeWarningMessage(state,finalReducers,action,unexpectedKeyCache)if (warningMessage) {warning(warningMessage)}}// hasChanged来标志是否计算出了新的statelet hasChanged = false// 这个就是存储新的state的const nextState = {}// emmmm, 就是遍历每一个reducer，把action传进去，计算statefor (let i = 0; i < finalReducerKeys.length; i++) {const key = finalReducerKeys[i]const reducer = finalReducers[key]const previousStateForKey = state[key]const nextStateForKey = reducer(previousStateForKey, action)// 如果某个reducer没有返回新的state，就报错if (typeof nextStateForKey === 'undefined') {const errorMessage = getUndefinedStateErrorMessage(key, action)throw new Error(errorMessage)}nextState[key] = nextStateForKey// 此处来判断是否有新的statehasChanged = hasChanged || nextStateForKey !== previousStateForKey}// 根据该标志，决定返回原来的state, 还是新的statereturn hasChanged ? nextState : state}
  }
  复制代码

  这个整合的过程就是将所有的reducer存在一个对象里。当dispatch一个action的时候，通过遍历每一个reducer, 来计算出每个reducer的state, 其中用到的优化就是每遍历一个reducer就会判断新旧的state是否发生了变化, 最后决定是返回旧state还是新state。最后得到的state的数据结构类似存reducer的数据结构，就是键为reducer的名字，值为对应reducer的值。这个部分其实也不难。下面继续，我们看看applyMiddleware的实现

• applyMiddleware

  这个部分就是用来扩展redux的功能的。因为redux的最原始的功能就是操作state，管理state。如果我们需要在这个基础上，根据需求扩展一些功能，就需要通过使用别人编写好的中间件，或者自己编写的中间件来达到需求。比如，发起一个dispatch时，我们为了方便调试，不愿意每次自己手动console.log出这个action，这个时候编写一个logger中间件，就可以自动打印出每次dispatch发起的action，就很容易方便我们测试。又比如，我们要处理异步的action，就可以使用redux-thunk和redux-saga这类中间件。总之，该函数为我们提供了无限的可能。

  我们一点点来看代码：

  export default function applyMiddleware(...middlewares) {return createStore => (...args) => {const store = createStore(...args)............return {...store,dispatch}}
  复制代码

  先看个总览的，注意到applyMiddleware接受不定数量的中间件，然后返回一个接受一个creatStore作为参数，返回一个函数的函数。还记得我们在creatStore的时候么？那里有个场景就是

    if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')}return enhancer(createStore)(reducer, preloadedState)}
  复制代码

  当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。而这个enhancer是什么呢？翻看redux的文档：

  const store = createStore(reducers, applyMiddleware(a, b, c));
  复制代码

  哦！enhancer就是applyMiddleware的结果，就是一个 creatStore => (...args) = {}的函数。那看下enhancer的代码：

    return createStore => (...args) => {const store = createStore(...args)// 1、也许有的同学一开始看到这个会有点蒙蔽, 我当时看到也是觉得奇怪, 这个dispatch的逻辑不对劲// 而且, 还把这个dispatch作为middleware的参数传了进去,代表在中间件时使用dispatch的逻辑是这个// 但是看到下面, dispatch = compose(...chain)(store.dispatch)// 还行, 根据作用域链, 我们可以知道在中间件中调用dispatch的时候, 其实就是调用了这个dispatch, 而不是一开始声明的逻辑// 而这个dispatch是已经经过compose的包装的了.逻辑到这里的时候就很清楚了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)}// 2、compose是如何将中间件串联在一起的?// 首先一个最简单的中间件的格式: store => next => action => {}// 这一行代码就是传入了store, 获得了 next => action => {} 的函数const chain = middlewares.map(middleware => middleware(middlewareAPI))// 这一行代码其实拆分成两行// const composeRes = compose(...chain);// dispatch = composeRes(store.dispatch);// 第一行是通过compose, 将一个 这样 next => action => {} 的数组组合成 (...args) => f(g(b(...args))) 这么一个函数// 第二行通过传入store.dispatch, 这个store.dispatch就是最后一个 next => action => {}的next参数// 传入后 (...args) => f(g(b(...args)) 就会执行, 执行时, store.dispacth作为b的next传入, b函数结果action => {}会作为// g的next传入, 以此类推. 所以最后dispatch作为有中间件的store的dispatch属性输出, 当用户调用dispatch时, 中间件就会一个一个// 执行完逻辑后, 将执行权给下一个, 直到原始的store.dispacth, 最后计算出新的statedispatch = compose(...chain)(store.dispatch)return {...store,dispatch}}
  复制代码

  跟着上面的注释，大家应该能弄懂enhancer的原理。我这里总结一下，enhancer接收一个creatStore，会在内部创建一个store，然后对该store进行增强，增强的部位在于dispatch。增强的具体方式是通过compose来构造一个dispatch链，链的具体形式就是**[中间件1，中间件2, ......, 中间件N, store.dispatch]** ，然后将增强的dispatch作为store新的dispatch暴露给用户。那用户每次dispatch的时候，就会依次执行每个中间件，执行完当前的，会将执行权交给下一个，直到reducer中，计算出新的state。

结语

网上讲解redux的源码很多，我这篇也是其中一个，主要是我个人学习源码后的，一种记录方式，加深自己印象，也为了之后忘了可以快速重温。redux其实实现上不难，但是思想上真是精髓。程序员的编码能力是一个刚需，但是设计思想是要借他山之玉，来攻石的。站在巨人的肩膀上看远方，希望自己多阅读他人的源码，在能了解原理更好运用的同时，以后自己也能创造出好用的轮子。谢谢大家花时间观看。另外，附源码地址：github.com/Juliiii/sou… ,欢迎大家star和fork ，也欢迎大家和我讨论 。