在redux中normalizr之后的非规范化实体

问题描述 投票:2回答:2

我看到有关在redux中规范化商店的大量信息。但是,当您想要从图表中显示数据时,您会怎么做?

我的数据看起来像这样

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

每个实体都有数据。

我想在页面上显示该数据,但我的所有数据都已标准化。此外,我想为所有三个实体提供容器组件。

无论是否正常化,这在redux中都很难做到。必须有一种推荐的处理方式。

reactjs redux normalizr
2个回答
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?


1
投票

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

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

对于denormalizer函数,您可以使用denormalizr库。但是,如果你看一下source code实际函数不是太大,它可能会被修改以满足你的需要,并直接挂接到Redux状态,例如。

© www.soinside.com 2019 - 2024. All rights reserved.