在 react UI 组件中显示标准化数据

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 列表，则必须通过这些列表进行映射，并为每个从状态树中获取相应的对象。

是的，可能在 mapStateToProps 中执行此操作。

某种推荐的方法是使用 (state) => data 的函数，该函数将从状态中读取所需的任何内容，并形成将提供给您的组件的最终结构。

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

在 react UI 组件中显示标准化数据

Displaying normalized data in the react UI component

reactjs

redux

normalizr