redux 中 normalizr 后的非规范化实体

Posted 2023-02-22

【中文标题】redux 中 normalizr 后的非规范化实体

【英文标题】：Denormalized entities after normalizr in redux

【发布时间】：2016-09-13 16:46:36

【问题描述】：

我看到很多关于在 redux 中规范化你的商店的信息。但是，当您想要显示图表中的数据时，您会怎么做？

我的数据是这样的

 courses: [ chapters: [ assignments: [ ...blah ] ] ] 

每个实体都有数据。

我想在页面上显示该数据，但我的所有数据都是规范化的。此外，我想为所有三个实体创建一个容器组件。

无论有没有规范化，这在 redux 中似乎都很难做到。必须有推荐的处理方法。

【参考方案1】：

您可以制作接受所需数据 ID 的容器。容器“连接”组件与商店。然后组件创建容器用于将子级与商店等连接起来......

要通过 id 从存储中获取数据，您可以检查： javascript Redux - how to get an element from store by id

为了减少样板文件，您可以像使用三视图示例一样将组件连接到同一模块中：

https://github.com/reactjs/redux/tree/master/examples/tree-view

显然，您的组件将不再那么愚蠢（叶子组件除外）。

也检查这个例子： At what nesting level should components read entities from Stores in Flux?

【参考方案2】：

我解决这个问题的方法是通过非规范化函数从 Redux 状态运行我想要的对象。我在 mapStateToProps 函数中执行此操作，然后将其传递给 connect。

如果您在容器级别执行此操作，那么您可以选择完全非规范化对象的哪些部分，然后通过它们的 props 发送到其他组件（因此，如果不使用 connect，再次非规范化并没有真正的好处)。

对于 denormalizer 函数，您可以使用 denormalizr 库。但是如果你看source code 实际函数并不算太大，它可能可以根据你的需要进行修改并直接挂钩到 Redux 状态，例如。