状态在redux dev工具中显示为空对象

时间:2017-05-13 03:03:30

标签: reactjs react-redux

我有点犹豫要问这些问题,因为我不知道要分享哪些细节来帮助我找到答案。这是问题所在:

应用程序运行正常。所有数据都处于状态,因为我可以在控制台中将其打印出来并在React应用程序中使用它。但是,如下图所示,反应开发工具中显示的状态为“空对象”。对于Chrome& Firefox扩展以及react dev工具的独立版本。对于组件树的每个级别都是如此。

State is 'empty object'

该应用程序是使用create-react-app与通过客户端代理的自定义快速服务器进行的React。在开发中运行。数据来自MongoDB。

我有调试的想法 1)尝试不同版本的相关npm包 2)创建应用程序的精简版/简化版以查看问题是否存在,如果没有,请重新构建以查看它的引入位置。

我显然不想做#2所以希望有人可以提出问题所在。

1 个答案:

答案 0 :(得分:0)

每个React组件都有自己的内部状态,您可以通过this.state.yourPropertyName访问并通过this.setState({yourPropertyName: 'someValue'})进行设置。这个州是React的一部分。如果您想在React组件的状态中传递数据,则必须将其作为props传递给其子组件。

Redux是一个独立于React的独立库。 Redux通过使用可由任何反应组件使用connect(mapStateToProps)(MyComponent)访问的全局状态来帮助您管理应用程序的状态。当您connect()组件时,它会创建一个包装器React组件(就像您选择的组件<Connect(Page)>组件一样,它负责连接到Redux存储并作为道具传递给您的<Page>组件这就是您从组件中访问Redux状态的原因this.props.myProperty

您正在查看的Chrome扩展程序是React-devtools。 state部分指的是React的内部状态。如果您选择<Page>组件,您可能会在props部分下看到Redux商店中的数据。

如果要查看Redux状态,可以使用https://github.com/zalmoxisus/redux-devtools-extension或从React-devtools中选择<Provider>组件并在控制台中键入$r.store.getState()