在Redux中,我可以轻松地订阅存储更改
store.subscribe(() => my handler goes here)
但是如果我的商店充满了不同的对象,并且在我的应用程序中的特定地方,我想订阅仅在商店中的特定对象中进行的更改？
当直接使用订阅时,无法订阅部分商店,但是Redux的创建者自己说 –
don’t use
原文链接：https://www.f2er.com/react/301167.htmlsubscribe directly!为了使Redux应用程序的数据流真正工作,您将需要一个包装整个应用程序的组件.该组件将订阅您的商店.其余的组件将是这个包装器组件的子代,并且只能获得它们所需状态的部分.
如果您正在使用Redux with React,那么有一个好消息 – 官方react-redux包为您照顾！它提供了包装器组件,称为< Provider /> ;.然后,您将至少有一个“智能组件”可以侦听来自商店的提供者传递的状态更改.你可以指定哪个州的哪个部分应该听,而这些状态将作为道具传递给该组件(然后当然可以将它们传递给自己的孩子).您可以通过在“智能”组件上使用connect()功能并使用mapStateToProps功能作为第一个参数来指定.总结：
使用提供程序组件包装订阅存储更改的根组件
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,document.getElementById('root')
)
现在,任何< App />用connect()包装将是一个“智能”组件.您可以传递mapStateToProps来选择状态的某些部分,并将其作为道具.
const mapStateToProps = (state) => {
return {
somethingFromStore: state.somethingFromStore
}
}
class ChildOfApp extends Component {
render() {
return <div>{this.props.somethingFromStore}</div>
}
}
//wrap App in connect and pass in mapStateToProps
export default connect(mapStateToProps)(ChildOfApp)
显然< App />可以有很多孩子,您可以选择并选择mapStateToProps为其每个孩子应该收听的状态的哪些部分.我建议您在usage with React阅读文档,以更好地了解此流程.
