CODEWITHSUNDEEP
reactjsreduxnormalizr
Raif
Raif

Reputation: 9249

Denormalized entities after normalizr in redux

I see lots of info on normalizing your store in redux. But what do you do when you want to then display data from a graph?

My data looks like this 

{ courses: [{ chapters: [{ assignments: [{ ...blah }] }] }] }

Each entity has data.

I want to display that data on a page but all my data is normaliz'd. Furthermore, I'd like to have a container component for all three entities.

This seems very hard to do in redux both with and without normalizing. There must be a recommended way of dealing with it.

Upvotes: 2

Views: 2448

Answers (2)

horyd
horyd

Reputation: 1364

The way I got around this was to run the object that I wanted from the Redux state through a denormalizing function. I did this within the mapStateToProps function that I then passed into connect.

If you do this at the container level then you can pick and choose what parts of the fully denormalized object to then send to other components through their props (so without using connect, there's no real benefit from denormalizing again).

For the denormalizer function you could use the denormalizr library. But if you look at the source code the actual function isn't too large, it can probably be modified to suit your needs and hook right into the Redux state directly, for example.

Upvotes: 1

mladen107
mladen107

Reputation: 111

You can make container that accepts Id of data that you need. Container 'connect's component with store. Then component creates containers for that connect children with store and so on..

To get data from store by ids u can check: Javascript Redux - how to get an element from store by id

To reduce boilerplate you can connect component in same module as they did with three view example:

https://github.com/reactjs/redux/tree/master/examples/tree-view

Obviously your components will not be that dumb anymore (except leafs components).

Check this example too: At what nesting level should components read entities from Stores in Flux?

Upvotes: 1

Related Questions