Redux源码分析

1 redux使用步骤

React仅仅是一个前端View框架库，可以看做是MVC里面的V。没有解决组件间通信，MVC分离，数据共享等问题。Redux的出现使得这些都不是问题。使用Redux也比较简单，步骤大概如下:
1.编写React Component，这里不涉及Redux
2.编写reducer，它接收一个state和action，返回一个新的state
3.createStore(reducer) 得到store对象，它是Redux的核心对象。包含的主要API如下 :
(1).getState(), 得到store中保存的state对象
(2).dispatch(action), 发送action消息给store，它会调用reducer更新state，并回调subscribe的监听器
(3).subcribe(listener), 注册监听器，dispatch触发时会回调
4.编写React Component中的事件回调，比如onClick。使用store.dispatch(action)发送消息，reducer此时会得到调用，更新state。

其中createStore(reducer)比较关键，下面来分析它的源码

2 createStore()源码分析

function createStore(reducer, preloadedState, enhancer) {
  // reducer, preloadedState, enhancer 入参检查 

  let currentReducer = reducer
  let currentState = preloadedState  // createStore传入的state会存储为初始state
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  // 判断是否能触发nextListeners
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  // 返回store中存储的state
  function getState() {
    return currentState
  }

  // 注册事件,加入到listener数组中。每次dispatch调用时，会回调注册的listener
  function subscribe(listener) {
    let isSubscribed = true

    // 存储listener
    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    // 取消订阅事件
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      // 找到要取消订阅的listener,然后从数组中删除,以后就不会回调到它了
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

  // 发送消息action。主要两件事
  // 1. 调用reducer更新state
  // 2. 回调subscribe注册的listeners
  function dispatch(action) {
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      // 调用reducer来更新state, 传入当前state和action
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    // 回调subscribe的listeners, dispatch会触发回调listener
    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

  // createStore时触发一次dispatch, 一般会调用到我们reducer里面的default分支,此时返回默认state,更新currentState
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
  }

源码分析中对一些不是很关键的地方做了省略，我们重点关注dispatch， subscribe， getState三个API即可。其中dispatch稍微麻烦点，它主要做两件事

调用reducer更新state
回调subscribe注册的listeners

3 React-redux 使用步骤

Redux已经足够优秀了，但需要用户手动调用setState来更新view，也没有建立store上的state数据和React Component之间联系，而React-redux框架很好的解决了这个问题。它的使用步骤如下
1.编写UI组件，也就是React Component。这部分和Redux无关
2.编写mapStateToProps, mapDispatchToProps,然后connect(mapStateToProps, mapDispatchToProps)(UI组件)来生成容器组件。容器组件包含了UI，数据和逻辑。

3.编写reducers，完成控制逻辑。这部分和只是用Redux相同

4.应用顶层做整合
(1).createStore(reducers) 生成store
(2).使用Provider包装顶层组件，如下

ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>,
document.getElementById('root')
);

步骤不复杂，下面我们来分析下connect源码

4 connect源码分析

connectAPI为connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]), 后两个参数不是很关键，我们源码分析中省略它们，这样以最简洁的方式分析主流程

function connect(mapStateToProps, mapDispatchToProps) {
  const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
  const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')

  return connectHOC(selectorFactory, {
    // used in error messages
    methodName: 'connect',

     // used to compute Connect's displayName from the wrapped component's displayName.
    getDisplayName: name => `Connect(${name})`,

    // mapStateToProps为空时，不能自动处理View刷新，此时需要用户自己setState来更新view
    shouldHandleStateChanges: Boolean(mapStateToProps),

    // 参数传递到selectorFactory
    initMapStateToProps,
    initMapDispatchToProps,
  })
}

connect方法没做什么事情，调用的connectHOC方法，connectHOC默认实现为connectAdvanced。connectAdvanced最终返回经过包装的React组件，也就是Redux所说的容器型组件。它对React组件生命周期方法进行了一些处理，源码如下。

class Connect extends Component {
      constructor(props, context) {
        super(props, context)

        this.version = version
        this.state = {}
        this.renderCount = 0
        this.store = props[storeKey] || context[storeKey]
        this.propsMode = Boolean(props[storeKey])
        this.setWrappedInstance = this.setWrappedInstance.bind(this)
        this.initSelector()
        this.initSubscription()
      }

      componentDidMount() {
        // shouldHandleStateChanges: Boolean(mapStateToProps)
        // 当mapStateToProps为空时，不能自动处理View刷新，此时需要用户自己setState来更新view
        if (!shouldHandleStateChanges) return

        // 关键在selector.run()方法中，它会将mapStateToProps mapDispatchToProps等扩展的数据添加到React Component的props上。具体看后面makeSelectorStateful的分析
        this.subscription.trySubscribe()
        this.selector.run(this.props)
        // 如果props有改变，shouldComponentUpdate会为true，此时forupdate强制刷新view
        if (this.selector.shouldComponentUpdate) this.forceUpdate()
      }

      componentWillReceiveProps(nextProps) {
        // 具体代码看后面的makeSelectorStateful，主要是判断props有没有更新，如果更新则刷新view
        this.selector.run(nextProps)
      }

      // 判断是否取消掉view的刷新，React生命周期方法
      // selector.shouldComponentUpdate在makeSelectorStateful进行赋值的
      // 如果前后两次props有改变，则设置为true，此时不会拦截view的刷新
      shouldComponentUpdate() {
        return this.selector.shouldComponentUpdate
      }

      // unmount卸载前的调用
      componentWillUnmount() {
        if (this.subscription) this.subscription.tryUnsubscribe()
        this.subscription = null
        this.notifyNestedSubs = noop
        this.store = null
        this.selector.run = noop
        this.selector.shouldComponentUpdate = false
      }

      // wrappedInstance为未经过包装的React组件，也就是Redux所说的UI组件
      getWrappedInstance() {
        return this.wrappedInstance
      }

      setWrappedInstance(ref) {
        this.wrappedInstance = ref
      }

      // 比较关键，具体分析可以看后面对makeSelectorStateful的单独分析
      initSelector() {
        // selectorFactory很复杂，大概就是将stateProps，dispatchProps和原先就有的props合并。
        const sourceSelector = selectorFactory(this.store.dispatch, selectorFactoryOptions)
        // run方法在props有变化时，将shouldComponentUpdate设置为true，React生命周期时可以刷新view。另外将mapStateToProps mapDispatchToProps等扩展的数据添加到React Component的props上。
        this.selector = makeSelectorStateful(sourceSelector, this.store)
        this.selector.run(this.props)
      }

      onStateChange() {
        this.selector.run(this.props)

        if (!this.selector.shouldComponentUpdate) {
          this.notifyNestedSubs()
        } else {
          this.componentDidUpdate = this.notifyNestedSubsOnComponentDidUpdate
          this.setState(dummyState)
        }
      }

      addExtraProps(props) {
        // 省略不关键的代码，基本就是将props返回。
        const withExtras = { ...props }
        return withExtras
      }

      // Redux封装了React Component，重写了render方法，对props进行了增强
      render() {
        const selector = this.selector
        selector.shouldComponentUpdate = false

        if (selector.error) {
          throw selector.error
        } else {
          // WrappedComponent是connect()(reactComponent)中传入的React Component
          // Redux对React Component进行了封装，render方法最后调用React的createElement 将props传入
          return createElement(WrappedComponent, this.addExtraProps(selector.props))
        }javascript:void(null)
      }
    }
}

initSelector()方法调用makeSelectorStateful获取selector，并调用它的run方法

function makeSelectorStateful(sourceSelector, store) {
  const selector = {
    run: function runComponentSelector(props) {
      try {
        // 得到props， selector为我们包装的React Component对象
        const nextProps = sourceSelector(store.getState(), props)
        if (nextProps !== selector.props || selector.error) {
          // props有变化，则shouldComponentUpdate为true，会刷新view
          selector.shouldComponentUpdate = true
          // 将mapStateToProps mapDispatchToProps等扩展的数据添加到React Component的props上
          selector.props = nextProps
          selector.error = null
        }
      } catch (error) {
        selector.shouldComponentUpdate = true
        selector.error = error
      }
    }
  }

  return selector
}

connect方法源码十分复杂，我们省略了很多不关键的地方。从源码中我们可以看出

1.mapStateToProps，mapDispatchToProps，最终会经过selectorFactory，与React组件本身的props进行合并。
2.mapStateToProps注册了subscribe，这样每次dispatch时，回调完reducer后，就会调用mapStateToProps，将新的state传递过来。此时再将state合并到组件的props上，会引起props的改变，从而触发一次forceUpdate，从而自动刷新view
3.connect方法对React组件进行了包装，返回一个容器型组件。