Skip to content

Commit adc805a

Browse files
gaearongaearon
committed
Merge pull request #279 from tgriesser/mapStateToFactory
Overloading connect with factory
2 parents 89645d6 + 1da657e commit adc805a

File tree

2 files changed

+210
-44
lines changed

2 files changed

+210
-44
lines changed

‎src/components/connect.js

Lines changed: 79 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,58 @@ 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+
86+
const state = store.getState()
87+
const stateProps = this.doStatePropsDependOnOwnProps ?
88+
this.finalMapStateToProps(state, props) :
89+
this.finalMapStateToProps(state)
90+
91+
return checkStateShape(stateProps)
92+
}
93+
94+
configureFinalMapState(store, props) {
95+
const mappedState = mapState(store.getState(), props)
96+
const isFactory = typeof mappedState === 'function'
97+
98+
this.finalMapStateToProps = isFactory ? mappedState : mapState
99+
this.doStatePropsDependOnOwnProps = this.finalMapStateToProps.length !== 1
100+
101+
return isFactory ?
102+
this.computeStateProps(store, props) :
103+
checkStateShape(mappedState)
104+
}
105+
106+
computeDispatchProps(store, props) {
107+
if (!this.finalMapDispatchToProps) {
108+
return this.configureFinalMapDispatch(store, props)
109+
}
110+
111+
const { dispatch } = store
112+
const dispatchProps = this.doDispatchPropsDependOnOwnProps ?
113+
this.finalMapDispatchToProps(dispatch, props) :
114+
this.finalMapDispatchToProps(dispatch)
115+
116+
return checkStateShape(dispatchProps, true)
117+
}
118+
119+
configureFinalMapDispatch(store, props) {
120+
const mappedDispatch = mapDispatch(store.dispatch, props)
121+
const isFactory = typeof mappedDispatch === 'function'
122+
123+
this.finalMapDispatchToProps = isFactory ? mappedDispatch : mapDispatch
124+
this.doDispatchPropsDependOnOwnProps = this.finalMapDispatchToProps.length !== 1
125+
126+
return isFactory ?
127+
this.computeDispatchProps(store, props) :
128+
checkStateShape(mappedDispatch, true)
129+
}
130+
99131
updateStatePropsIfNeeded() {
100-
const nextStateProps = computeStateProps(this.store, this.props)
132+
const nextStateProps = this.computeStateProps(this.store, this.props)
101133
if (this.stateProps && shallowEqual(nextStateProps, this.stateProps)) {
102134
return false
103135
}
@@ -107,7 +139,7 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
107139
}
108140

109141
updateDispatchPropsIfNeeded() {
110-
const nextDispatchProps = computeDispatchProps(this.store, this.props)
142+
const nextDispatchProps = this.computeDispatchProps(this.store, this.props)
111143
if (this.dispatchProps && shallowEqual(nextDispatchProps, this.dispatchProps)) {
112144
return false
113145
}
@@ -116,12 +148,14 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
116148
return true
117149
}
118150

119-
updateMergedProps() {
120-
this.mergedProps = computeMergedProps(
121-
this.stateProps,
122-
this.dispatchProps,
123-
this.props
124-
)
151+
updateMergedPropsIfNeeded() {
152+
const nextMergedProps = computeMergedProps(this.stateProps, this.dispatchProps, this.props)
153+
if (this.mergedProps && checkMergedEquals && shallowEqual(nextMergedProps, this.mergedProps)) {
154+
return false
155+
}
156+
157+
this.mergedProps = nextMergedProps
158+
return true
125159
}
126160

127161
isSubscribed() {
@@ -164,6 +198,8 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
164198
this.haveOwnPropsChanged = true
165199
this.hasStoreStateChanged = true
166200
this.renderedElement = null
201+
this.finalMapDispatchToProps = null
202+
this.finalMapStateToProps = null
167203
}
168204

169205
handleChange() {
@@ -203,10 +239,10 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
203239
let shouldUpdateDispatchProps = true
204240
if (pure && renderedElement) {
205241
shouldUpdateStateProps = hasStoreStateChanged || (
206-
haveOwnPropsChanged && doStatePropsDependOnOwnProps
242+
haveOwnPropsChanged && this.doStatePropsDependOnOwnProps
207243
)
208244
shouldUpdateDispatchProps =
209-
haveOwnPropsChanged && doDispatchPropsDependOnOwnProps
245+
haveOwnPropsChanged && this.doDispatchPropsDependOnOwnProps
210246
}
211247

212248
let haveStatePropsChanged = false
@@ -224,7 +260,7 @@ export default function connect(mapStateToProps, mapDispatchToProps, mergeProps,
224260
haveDispatchPropsChanged ||
225261
haveOwnPropsChanged
226262
) {
227-
this.updateMergedProps()
263+
haveMergedPropsChanged = this.updateMergedPropsIfNeeded()
228264
} else {
229265
haveMergedPropsChanged = false
230266
}

‎test/components/connect.spec.js

Lines changed: 131 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('React', () => {
3939
@connect()
4040
class Container extends Component {
4141
render() {
42-
return <div {...this.props} />
42+
return <Passthrough {...this.props} />
4343
}
4444
}
4545

@@ -1509,5 +1509,135 @@ 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 <Passthrough {...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+
1615+
it('should not call update if mergeProps return value has not changed', () => {
1616+
let mapStateCalls = 0
1617+
let renderCalls = 0
1618+
const store = createStore(stringBuilder)
1619+
1620+
@connect(() => ({ a: ++mapStateCalls }), null, () => ({ changed: false }))
1621+
class Container extends Component {
1622+
render() {
1623+
renderCalls++
1624+
return <Passthrough {...this.props} />
1625+
}
1626+
}
1627+
1628+
TestUtils.renderIntoDocument(
1629+
<ProviderMock store={store}>
1630+
<Container />
1631+
</ProviderMock>
1632+
)
1633+
1634+
expect(renderCalls).toBe(1)
1635+
expect(mapStateCalls).toBe(1)
1636+
1637+
store.dispatch({ type: 'APPEND', body: 'a' })
1638+
1639+
expect(mapStateCalls).toBe(2)
1640+
expect(renderCalls).toBe(1)
1641+
})
15121642
})
15131643
})

0 commit comments

Comments
 (0)