Documentation request: Working with normalized data in React+Redux, "denormalizing" data best practices

The documentation for redux and redux+react is really really great but I am really missing one thing that has confused me for a while.

When working with a flat/normalized state shape it’s a bit unclear for me when the best time is to “denormalize” the data, that is lookup the real data/entities so I can pass it to my component or it’s child components.

Let’s make an example, we have built a book recommendation app/webpage.

const state = {

    bookLists: {
        0: {
            title: "Great fantasy books",
            books: [0, 1]
        },
        1: {
            title: "Best Sci-Fi of the year",
            books: [2]
        }
    }
    books: {
        0: {
            author: "J.R.R Tolkien",
            title: "Lord of the rings"
        },
        // And so on...
    }
}

Now let’s imagine we want to render all book lists and their corresponding books on the same page. Our component hierarchy would probably be something like:

<BookPage>
    <BookList>
        <Book />
        <Book />
        <Book />
   </BookList>
   <BookList>
        <Book />
        <Book />
        <Book />
    </BookList>
    ...
</BookPage>

Questions + answers I wish we could update the documentation with (or discuss here):

Each book needs to be resolved from the ids of the booklist. Where would this be done? Options I can think of:

• In the mapStateToProps for the BookList by doing a .map for each book id?
• By passing the book ids to the child Book components and have them use connect to get the information from the state?
• Another better option?

Each of the suggested options have some problems:

• In the first option (mapStateToProps and .map from ids) each BookList will be re-rendered when the state is changed since the mapping between id and book objects would create a new array of books which when passed to a BookList would cause a shallow comparion to fail causing a re-render.

• Using the second option instead (passing ids to child components) shallow comparison would work better but feels “wrong”. Should a component really receive only an id? It feels hard to re-use and test them that way?

How would you handle this? I would love some guidance!

[OliverJAsh]

@johot

In the first option (mapStateToProps and .map from ids) each BookList will be re-rendered when the state is changed since the mapping between id and book objects would create a new array of books which when passed to a BookList would cause a shallow comparion to fail causing a re-render.

In that scenario, wouldn’t the book objects inside the new books array have the same reference? In that case, BookList would pass a shallow equal comparison for the books array prop? Furthermore, Book would receive the same reference book objects as props, so that too would pass a shallow equal comparison for the book object prop.

[markerikson]

@bonusrk : anything with a “documentation” tag in either repo is available to be worked on.