一篇带有“思考”的redux源码阅读

本文主要是介绍一篇带有“思考”的redux源码阅读，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这次阅读的redux的版本是4.x的版本，为啥不是最新的呢？因为最新的redux使用typescript来重写了，变化不是特别大，而typescript会有很多的函数类型定义；另一方面，对js的熟练度肯定比ts要好，理解起来也会相对容易一点，还有这次阅读源码的目的是为了了解整个redux的工作流程。redux的源码非常精简，很适合源码的阅读与学习。在阅读之前，对redux有一定的使用会带来更好的效果，一边看一边反思平常所写的内容。下面就开始吧：

目录

下面的内容是项目的src目录结构

# src
-- utils/
  -- actionTypes.js
  -- isPlainObject.js
  -- warning.js
-- applyMiddleware.js
-- bindActionCreators.js
-- combineReducers.js
-- compose.js
-- createStore.js
-- index.js
复制代码

项目的文件非常的少，主要逻辑也是在src直接目录下的文件，先做个热身，对简单的utils文件夹入手，这是一些通用的工具方法：

utils

在看源码的过程中，对一些工具方法的使用效果保持一定的记忆，对流程的理解上挺有帮助

actionTypes.js

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`,
  REPLACE: `@@redux/REPLACE${randomString()}`,
  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
}
复制代码

actionTypes.js主要定义一些redux内部使用的action，randomString函数是生成一些随机字符串，保证内部使用的action不会冲突

isPlaginObject.js

export default function isPlainObject(obj) {
  if (typeof obj !== 'object' || obj === null) return false

  let proto = obj
  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }

  return Object.getPrototypeOf(obj) === proto
}
复制代码

该方法用于判断参数是否是一个“纯对象”。什么是“纯对象”，就是直接继承Object.prototype的对象，例如直接声明的对象：const obj = {}；如果const objSub = Object.create(obj)，那么objSub就不是这里说的“纯对象”。

warning.js

export default function warning(message) {
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message)
  }
  try {
    throw new Error(message)
  } catch (e) {}
}
复制代码

warning.js逻辑比较简单：先把错误的详细信息打印出来，再抛出错误。

核心

热身完之后，我们来看一下redux的核心，入口在：src/index.js:

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}
复制代码

这个是index.js的暴露对象，都是从外部引入；除此之外，还有一个叫空函数isCrushed：

function isCrushed() {}
复制代码

这个空函数的作用是啥？因为在代码压缩的时候，会对该函数进行重命名，变成function a(){}，这样子的函数；这个函数的作用就是，判断如果redux代码被压缩了，而且redux不是运行在production环境，就会报错，提示使用开发版本。

redux 的核心是createStore，这个核心我们先放一下，后面再处理，先了解一些辅助该核心的方法：

bindActionCreators

这个方法出场率有时候不是很高，那么它的作用是啥？

首先我们知道一个词汇actionCreator，这个actionCreator就如命名那样，是用于创建action类型的函数。那bindActionCreators的目的又是什么？这里可能要结合react-redux的connect方法与“容器组件”、“展示组件”(容器组件 vs 展示组件)来说明会更好。

通常情况下，如果要让当前组件是用redux，我们会使用react-redux的connect方法，把我们的组件通过connect包裹为一个高级组件，而包裹的过程拿到dispatch与我们指定的store数据：

// Container.jsx
import { connect } from 'react-redux'

class Container extends React.Component {
    // ...
    render () {
        return <SimpleComponent />
    }
}

export default connect(state => ({ todo: state.todo }))(Container)
复制代码

而这个Container组件我们可以称之为“容器组件”，因为里面包含了一些复杂的处理逻辑，例如与redux的连接；而如果SimpleComponent组件也有一些操作，这些操作需要更改到redux的内容，这样子的话，处理方法有两个：

1. SimpleComponent也使用connect处理为高级组件
2. Container把redux的dispatch方法显示传递到SimpleComponent

这两个方法都不是很好，第一方法会让组件更加复杂，可能与我们的容器组件-展示组件的姿势有点不同；第二种方法也可以，但是会让组件变得耦合度高。那能不能让SimpleComponent组件给Container的反馈也通过平常props-event的形式来处理呢，让SimpleComponent感知不到redux的存在？

这个时候就可以使用bindActionCreators了；例如有一个action为：{ type: 'increment', value: 1}，通常如果Container组件触发可以通过：

// actions.js
const Add = (value) => { type: 'increment', value }
复制代码

// Container.jsx
import Add from './actions.js'

// Container.jsx 某个事件触发触发更新
class Container extends React.Component {
    onClick() {
        dispatch(Add(1))
     }
}
复制代码

利用bindActionCreators处理后，给到SimpleComponent使用则可以这样：

// Container.jsx
import Add from './actions.js'

class Container extends React.Component {
    render () {
        const { dispatch } = this.props // 通过 react-redux 的 connect 方法组件可以获取到
        const actions = bindActionCreator({
            add: Add
        }, dispatch)
        
        return <SimpleComponent {...actions} />
    }
}

// SimpleComponent.jsx
function SimpleComponent({ add }) {
    return <button onClick={() => add(1)}>click</button>
}
复制代码

通过bindActionCreators处理后的函数，add，直接调用，就可以触发dispatch来更新，而这个时候SimpleComponent并没有感知到有redux，只是当是一个事件函数那样子调用。

了解到bindActionCreators的作用之后，我们再来看一下源码就很好理解了：

function bindActionCreator(actionCreator, dispatch) {
  // 使用闭包来屏蔽 dispatch 与 actionCreator
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}
export default function bindActionCreators(actionCreators, dispatch) {
  // 当 actionCreators 只有一个的时候，直接返回该函数的打包结果
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // 省略参数类型判断
  // ...
  const boundActionCreators = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    // 只对 { key: actionCreator } 中的函数处理；actionCreators 中的其他数据类型被忽略
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}
复制代码

combineReducers

接下来说一下combineReducers，这个方法理解起来比较简单，就是把多个reducer合并到一起，因为在开发过程中，大多数的数据不会只有一个reducer这么简单，需要多个联合起来，组成复杂的数据。

// () => {} 为每个对应的reducer
const state = {
    count: () => {},
    userData: () => {},
    oeherData: () => {}
}
复制代码

通常使用compineReducer可以让我们规避一些问题，例如对reducer的传入参数的判断等，保证reduce流程的运转，简化核心代码如下，去掉一部分开发代码，但是会注释作用：

export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  // 检查所有reducer的key值是否合法，reducer是一个函数，则加入到finalReducers
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    // 这里有个判断，如果reducers对象的某个key值的value为undefined，则报错

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // 这里有个判断(assertReducerShape)，判断是否有 reducer 返回是 undefined
  // 如果有，则先保留这个错误，我们定义为错误 A
    
  // 这个 combination 函数，每次dispatch都会执行一次
  return function combination(state = {}, action) {
    // 这里有个判断，如果错误A存在，则抛出异常

    // 这里有个判断(getUnexpectedStateShapeWarningMessage)，会对数据进行多重判断，
    // 判断有错，则抛出异常，判断的规则有：
    // 1. reducers的数量是否为0
    // 2. 对每次执行reducer传入的state（state的来源后面讲到）是否是“纯对象”（上面有提到）
    // 3. 对每次执行reducer传入的state对象判断，是否该对象所有的字段都是“自己的”(hasOwnProperty)，
    // 也就是没有一些从父对象继承，toString ?
    // 第三点其实有点不太了解，因为第二步纯对象已经过滤了？
    
    // 下面这个就是 combineReducers 的核心代码
    let hasChanged = false
    const nextState = {}
    
    // 遍历所有的函数reducer，获取返回值，通过判断前后值的不同，判断是否发生了变化，有变化，则返回新的state
    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)
      
      // 不允许 reducer 返回的值为 undefined，否则报错
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      // 这里判断是否改变，是通过判断 reducer 返回的值与之前的值是否一致
      // 所以就突出了“不可变对象”的重要性
      // 如果reducer每次返回的对象是在旧对象上面更改数据
      // 而对象地址没改变，那么 redux 就认为，这次改变是无效的
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}
复制代码

createStore

讲完上面两个辅助方法之后，来讲一下创建store的核心createStore的方法；因为createStore方法比较长，下面先看一下概览：

export default function createStore(reducer, preloadState, enhancer) {
    // 判断是否传入各种参数是否符合要求
    // 对于增强器（enhancer）的调用会提前返回
    // 创建store的过程被延后到增强器中
    // ...
    
    // 当前最新的 reducer 与 state
    // listeners 是通过 store实例subscribe的函数数组
    let currentReducer = reducer
    let currentState = preloadedState
    let currentListeners = []
    let nextListeners = currentListeners
    // 当前的reducer是否在执行当中
    let isDispatching = false
    
    // 用于防止 listeners 数组出错，后面讲到
    function ensureCanMutateNextListeners() {}
    // 返回当前最新的 state，给外部函数调用获取内部数据
    function getState() {
        return currentState
    }
    
    // store.subscribe的方法，用于添加 listener，后面有详细讲解
    // 监听 state 的变化
    function subscribe(listener) {}
    
    // 触发 reducer 执行，返回新的 state
    function dispatch(action) {}
    
    // 使用新的 reducer 替换当前的 currentReducer
    // 通常在两种情况下使用：
    // 1. 部分 reducer 异步加载，加载完毕后添加
    // 2. 用于开发时候用，热更新
    function replaceReducer(nextReducer) {
        currentReducer = nextReducer
    }
    
    // TODO 这个了解不多
    function observable () {}
    
    // 触发第一个更新。拿到第一次初始化的 state
    dispatch({ type: ActionTypes.INIT })
}
复制代码

在没有enhancer处理的过程，createStore的过程，都是一些声明的函数与变量，唯一开始执行的是dispatch，现在就从这个dispatch开始讲解：

function dispatch (action) {
    // 判断 action 是否是“纯”函数
    // 判断 action.type 是否存在
    // ...
    
    // 判断当前的dispatch是否在执行中，多次触发，则报错
    if (isDispatching) { throw new Error() }
    
    try {
      isDispatching = true
      // 尝试去执行 reducer，把返回的 state 作为最新的 state
      // 如果 我们的 reducer 是使用 combineReducers 方法包裹的话
      // 这里的 currentReducer 为 comineReducer的combination方法
      // 这里回答了之前所说的 combination 方法拿到的第一个参数 state
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    
    // 更新完 state 之后，就会把监听的函数全都执行一遍
    // 注意这里的 currentListeners 被赋值为 nextListeners
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
}
复制代码

整个 dispatch 就结束了，很简单，就是把所有reducer都执行一遍，返回最新的 reducer；如果使用combineReducer来联合所有的reducer的话，相当于执行combination方法，该方法会把被联合的所有reducer都执行一遍，所以这里能解释说，为什么在reducer方法的时候，在switch...case要保留一个default选项，因为有可能执行当前reducer的action，是用于触发其他reducer的；这种情况就把当前reducer对应的state返回即可

function reducer(state, action) {
    switch (action.type) {
    case '':
        // ...
        break
    case '':
        // ...
        break
    default:
        return state
    }
}
复制代码

当state通过reducer更新之后，就会把加入监听的listener逐个执行；循环的listeners是currentListeners，这里要圆一下之前说的ensureCanMutateNextListeners函数与subscribe的行为，函数代码为：

function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
        nextListeners = currentListeners.slice()
    }
}

function subscribe(listener) {
    // 省略部分参数与进程判断
    let isSubscribed = true
    
    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
        if (!isSubscribed) {
            return
        }

        // 省略部分进程可行性判断

        isSubscribed = false

        ensureCanMutateNextListeners()
        const index = nextListeners.indexOf(listener)
        nextListeners.splice(index, 1)
    }
}
复制代码

我们看到subscribe与unsubscribe的过程，只是一个很简单的数组处理添加与删除listeners的过程，但是这两个过程都有执行ensureCanMutateNextListeners的函数。这个函数的作用是：

保证当次触发listeners的过程不受影响

这句话怎么理解呢？可以看到触发listeners也只是把listeners的函数循环执行一遍。但如果listeners由此至终都只是一个数组，那么如果某个listeners执行的内容，再次添加/删除listener，那么这个循环过程就有可能出现问题：

const { dispatch, subscribe } = createStore(/* ... */)

subscribe(() => {
    log('state change')
    // 在 listeners 添加监听方法
    subscribe(() => {
        
    })
    // 或者 移除之前监听的部分方法
    unsubscribe(/* ... */)
})
复制代码

所以ensureCanMutateNextListeners把listeners区分为两个数组，一个是当前循环的数组，另一个是下次循环的数组。每次触发dispatch都是最近更新的一次listeners快照。

compose 与 applyMiddleware

了解完核心createStore之后，我们再了解一下增强核心功能的函数：applyMiddleware，因为applyMiddleware与compose关联很密切，applyMiddleware的实现依赖compose。

compose

compose是一个函数，先看一下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的代码的作用是简化代码:

(...args) => f(g(h(...args)))

// 等同于 
compose(f, g, h)(...args)

// compose使用例子
function foo (str) {
    return str + '_foo'
}
function bar (str) {
    return str + '_bar'
}
function baz (str) {
    return str + '_baz'
}
compose(baz, bar, foo)('base') // "base_foo_bar_baz"
复制代码

compose方法就是把上一个函数执行的结果作为下一个函数执行的参数，执行顺序从后往前，传入参数的最后一个函数先被执行。

applyMiddleware

middleware就是一个中间件的概念，简化如下：

数据经过每个中间件的处理，会对数据，或者保留一些数据的痕迹，例如写入日志等

applyMiddleware的用法也是类似：

const store = createStore(rootReducer, {}, applyMiddleware(middleware1, middleware2))
复制代码

// applyMiddleware 源码
export default function applyMiddleware(...middlewares) {
    // createStore方法作为参数传入
    // 相当于延迟一步初始化 store
    return createStore => (...args) => {
        const store = createStore(...args)
        let dispatch = () => {/* ... */}

        const middlewareAPI = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }
        
        // 把传入的 middleware 先执行了一遍
        // 把 getState 与 dispatch 方法传入
        // 让 middleware 能够获取到当前 store 的 state与有触发新的 dispatch 能力
        const chain = middlewares.map(middleware => middleware(middlewareAPI))
        
        // 这个时候的 dispatch 不是原有的 createStore 函数中的方法
        // 而是一个经过 middleware 集成的新方法
        // 而原有的 dispatch 方法作为参数，传入到不同的middleware
        dispatch = compose(...chain)(store.dispatch)

        return {
            ...store,
            // 使用当前的 dispatch 覆盖 createStore 的 dispatch 方法
            dispatch
        }
  }
}
复制代码

redux-thunk是一个对于了解middleware很好的例子，下面参照redux-thunk弄一个自定义的middleware, 源码如下：

function customeMiddleware({ dispatch, getState }) {
    return next => {
        return action => {
            if (typeof action === 'function') {
                return action(dispatch, getState)
            }
            
            return next(action)
        }
    }
}
复制代码

为什么会函数嵌套那么多层呢？其实每一层都是有原因的；第一层：

function customeMiddleware ({dispatch, getState}) {
    // ...
}
复制代码

dispatch是能够触发一个完整流程更改state的方法，getState方法用于获取整个reducer的state数据；这两个方法都是给到middleware需要获取完整state的方法。从上面applyMiddleware的方法可以知道，applyMiddleware执行的时候，就先把middleware函数都执行了一遍，返回chains数组：

const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
复制代码

看到这里，会有一个疑问compose执行的顺序是从后面往前执行，但是我们定义middleware是从前往后的。

chains数组的方法相当于middleware的next方法（接收参数为next函数，暂时这样子命名）,compose执行的时候，相当于next已经执行，并且返回一个新的函数，这个函数是接收一个叫action的函数（暂命名为action函数）；因为每个middleware的接收next函数执行后都是action函数；next函数的next参数就是上一个函数的返回值。执行到最后，dispatch = compose(...)(store.dispatch),dispatch函数其实是第一个middleware的action函数

// chain0 表示 chain 数组中的第一个函数，chain1表示第二个，以此类推
// compose 执行顺序为倒序
const action2 = chain2(store.dispatch) // store.dispatch的值是compose()(store.dispatch)传入的
const action1 = chain1(action2)
const action0 = chain0(action1)
复制代码

action0就是最终返回到dispatch函数；当我们在组件中执行dispatch()的时候，实际上是调用action0函数，action0函数可以通过next调用下一个middleware

// action0
action0(action)
const result = next(action) // 这个 next 的函数为 action1
    // action1
    action1(action)
    const result = next(action) // 这个 next 的函数为action2
        // action2
        action2(action)
        const result = next(action) // 这个 next 的函数为 store.dispatch
复制代码

就这样子层层嵌套，把每个middleware都执行完，最终去到store.dispatch，最终更改好reducer，返回一个全新的state；而这个state也层层冒泡传到最顶层的middleware；middleware执行顺序的疑问由此解开。

小结

redux的源码不多，使用起来也很简单，但是里面运用的知识不少，特别是在middleware的时候，需要很细心的看且有较好的基础，不然看起来还是有点吃力的。另外一些用闭包来缓存变量、保存函数执行状态等，用得很精妙。Get.~

安利：如果大家觉得文章不错，可以在github给个star，更多文章，可以看我的 github issues。

这篇关于一篇带有“思考”的redux源码阅读的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！