connect API
上篇文章庖丁解牛React-Redux(一): connectAdvanced引见了react-redux的Provider、connectAdvanced几个重要API的道理，个中connectAdvanced是connect函数的基础，这篇文章将重要引见connect函数的道理。之前没有浏览过connectAdvanced最好提早浏览一下这篇文章。之前的文章有读者反应看起来比较艰涩，所以我预备随后会出一篇关于类似图解connectAdvanced的文章，不讲代码，重要从道理的方面解释connectAdvanced。再次做个广告，迎接人人关注我的掘金账号和我的博客。
最最先我们照样来引见一下connect函数:
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) 将React组件衔接到Redux store，connect函数是connectAdvanced的正面，为大多数罕见场景供应了易于运用的API。connect函数并不会修正通报的组件，相反，它会返回一个新的，衔接到store的组件类。
参数:
[mapStateToProps(state, [ownProps]): stateProps](Function):
假如这个参数被通报，返回新的组件将会定阅Redux的store的更新(update)。这意味着任何时刻store更新，mapStateToProps将会被挪用。mapStateToProps必需返回一个纯对象(plain object)，这个对象将会兼并进组件的属性(props)。假如你不想定阅store的更新，能够给mapStateToProps参数通报null或许undefined。
假如你的mapStateToProps函数被声明接收两个参数，mapStateToProps在挪用时第一个参数是store state，通报给衔接组件(connected component)的属性将会被作为第二个参数。假如衔接组件接收到新的props(浅比较)，mapStateToProps也会再次挪用。
注重: 在一些更高等的状况下，你须要更好的掌握衬着的机能，
mapStateToProps能够返回一个函数。这类场景下，返回的函数将会被作为特定组件实例的mapStateProps()函数。这许可你能够对每一个实例缓存。但大部份运用用不到。
mapStateToProps函数接收一个参数: Redux中store的state，并返回一个对象作为属性返回给被包裹的组件。这一般被称为`selector。
mapDispatchToProps(dispatch, [ownProps]): dispatchProps:
假如传入参数是一个对象，对象中的每一个函数都被认为是Redux的action creator函数。返回的对象中的每一个action creator函数都邑被dispatch所包裹，因而能够直接挪用，终究会被兼并进入组件的属性。
假如通报一个函数，该函数的第一个参数为dispatch。须要你返回一个对象，个中的属性以你的体式格局将dispatch与action creator相绑定。
假如你的mapDispatchToProps函数声明接收两个参数，第一个函数是dispatch，第二个参数是通报给衔接组件的属性。每当衔接组件收到新的参数时，mapDispatchToProps就会被再次挪用。
假如没有传入自定义的mapDispatchToProps函数或许对象，默许的mapDispatchToProps将为你的组件注入dispatch属性。
注重:
mapDispatchToProps也能够返回函数，用法与mapStateToProps雷同
mergeProps(stateProps, dispatchProps, ownProps): props:
假如指定了这个参数，传入的参数为:函数 mapStateToProps()、mapDispatchToProps()的运转效果以及传入衔接组件的属性。从该函数返回的对象将会被当作属性通报给被包裹的组件。你能够会指定这个函数来基于props来挑选性传入state，或许依据传入props绑定action creator。假如你省略了这个函数，默许是完成体式格局是:`
Object.assign({}, ownProps, stateProps, dispatchProps)
`
options
假如你指定了这个选项，更进一步自定义connector的行动。除了能够传入connectAdvanced的选项，还能够接收分外的选项:[pure] (Boolean): 假如参数为true，用来防止从新衬着并挪用
mapStateToProps、mapDispatchToProps和mergeProps时基于各自的等值比较函数来比较所涉及到的state和props对象。[areStatesEqual] (Function): 假如参数
pure为true,用来比较传入的store与之前的store值。默许值: strictEqual (===)。[areOwnPropsEqual] (Function):假如参数
pure为true，用来比较传入的props与之前的props值。默许值: strictEqual (===)。[areStatePropsEqual] (Function):假如参数
pure为true，用以比较mapStateToProps函数的效果与之前的效果值。[areMergedPropsEqual] (Function): 假如参数
pure为true，比较mergeProps函数的效果与之前的值。默许值为:shallowEqual。[storeKey] (String): 用以从context猎取store的key值。你仅仅能够在有多个store值的状况下才须要这个选项，默许值为:
store。
connect源码
connect的代码以下:
export function createConnect({
connectHOC = connectAdvanced,
mapStateToPropsFactories = defaultMapStateToPropsFactories,
mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
mergePropsFactories = defaultMergePropsFactories,
selectorFactory = defaultSelectorFactory
} = {}) {
return 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, {
methodName: 'connect',
getDisplayName: name => `Connect(${name})`,
shouldHandleStateChanges: Boolean(mapStateToProps),
initMapStateToProps,
initMapDispatchToProps,
initMergeProps,
pure,
areStatesEqual,
areOwnPropsEqual,
areStatePropsEqual,
areMergedPropsEqual,
...extraOptions
})
}
}
const connect = createConnect(); createConnect作为高阶函数，返回connect函数，经由过程柯里化的体式格局起首接收以下参数: connectHOC、mapStateToPropsFactories、mapDispatchToPropsFactories、mergePropsFactories与selectorFactory。
connectHOC
传入用来天生衔接到store的高阶组件(HOC)，默许是之前引见过的connectAdvanced。
selectorFactory
selectorFactory用来天生selector，第一个参数将传入connectAdvanced。我们晓得传入connectAdvanced的selectorFactory函数重如果初始化selector函数。selector函数在每次connector component须要盘算新的props都邑被挪用，selector函数会返回纯对象(plain object),这个对象会作为props通报给被包裹的组件(WrappedComponent)。selectorFactory的函数署名为:
selectorFactory(dispatch, factoryOptions): selector(state, ownProps): props (Function) 我们来看看redux的selectorFactory是怎样定义的:
const selectorFactory = finalPropsSelectorFactory(dispatch, {
initMapStateToProps,
initMapDispatchToProps,
initMergeProps,
...options
}) {
const mapStateToProps = initMapStateToProps(dispatch, options)
const mapDispatchToProps = initMapDispatchToProps(dispatch, options)
const mergeProps = initMergeProps(dispatch, options)
if (process.env.NODE_ENV !== 'production') {
verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, options.displayName)
}
const selectorFactory = options.pure
? pureFinalPropsSelectorFactory
: impureFinalPropsSelectorFactory
return selectorFactory(
mapStateToProps,
mapDispatchToProps,
mergeProps,
dispatch,
options
)
} selectorFactory函数起首接收两个参数，dispatch和一系列的factoryOptions,经由过程一系列的初始化函数离别天生了mapStateToProps、mapDispatchToProps、mergeProps(初始化函数随后会细致引见)。然后会在非生产环境下对上述三个函数举行考证(考证重要涉及到该函数是不是为空和函数中是不是有dependsOnOwnProps属性，这个属性随后会引见的)。随后就是函数的重点部份，依据options.pure是不是为true,挑选适当的selectorFactory，然后返回selectorFactory(...args)。
当options.pure为false时，selectorFactory的值为:impureFinalPropsSelectorFactory:
function impureFinalPropsSelectorFactory(
mapStateToProps,
mapDispatchToProps,
mergeProps,
dispatch
) {
return function impureFinalPropsSelector(state, ownProps) {
return mergeProps(
mapStateToProps(state, ownProps),
mapDispatchToProps(dispatch, ownProps),
ownProps
)
}
} 我们晓得，selectorFactory会返回selector函数，返回的函数会接收两个参数:state与ownProps并终究返回属性通报给被包裹的组件。我们发明impureFinalPropsSelectorFactory异常的简朴，只是纯真的将请求的参数通报给mapStateToProps，mapDispatchToProps，并将其效果连同ownProps一同通报给mergeProps，并将末了mergeProps的效果作为selector函数的效果。这个效果终究会通报给被包裹组件，这个函数没有什么难度而且异常相符connect函数的API。
但我们晓得在默许状况下,options.pure为true。因而selectorFactory的值为:pureFinalPropsSelectorFactory:
pureFinalPropsSelectorFactory(
mapStateToProps,
mapDispatchToProps,
mergeProps,
dispatch,
{ areStatesEqual, areOwnPropsEqual, areStatePropsEqual }
) {
let hasRunAtLeastOnce = false
let state
let ownProps
let stateProps
let dispatchProps
let mergedProps
// ......
return function pureFinalPropsSelector(nextState, nextOwnProps) {
return hasRunAtLeastOnce
? handleSubsequentCalls(nextState, nextOwnProps)
: handleFirstCall(nextState, nextOwnProps)
}
} 函数pureFinalPropsSelectorFactory中有一个闭包变量hasRunAtLeastOnce用来推断是不是是第一次挪用，假如selector函数是第一次挪用，selector会返回handleFirstCall(nextState, nextOwnProps)不然返回handleSubsequentCalls(nextState, nextOwnProps)。
function handleFirstCall(firstState, firstOwnProps) {
state = firstState
ownProps = firstOwnProps
stateProps = mapStateToProps(state, ownProps)
dispatchProps = mapDispatchToProps(dispatch, ownProps)
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
hasRunAtLeastOnce = true
return mergedProps
} handleFirstCall与之前的impureFinalPropsSelector比拟，只是做了缓存，保留了state、ownProps以及mapStateToProps、dispatchProps和mergedProps的效果值。
function handleSubsequentCalls(nextState, nextOwnProps) {
const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps)
const stateChanged = !areStatesEqual(nextState, state)
state = nextState
ownProps = nextOwnProps
if (propsChanged && stateChanged) return handleNewPropsAndNewState()
if (propsChanged) return handleNewProps()
if (stateChanged) return handleNewState()
return mergedProps
} 再看函数handleSubsequentCalls。个中areOwnPropsEqual、areStatesEqual离别用来推断props和state如今的值与缓存的值是不是相称函数。handleSubsequentCalls起首推断state、props的前后值是不是有变化，然后缓存了state、ownProps。假如props和state都发送转变了，返回handleNewPropsAndNewState的效果，假如props转变了，返回handleNewProps的运转效果。假如state转变，返回handleNewState运转效果，不然假如state和props都没发作转变，申明都没有发作转变。直接返回之前缓存的mergedProps的值。
handleNewPropsAndNewState定义以下:
function handleNewPropsAndNewState() {
stateProps = mapStateToProps(state, ownProps)
if (mapDispatchToProps.dependsOnOwnProps)
dispatchProps = mapDispatchToProps(dispatch, ownProps)
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
return mergedProps
} 我们看到，假如props和state都发送转变了，挪用了handleNewPropsAndNewState，起首就是运转mapStateToProps返回stateProps的值并缓存，其次我们会依据mapDispatchToProps.dependsOnOwnProps的值去鉴别是不是运转mapDispatchToProps。dependsOnOwnProps的值重如果用来鉴别mapDispatchToProps是不是依赖于ownProps的值。终究实行mergeProps函数，缓存效果并传入被包裹的组件。
function handleNewProps() {
if (mapStateToProps.dependsOnOwnProps)
stateProps = mapStateToProps(state, ownProps)
if (mapDispatchToProps.dependsOnOwnProps)
dispatchProps = mapDispatchToProps(dispatch, ownProps)
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
return mergedProps
} 明白了handleNewPropsAndNewState，handleNewProps将会异常简朴，离别去鉴别state与dispatchProps是不是与ownProps相干。以鉴别是不是须要从新运转mapStateToProps和mapDispatchToProps。终究将mergeProps运转的值缓存并通报给被包裹的组件。
function handleNewState() {
const nextStateProps = mapStateToProps(state, ownProps)
const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps)
stateProps = nextStateProps
if (statePropsChanged)
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
return mergedProps
} handleNewState用来天生新的state。依据是不是state变化，挑选性是不是实行mergeProps，终究返回mergedProps给被包裹组件。
到如今为止，实在我们已晓得了selectorFactory是与pure值挂钩的。假如pure为true的话，selectorFactory返回的selector会对state和props等值都邑缓存，然后会依据详细的场景，尽量使得传入被包裹组件的值修改起码(即尽量返回雷同的值)，其目标就是削减不必要的衬着。当pure为false值，不会做任何的缓存。
mapStateToProps劈头
看完了selectorFactory，我们须要去相识一下mapStateToProps是怎样来的:
//connect.js
// initMapStateToProps会被传入 selectorFactory
const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
//selectorFactory.js
const mapStateToProps = initMapStateToProps(dispatch, options)
//mapStateToProps的运用(注重这里的mapStateToProps不是传入的函数，而是init函数天生的函数):
const stateProps = mapStateToProps(state, ownProps) 我们能够看到，起首在connect.js中经由过程match函数取天生initMapStateToProps。然后在selectorFactory中，天生了mapStateToProps的函数，然后会在selector函数中运用mapStateToProps天生了stateProps，末了将stateProps通报给被包裹的组件。
起首看match函数的定义:
function match(arg, factories, name) {
for (let i = factories.length - 1; i >= 0; i--) {
const result = factories[i](arg)
if (result) return result
}
return (dispatch, options) => {
throw new Error(`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${options.wrappedComponentName}.`)
}
} 接下来的内容相对来讲会比较复杂，我们先提早梳理一下match函数的运作，个中factories是一个数组，它的实参将会是类似于mapStateToPropsFactories(数组)等值，然后args将是你自定义的mapStateToProps函数等值(比方mapStateToDispatch)。我们将会以args作为参数从后到前实行factories数组中的每一个函数，找到第一个返回不为假(类似于undefined)的函数而且我们能够保证这个函数返回的是另一个函数，其署名类似于:
(dispatch,options)=>{
//....
return ()=>{
}
}这个返回的函数接收dispatch和其他选项options作为参数，终究返回一个函数供selector运用的函数 ，比方mapStateToPropsFactories一定会返回一个类似与于下面的函数:
(state, ownProps) =>{
//......
//return plain object
}这个函数将用来盘算新的state通报给被包裹的组件。
关于mapStateToProps的泉源要追溯到:
const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
在函数match中第一个实参是你传入connect的mapStateToProps。第二个实参mapStateToPropsFactories的定义以下:
const mapStateToPropsFactories = [
whenMapStateToPropsIsFunction,
whenMapStateToPropsIsMissing
];
function whenMapStateToPropsIsFunction(mapStateToProps) {
return (typeof mapStateToProps === 'function')
? wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps')
: undefined
}
function whenMapStateToPropsIsMissing(mapStateToProps) {
return (!mapStateToProps)
? wrapMapToPropsConstant(() => ({}))
: undefined
} 上面的代码都不难，起首推断传入的mapStateToProps是不是是类似于null，假如是实行whenMapStateToPropsIsMissing不然去实行whenMapStateToPropsIsFunction。关于whenMapStateToPropsIsMissing来讲，重要的是whenMapStateToPropsIsMissing的定义:
function wrapMapToPropsConstant(getConstant) {
return function initConstantSelector(dispatch, options) {
const constant = getConstant(dispatch, options)
function constantSelector() { return constant }
constantSelector.dependsOnOwnProps = false
return constantSelector
}
} wrapMapToPropsConstant函数接收的参数是一个函数，这个函数担任在selector返回一个常量作为props返回给被包裹组件。由于返回的老是一个常量，所以dependsOnOwnProps为false,示意返回给被包裹组件的值与衔接到store的高阶组件接收到的props无关。
那末whenMapStateToPropsIsMissing函数挪用wrapMapToPropsConstant的参数是一个空函数(()=>{})，那就申明在mapStateToProps值为空(null)的时刻，是不给被包裹组件通报任何的属性的。
whenMapStateToPropsIsFunction的状况会比较复杂，假如传入的mapStateToProps是一个函数，那末就会挪用wrapMapToPropsFunc:
function wrapMapToPropsFunc(mapToProps, methodName) {
return function initProxySelector(dispatch, { displayName }) {
const proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
return proxy.dependsOnOwnProps
? proxy.mapToProps(stateOrDispatch, ownProps)
: proxy.mapToProps(stateOrDispatch)
}
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
}
} wrapMapToPropsFunc的函数相对来讲比较复杂，接收的参数是你传入的mapStateToProps函数(methodName的作用只是毛病提醒)，返回的是初始化selector函数(initProxySelector)。当运用initProxySelector初始化selector的时刻，返回的函数proxy实则为一个代办(proxy)。第一次实行proxy(selector)时，dependsOnOwnProps的值为true,所以相当于实行proxy.mapToProps(stateOrDispatch, ownProps)(detectFactoryAndVerify)，然后将proxy.mapToProps属性设置为你所传入的mapStateToProps函数。这时刻再去实行getDependsOnOwnProps的目标是去肯定你传入的mapStateToProps是不是须要传入props。然后再去实行proxy(stateOrDispatch, ownProps),这时刻proxy.mapToProps已不是之前的detectFactoryAndVerify而是你传入的mapStateToProps(所以不会涌现死循环)。实行的效果就是mapStateToProps运转后的效果。假如prop是对象，将会直接通报给被包裹组件。然则我们之前讲过，mapStateToProps是能够返回一个函数的，假如返回的值为一个函数，这个函数将会被作为proxy的mapStateToProps，再次去实行proxy。
mapDispatchToProps劈头
再去相识一下mapStateToProps的泉源:
//connect.js
const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')//selectFactory
const mapDispatchToProps = initMapDispatchToProps(dispatch, options)
//运用:
const dispatchProps = mapDispatchToProps(dispatch, ownProps) 实在mapDispatchToProps是和mapStateToProps的泉源异常类似，照理看mapDispatchToPropsFactories:
const mapDispatchToPropsFactories = [
whenMapDispatchToPropsIsFunction,
whenMapDispatchToPropsIsMissing,
whenMapDispatchToPropsIsObject
]
function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
return (typeof mapDispatchToProps === 'function')
? wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps')
: undefined
}
function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
return (!mapDispatchToProps)
? wrapMapToPropsConstant(dispatch => ({ dispatch }))
: undefined
}
function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps, dispatch))
: undefined
} 假如你已看懂了wrapMapToPropsConstant和wrapMapToPropsFunc的函数的话，mapDispatchToPropsFactories也就不难了。假如传入的mapStateToProps的值是一个对象的话，会挪用whenMapDispatchToPropsIsObject。继而挪用了wrapMapToPropsConstant并传入的参数是函数:dispatch => bindActionCreators(mapDispatchToProps, dispatch)。依据我们之前履历，那末通报给被包裹的组件的属性将是:bindActionCreators(mapDispatchToProps, dispatch)的运转效果，即被dispatch包裹的action。
假如没有传入mapDispatchToProps函数的话，挪用whenMapDispatchToPropsIsMissing。传入函数wrapMapToPropsConstant的参数为：dispatch => ({ dispatch }),那末被包裹的组件接收的参数等于store的dispatch要领。
假如传入的mapDispatchToProps是一个函数，挪用whenMapDispatchToPropsIsFunction函数。从而挪用wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps')。运转的道理与运转wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps')基础雷同，能够参照之前。
mergeProps劈头
//connect.js
const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')//selectorFactory
const mergeProps = initMergeProps(dispatch, options)
//运用
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
照样先看一下mergePropsFactories是怎样定义的:
const mergePropsFactories = [
whenMergePropsIsFunction,
whenMergePropsIsOmitted
]
function whenMergePropsIsFunction(mergeProps) {
return (typeof mergeProps === 'function')
? wrapMergePropsFunc(mergeProps)
: undefined
}
function whenMergePropsIsOmitted(mergeProps) {
return (!mergeProps)
? () => defaultMergeProps
: undefined
} 假如你没有传入mapStateToProps函数，那末挪用函数whenMergePropsIsOmitted()。到末了margedProps函数等于defaultMergeProps,defaultMergeProps的定义为:
function defaultMergeProps(stateProps, dispatchProps, ownProps) {
return { ...ownProps, ...stateProps, ...dispatchProps }
} 假如你传入了mapStateToProps函数，挪用函数whenMergePropsIsFunction()，挪用了wrapMergePropsFunc(mergeProps)，个中参数mergeProps等于你所传入的mergeProps:
function wrapMergePropsFunc(mergeProps) {
return function initMergePropsProxy(dispatch, { displayName, pure, areMergedPropsEqual }) {
let hasRunOnce = false
let mergedProps
return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
const nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps)
if (hasRunOnce) {
if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps))
mergedProps = nextMergedProps
} else {
hasRunOnce = true
mergedProps = nextMergedProps
if (process.env.NODE_ENV !== 'production')
verifyPlainObject(mergedProps, displayName, 'mergeProps')
}
return mergedProps
}
}
} wrapMergePropsFunc中涉及到机能优化，起首wrapMergePropsFunc返回一个初始mergeProps的函数(mergePropsProxy)。函数mergePropsProxy闭包一个变量hasRunOnce来纪录mergeProps运转次数，在mergeProps第一次运转时，会保留第一次传入被包裹组件的的props,再今后的运转过程当中,假如你传入的参数pure为true而且前后的mergedProps值不同时(比较函数你能够自定义)才会传入新的属性，不然将传入之前的缓存值，以此来优化不必要的衬着。
到此为止，我们基础已在代码层面讲完了connect函数的道理，文章很长，有的处所能够相对比较难明白，发起人人都能够去从团体上看看react-redux的源码。react-redux源码解读系列接下来会以其他的角度去剖析react-redux，迎接人人继承关注。
