reactjs - redux 中 normalizr 后的非规范化实体

Question

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

我的数据看起来像这样

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

每个实体都有数据。

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

在有和没有规范化的情况下，这在 redux 中似乎都很难做到。必须有一个推荐的方法来处理它。

Answer 1

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

要通过 id 从存储中获取数据，您可以检查： Javascript Redux - 如何通过 id 从存储中获取元素

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

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

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

也检查这个例子： 组件应该在什么嵌套级别从 Flux 中的 Stores 读取实体？

Answer 2

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

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

对于 denormalizer 函数，您可以使用 denormalizr 库。但是，如果您查看源代码，实际功能并不太大，可能可以对其进行修改以满足您的需求并直接挂钩到 Redux 状态，例如。