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

Question

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

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

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

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

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

Answer 1

每个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()。