Skip to content

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

Closed
@johot

Description

@johot

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions