CODEWITHSUNDEEP
reactjsreduxnormalizr
tito
tito

Reputation: 149

Displaying normalized data in the react UI component

Let' say we have normalized object like this one in redux store.

{
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]
}

I want to display for each plan exercise details in the UI component. Something like.

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

Do I have to denormalize again ? How do I transform data and where ? Do I use connectStateToProps to do something like

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

or is there another way ?

Upvotes: 2

Views: 1559

Answers (1)

WTK
WTK

Reputation: 16971

Yup, you have to denormalize before displaying. For example if you have list of active users stored as denormalized list of user ids, you have to map through those and for each fetch respective object from the state tree.

Yes, probably do this in mapStateToProps.

Sort-of recommended approach is to use a function of (state) => data that will read whatever is needed from state and form a final structure that will be provided to your component.

It's common to use https://github.com/reactjs/reselect for this purpose as it will also memoize output of your selectors for better performance. Note that just like most things in redux, it isn't magic, and you can absolutely go without it. Especially if you're just toying with the framework for now.

Upvotes: 5

Related Questions