[英]How can I combine 2 uses of connect()?
I am calling connect()
twice on my component and a code reviewer asked me to make it to one. 我在组件上两次调用了
connect()
,并且代码审查员要求我将其设置为一个。
I have this which works as expected: 我有这个按预期工作:
export default compose(
connect(store => ({
softlayerAccountId: store.global.softlayerAccountId,
})),
connect(
({ shipments }) => ({
pagination: shipments.pagination,
isFiltersModalOpened: shipments.filtersModalOpened,
filters: shipments.filters,
}),
dispatch => ({...}),
),
)(GetShipments);
And they want me to do something like this: 他们希望我做这样的事情:
export default compose(
connect(
store => ({
softlayerAccountId: store.global.softlayerAccountId,
}),
({ shipments }) => ({
pagination: shipments.pagination,
isFiltersModalOpened: shipments.filtersModalOpened,
filters: shipments.filters,
}),
dispatch => ({...}),
),
)(GetShipments);
But I get this error: 但是我得到这个错误:
Uncaught TypeError: Cannot read property 'pagination' of undefined
未捕获的TypeError:无法读取未定义的属性“分页”
Or this: 或这个:
export default compose(
connect(
({ shipments }, store) => ({
softlayerAccountId: store.global.softlayerAccountId,
pagination: shipments.pagination,
isFiltersModalOpened: shipments.filtersModalOpened,
filters: shipments.filters,
}),
dispatch => ({...}),
),
)(GetShipments);
But I get this: 但是我得到这个:
Uncaught TypeError: Cannot read property 'softlayerAccountId' of undefined
未捕获的TypeError:无法读取未定义的属性'softlayerAccountId'
Any ideas? 有任何想法吗?
you are making it wrong. 你做错了。
connect()
takes two arguments: mapStateToProps
callback and mapDispatchToProps
. connect()
有两个参数: mapStateToProps
回调和mapDispatchToProps
。 In you second variant your are trying to pass 3 arguments where 2nd actually also refers to store(so it's like you put mapStateToProps
onto mapDispatchToProps
place). 在您的第二个变体中,您尝试传递3个参数,其中第二个实际上也指向store(因此,就像您将
mapStateToProps
到mapDispatchToProps
位置)。
You need it to have 2 arguments: 您需要它具有2个参数:
export default compose(
connect(
({global: {softlayerAccountId}, shipments }) => ({
softlayerAccountId: store.global.softlayerAccountId,
pagination: shipments.pagination,
isFiltersModalOpened: shipments.filtersModalOpened,
filters: shipments.filters,
}),
dispatch => ({...}),
)(GetShipments);
Why 3rd variant does not work? 为什么第三个变体不起作用? The same reason: you are trying to put arguments where there are cannot work.
相同的原因:您试图将参数放在无法工作的地方。
({ shipments }, store) => ({
Here you declare function that takes two arguments. 在这里,您声明带有两个参数的函数。 First is destructuring and second is just passed in. But
connect
will pass just single argument of store
. 首先是解构,其次才传入。但是
connect
将仅传递store
单个参数。 It will not pass store
for several times just because you expect that. 它不会仅因为您期望而多次通过
store
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.