Skip to content

Commit 4bb0087

Browse files
tgriessertgriesser
committed
Support factory functions in connect mapToProps args
1 parent 22cf67b commit 4bb0087

File tree

2 files changed

+171
-43
lines changed

2 files changed

+171
-43
lines changed

‎src/components/connect.js

Lines changed: 68 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -18,51 +18,33 @@ function getDisplayName(WrappedComponent) {
1818
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
1919
}
2020

21+
function checkStateShape(stateProps, dispatch) {
22+
invariant(
23+
isPlainObject(stateProps),
24+
'`%sToProps` must return an object. Instead received %s.',
25+
dispatch ? 'mapDispatch' : 'mapState',
26+
stateProps
27+
)
28+
return stateProps
29+
}
30+
2131
// Helps track hot reloading.
2232
let nextVersion = 0
2333

2434
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
2535
const shouldSubscribe = Boolean(mapStateToProps)
26-
const finalMapStateToProps = mapStateToProps || defaultMapStateToProps
27-
const finalMapDispatchToProps = isPlainObject(mapDispatchToProps) ?
36+
const mapState = mapStateToProps || defaultMapStateToProps
37+
const mapDispatch = isPlainObject(mapDispatchToProps) ?
2838
wrapActionCreators(mapDispatchToProps) :
2939
mapDispatchToProps || defaultMapDispatchToProps
40+
3041
const finalMergeProps = mergeProps || defaultMergeProps
31-
const doStatePropsDependOnOwnProps = finalMapStateToProps.length !== 1
32-
const doDispatchPropsDependOnOwnProps = finalMapDispatchToProps.length !== 1
42+
const checkMergedEquals = finalMergeProps !== defaultMergeProps
3343
const { pure = true, withRef = false } = options
3444

3545
// Helps track hot reloading.
3646
const version = nextVersion++
3747

38-
function computeStateProps(store, props) {
39-
const state = store.getState()
40-
const stateProps = doStatePropsDependOnOwnProps ?
41-
finalMapStateToProps(state, props) :
42-
finalMapStateToProps(state)
43-
44-
invariant(
45-
isPlainObject(stateProps),
46-
'`mapStateToProps` must return an object. Instead received %s.',
47-
stateProps
48-
)
49-
return stateProps
50-
}
51-
52-
function computeDispatchProps(store, props) {
53-
const { dispatch } = store
54-
const dispatchProps = doDispatchPropsDependOnOwnProps ?
55-
finalMapDispatchToProps(dispatch, props) :
56-
finalMapDispatchToProps(dispatch)
57-
58-
invariant(
59-
isPlainObject(dispatchProps),
60-
'`mapDispatchToProps` must return an object. Instead received %s.',
61-
dispatchProps
62-
)
63-
return dispatchProps
64-
}
65-
6648
function computeMergedProps(stateProps, dispatchProps, parentProps) {
6749
const mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps)
6850
invariant(
@@ -96,8 +78,47 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
9678
this.clearCache()
9779
}
9880

81+
computeStateProps(store, props) {
82+
if (!this.finalMapStateToProps) {
83+
return this.configureFinalMapState(store, props)
84+
}
85+
const state = store.getState()
86+
const stateProps = this.doStatePropsDependOnOwnProps ?
87+
this.finalMapStateToProps(state, props) :
88+
this.finalMapStateToProps(state)
89+
90+
return checkStateShape(stateProps)
91+
}
92+
93+
configureFinalMapState(store, props) {
94+
const mappedState = mapState(store.getState(), props)
95+
const isFactory = typeof mappedState === 'function'
96+
this.finalMapStateToProps = isFactory ? mappedState : mapState
97+
this.doStatePropsDependOnOwnProps = this.finalMapStateToProps.length !== 1
98+
return isFactory ? this.computeStateProps(store, props) : checkStateShape(mappedState)
99+
}
100+
101+
computeDispatchProps(store, props) {
102+
if (!this.finalMapDispatchToProps) {
103+
return this.configureFinalMapDispatch(store, props)
104+
}
105+
const { dispatch } = store
106+
const dispatchProps = this.doDispatchPropsDependOnOwnProps ?
107+
this.finalMapDispatchToProps(dispatch, props) :
108+
this.finalMapDispatchToProps(dispatch)
109+
return checkStateShape(dispatchProps, true)
110+
}
111+
112+
configureFinalMapDispatch(store, props) {
113+
const mappedDispatch = mapDispatch(store.dispatch, props)
114+
const isFactory = typeof mappedDispatch === 'function'
115+
this.finalMapDispatchToProps = isFactory ? mappedDispatch : mapDispatch
116+
this.doDispatchPropsDependOnOwnProps = this.finalMapDispatchToProps.length !== 1
117+
return isFactory ? this.computeDispatchProps(store, props) : checkStateShape(mappedDispatch, true)
118+
}
119+
99120
updateStatePropsIfNeeded() {
100-
const nextStateProps = computeStateProps(this.store, this.props)
121+
const nextStateProps = this.computeStateProps(this.store, this.props)
101122
if (this.stateProps && shallowEqual(nextStateProps, this.stateProps)) {
102123
return false
103124
}
@@ -107,7 +128,7 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
107128
}
108129

109130
updateDispatchPropsIfNeeded() {
110-
const nextDispatchProps = computeDispatchProps(this.store, this.props)
131+
const nextDispatchProps = this.computeDispatchProps(this.store, this.props)
111132
if (this.dispatchProps && shallowEqual(nextDispatchProps, this.dispatchProps)) {
112133
return false
113134
}
@@ -116,12 +137,14 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
116137
return true
117138
}
118139

119-
updateMergedProps() {
120-
this.mergedProps = computeMergedProps(
121-
this.stateProps,
122-
this.dispatchProps,
123-
this.props
124-
)
140+
updateMergedPropsIfNeeded() {
141+
const nextMergedProps = computeMergedProps(this.stateProps, this.dispatchProps, this.props)
142+
if (this.mergedProps && checkMergedEquals && shallowEqual(nextMergedProps, this.mergedProps)) {
143+
return false
144+
}
145+
146+
this.mergedProps = nextMergedProps
147+
return true
125148
}
126149

127150
isSubscribed() {
@@ -164,6 +187,8 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
164187
this.haveOwnPropsChanged = true
165188
this.hasStoreStateChanged = true
166189
this.renderedElement = null
190+
this.finalMapDispatchToProps = null
191+
this.finalMapStateToProps = null
167192
}
168193

169194
handleChange() {
@@ -203,10 +228,10 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
203228
let shouldUpdateDispatchProps = true
204229
if (pure && renderedElement) {
205230
shouldUpdateStateProps = hasStoreStateChanged || (
206-
haveOwnPropsChanged && doStatePropsDependOnOwnProps
231+
haveOwnPropsChanged && this.doStatePropsDependOnOwnProps
207232
)
208233
shouldUpdateDispatchProps =
209-
haveOwnPropsChanged && doDispatchPropsDependOnOwnProps
234+
haveOwnPropsChanged && this.doDispatchPropsDependOnOwnProps
210235
}
211236

212237
let haveStatePropsChanged = false
@@ -224,7 +249,7 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
224249
haveDispatchPropsChanged ||
225250
haveOwnPropsChanged
226251
) {
227-
this.updateMergedProps()
252+
haveMergedPropsChanged = this.updateMergedPropsIfNeeded()
228253
} else {
229254
haveMergedPropsChanged = false
230255
}

‎test/components/connect.spec.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1509,5 +1509,108 @@ describe('React', () => {
15091509
// But render is not because it did not make any actual changes
15101510
expect(renderCalls).toBe(1)
15111511
})
1512+
1513+
it('should allow providing a factory function to mapStateToProps', () => {
1514+
let updatedCount = 0
1515+
let memoizedReturnCount = 0
1516+
const store = createStore(() => ({ value: 1 }))
1517+
1518+
const mapStateFactory = () => {
1519+
let lastProp, lastVal, lastResult
1520+
return (state, props) => {
1521+
if (props.name === lastProp && lastVal === state.value) {
1522+
memoizedReturnCount++
1523+
return lastResult
1524+
}
1525+
lastProp = props.name
1526+
lastVal = state.value
1527+
return lastResult = { someObject: { prop: props.name, stateVal: state.value } }
1528+
}
1529+
}
1530+
1531+
@connect(mapStateFactory)
1532+
class Container extends Component {
1533+
componentWillUpdate() {
1534+
updatedCount++
1535+
}
1536+
render() {
1537+
return <div {...this.props} />
1538+
}
1539+
}
1540+
1541+
TestUtils.renderIntoDocument(
1542+
<ProviderMock store={store}>
1543+
<div>
1544+
<Container name="a" />
1545+
<Container name="b" />
1546+
</div>
1547+
</ProviderMock>
1548+
)
1549+
1550+
store.dispatch({ type: 'test' })
1551+
expect(updatedCount).toBe(0)
1552+
expect(memoizedReturnCount).toBe(2)
1553+
})
1554+
1555+
it('should allow providing a factory function to mapDispatchToProps', () => {
1556+
let updatedCount = 0
1557+
let memoizedReturnCount = 0
1558+
const store = createStore(() => ({ value: 1 }))
1559+
1560+
const mapDispatchFactory = () => {
1561+
let lastProp, lastResult
1562+
return (dispatch, props) => {
1563+
if (props.name === lastProp) {
1564+
memoizedReturnCount++
1565+
return lastResult
1566+
}
1567+
lastProp = props.name
1568+
return lastResult = { someObject: { dispatchFn: dispatch } }
1569+
}
1570+
}
1571+
function mergeParentDispatch(stateProps, dispatchProps, parentProps) {
1572+
return { ...stateProps, ...dispatchProps, name: parentProps.name }
1573+
}
1574+
1575+
@connect(null, mapDispatchFactory, mergeParentDispatch)
1576+
class Passthrough extends Component {
1577+
componentWillUpdate() {
1578+
updatedCount++
1579+
}
1580+
render() {
1581+
return <div {...this.props} />
1582+
}
1583+
}
1584+
1585+
class Container extends Component {
1586+
constructor(props) {
1587+
super(props)
1588+
this.state = { count: 0 }
1589+
}
1590+
componentDidMount() {
1591+
this.setState({ count: 1 })
1592+
}
1593+
render() {
1594+
const { count } = this.state
1595+
return (
1596+
<div>
1597+
<Passthrough count={count} name="a" />
1598+
<Passthrough count={count} name="b" />
1599+
</div>
1600+
)
1601+
}
1602+
}
1603+
1604+
TestUtils.renderIntoDocument(
1605+
<ProviderMock store={store}>
1606+
<Container />
1607+
</ProviderMock>
1608+
)
1609+
1610+
store.dispatch({ type: 'test' })
1611+
expect(updatedCount).toBe(0)
1612+
expect(memoizedReturnCount).toBe(2)
1613+
})
1614+
15121615
})
15131616
})

0 commit comments

Comments
 (0)