[JavaScript知识库]react-redux中的connect

将redux中的state与react中组件中的属性或者方法作绑定。

1、createConnect

作为高阶函数，创建Connect。

function createConnect({

? connectHOC = connectAdvanced,

? mapStateToPropsFactories = defaultMapStateToPropsFactories,

? mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,

? mergePropsFactories = defaultMergePropsFactories,

? selectorFactory = defaultSelectorFactory,

} = {})

参数为对象，包含了connectHOC, mapStateToPropsFactories, mapDispatchToPropsFactories, mergePropsFactories和selectorFactory。其中connectHOC是用于连接高阶组件，mapStateToPropsFactories为属性映射工厂，mapDispatchToPropsFactories为分发映射工厂，mergePropsFactories为合并属性工厂。

mapStateToPropsFactories工厂主要包含两个

[whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing]

mapDispatchToPropsFactories分发工厂包含三个

[?

whenMapDispatchToPropsIsFunction,?

whenMapDispatchToPropsIsMissing,?

whenMapDispatchToPropsIsObject

]

createConnect会返回connect函数。

function connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    {
      pure = true,
      areStatesEqual = strictEqual,
      areOwnPropsEqual = shallowEqual,
      areStatePropsEqual = shallowEqual,
      areMergedPropsEqual = shallowEqual,
      ...extraOptions
    } = {}
  ) {
    const initMapStateToProps = match(
      mapStateToProps,
      mapStateToPropsFactories,
      'mapStateToProps'
    )
    const initMapDispatchToProps = match(
      mapDispatchToProps,
      mapDispatchToPropsFactories,
      'mapDispatchToProps'
    )
    const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')

    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})`,

      // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
      shouldHandleStateChanges: Boolean(mapStateToProps),

      // passed through to selectorFactory
      initMapStateToProps,
      initMapDispatchToProps,
      initMergeProps,
      pure,
      areStatesEqual,
      areOwnPropsEqual,
      areStatePropsEqual,
      areMergedPropsEqual,

      // any extra options args can override defaults of connect or connectAdvanced
      ...extraOptions,
    })
  }

2、wrapMapToPropsFunc

whenMapStateToPropsIsFunction和whenMapDispatchToPropsIsFunction都会调用wrapMapToPropsFunc。返回initProxySelector函数，创建proxy对象，处理属性映射?

function initProxySelector(dispatch, { displayName }) {
    const proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
      return proxy.dependsOnOwnProps
        ? proxy.mapToProps(stateOrDispatch, ownProps)
        : proxy.mapToProps(stateOrDispatch)
    }

    // allow detectFactoryAndVerify to get ownProps
    proxy.dependsOnOwnProps = true

    proxy.mapToProps = function detectFactoryAndVerify(
      stateOrDispatch,
      ownProps
    ) {
      proxy.mapToProps = mapToProps
      proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps)
      let props = proxy(stateOrDispatch, ownProps)

      if (typeof props === 'function') {
        proxy.mapToProps = props
        proxy.dependsOnOwnProps = getDependsOnOwnProps(props)
        props = proxy(stateOrDispatch, ownProps)
      }

      if (process.env.NODE_ENV !== 'production')
        verifyPlainObject(props, displayName, methodName)

      return props
    }

    return proxy
  }

3、connectHOC

对组件作封装，实际函数是connectAdvanced，返回函数wrapWithConnect

4、whenMapDispatchToPropsIsObject

当mapDispatchToProps为对象时，mapDispatchToPropsFactories使用的是whenMapDispatchToPropsIsObject，绑定action的创建者，并且分发

function bindActionCreators(actionCreators, dispatch) {
  const boundActionCreators = {}
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = (...args) => dispatch(actionCreator(...args))
    }
  }
  return boundActionCreators
}