Блог

Допустим, у нас есть нормализованный объект, подобный этому, в хранилище 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]
}
 

Я хочу отобразить для каждого плана детали упражнения в компоненте пользовательского интерфейса. Что-то вроде.

 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
 

или есть другой способ?

Да, вы должны денормализовать перед отображением. Например, если у вас есть список активных пользователей, хранящихся в виде денормализованного списка идентификаторов пользователей, вам необходимо сопоставить их и для каждого извлечь соответствующий объект из дерева состояний.

Да, вероятно, сделайте это в mapStateToProps.

Рекомендуемый подход заключается в использовании функции (state) => data, которая будет считывать все необходимое из состояния и формировать окончательную структуру, которая будет предоставлена вашему компоненту.

Обычно используется https://github.com/reactjs/reselect для этой цели, поскольку он также будет запоминать выходные данные ваших селекторов для повышения производительности. Обратите внимание, что, как и большинство вещей в redux, это не волшебство, и вы можете обойтись без него. Особенно, если вы пока просто играете с фреймворком.