我如何通过Redux的商店从一个组件到另一个？

Question

我正在尝试将Redux存储中的信息传递给这样的几个表组件：

<Table timelogData={store.getState()} />

当我尝试直接在表组件中进行console.log数据记录时，该组件将呈现并且console.log将起作用

console.log(this.props.timelogData.)

不过，如果我尝试去深入到树，e.g。

console.log(this.props.timelogData.userProfile)

我收到“ TypeError：无法读取未定义的属性'userProfile'” 即使我收到TypeError，console.log也会成功地奇怪地完成。它能够通过控制台来访问它，但阵营不喜欢它。

我如何正确地将Redux存储传递到另一个组件，该组件可以访问树中的数据？

Answer 1

您不会将您的商店传递给您的组件。 您应该使用react-redux提供响应绑定，以将组件连接到Redux存储。通过documentation熟悉概念。

请确保您了解基本概念，例如表示性组件和容器之间的区别，动作创建者，简化器以及如何将状态映射到组件道具。

Answer 2

您需要在组件中利用mapStateToProps，而不要尝试降低商店的负担。

function mapStateToProps(state){
    return {
        nameAsProps: state.username,
    }
}

请参阅：https://medium.com/ovrsea/mapstatetoprops-and-why-you-may-not-need-mapdispatchtoprops-as-a-beginner-dd012a3da5e6

Answer 3

此console.log(this.props.timelogData.userProfile)无效，因为您可能尚未从mapStateToProps添加该属性。假设您已使用Provider（通常在index.js文件中），以回答如何将存储传递到不同的组件

render(
   <Provider store={store}>
       <App/>
   </Provider>,
  document.getElementById('root')
)

只要您connect相关组件，任何组件都会被“钩住”到您的商店状态。

const mapStateToProps = state => ({someRandomProp: state.someValue})
export default connect(mapStateToProps)(ComponentThatNeedsYourStore) 

但是我建议您回去阅读官方文档。