我看到有关在redux中规范化商店的大量信息。但是,当您想要从图表中显示数据时,您会怎么做?
我的数据看起来像这样
{ courses: [{ chapters: [{ assignments: [{ ...blah }] }] }] }
每个实体都有数据。
我想在页面上显示该数据,但我的所有数据都是标准化的。此外,我希望所有三个实体都有一个容器组件。
在使用和不使用标准化时,在redux中这似乎很难做到。必须有一种推荐的处理方式。
答案 0 :(得分: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 :(得分:1)
我解决这个问题的方法是通过非规范化函数从Redux状态运行我想要的对象。我在mapStateToProps
函数中执行了此操作,然后将其传递到connect
。
如果你在容器级别执行此操作,那么您可以选择完全非规范化对象的哪些部分,然后通过props
发送到其他组件(因此不使用connect
,这是不可能的从再次非规范化中受益)。
对于denormalizer函数,您可以使用denormalizr库。但是如果你看source code实际函数不是太大,它可能会被修改以满足你的需要,并直接挂接到Redux状态,例如。