Question

让我们说在redux商店中我们已经像这样规范化了对象。

{
entities: {
  plans: {
    1: {title: 'A', exercises: [1, 2, 3]},
    2: {title: 'B', exercises: [5, 6]}
  },
  exercises: {
    1: {title: 'exe1'},
    2: {title: 'exe2'},
    3: {title: 'exe3'}
    5: {title: 'exe5'}
    6: {title: 'exe6'}
 }
},
currentPlans: [1, 2]
}

我想在UI组件中显示每个计划练习详细信息。像。的东西。

plan 1
title A
  exercises
   exercise 1
   title: 'exe1'
   exercise 2
   title: 'exe2'
   ..........
plan 2
title B
 exercises
  exercise 5
  title: 'exe5'
  ........

我是否必须再次归一化？我如何转换数据？我是否使用connectStateToProps来执行类似

的操作

 plans: some mapping function that will create nested plans->exercise array

还是有另一种方式吗？

Answer 1

是的，你必须在显示前进行非规范化。例如，如果您将活动用户列表存储为用户ID的非规范化列表，则必须映射这些用户ID以及每个从状态树获取相应对象。

是的，可能在mapStateToProps中这样做。

推荐的排序方法是使用（state）=＆gt;的函数。数据将从状态读取所需的内容，并形成将提供给组件的最终结构。

为此目的使用https://github.com/reactjs/reselect是很常见的，因为它还会记住选择器的输出以获得更好的性能。请注意，就像redux中的大多数东西一样，它并不神奇，你绝对可以不使用它。特别是如果你现在只是玩弄框架。

在react UI组件中显示规范化数据

1 个答案: