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

Question

我有点犹豫是否要提出这些问题，因为我不知道要分享哪些细节来帮助获得答案。问题是这样的:

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

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

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

我显然不想做#2，所以希望有人能提出问题可能是什么。

Answer 1

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

Redux 是一个独立于 React 的独立库。 Redux 通过使用全局状态来帮助您管理应用程序的状态，您的任何 React 组件都可以使用 connect(mapStateToProps)(MyComponent) 访问该状态。 。当你 connect()一个组件，它会创建一个包装器 React 组件(就像您选择的 <Connect(Page)> 组件一样，它负责连接到 Redux 存储并作为 props 传递到您的 <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()在控制台中。