Redux how to use createEntityAdapter on a nested property?

Question

I am creating an app with React/Redux and I am new to using both React and Redux. I'm stuck trying to figure out how to structure the redux store. Here is a brief description of what I am trying to achieve, generalized using the book example as in the redux createEntityAdapter docs

I have a page with a list of books. The user can click one or many books and for each book a list is displayed of the chapters. New or missing chapters can be added anytime as they become available on the server. The added chapters need to be added to the list in the correct position.

• Book 1
  • Chapter 1
  • Chapter 2
  • Chapter 3
  • Chapter 6
• Book 2
• Book 3

The book list is a component, and the chapters list is another component, but since there are many books, there will be many instances of the chapter list component. Each component has its own slice.

The store looks like:

bookList : [ Book1, Book2, Book3, ...]
ChapterList: { 
  Book1 : {
    chapters: [
      { 
         Chapter : 'Chapter1',
         info: 'Chapter info',
         other: 'more stuff'
      },
      { 
         Chapter : 'Chapter2',
         info: 'Chapter info',
         other: 'more stuff'
      },
      {...}
    ],
    bookInfo: 'info about book'
  },
  Book2 : { ... },
  Book3 : { ... }
}

The problem is that chapter info is being streamed and thus is updated continuously and missing chapters can arrive at any time. As a result I would need to sort the chapters array each time new data arrives, whereas the array is not very long, in the order of 50 elements, new data arrives a few times per second.

I intended to use createEntityAdapter to normalize the chapters array, but I don't see how this is possible given that it is nested in the Book# property and the Book# property is needed because I'm using multiple instances of the ChapterList component.

const ChapterListAdapter = createEntityAdapter({
  // where bookNum needs to Book1, Book2, Book3 etc... 
  selectId: (chapterList) => chapterList[bookNum].chapters,

  sortComparer: (a, b) => a.chapters.localeCompare(b.chapters
}) 

How do I solve this? Modify the store? Is there a way to flatten chapterList such that chapters is at the top level? Do I write my own normalizing/sorting logic into the the reducer?

Answer 1

Is there a way to flatten chapterList such that chapters is at the top level? Do I write my own normalizing/sorting logic into the the reducer?

You can check out the Redux guides on Normalizing State Shape as a starting point.

You have two entities here: "books" and "chapters". There is a relationship between them: each chapter belongs to a book and each book contains an ordered list of chapters. You want two entity adapters. You can use one slice or two -- it's probably easier with two but it doesn't matter.

You normalized state shape should look like this:

{
  books: {
    ids: [1, 2, 3],
    entities: {
      1: {
        id: 1,
        title: "Book 1",
        bookInfo: 'info about book',
        chapterIds: [75, 962, 64], // an ordered array of chapters
      },
      2: { /* ... */ },
      3: { /* ... */ }
    }
  },
  chapters: {
    ids: [64, 75, 962],
    entities: {
      64: {
        id: 64,
        name: "Some Chapter Title",
        info: "",
        other: "",
        bookId: 1 // the id of the book that this chapter belongs to
      },
      75: { /* ... */ },
      962:  { /* ... */ }
    }
  }
}

In TypeScript terms:

import { EntityState, EntityId } from "@reduxjs/toolkit";

export interface Book {
  id: EntityId;
  title: string;
  bookInfo: string;
  chapterIds: EntityId[];
}

export interface Chapter {
  id: EntityId;
  name: string;
  info: string,
  other: string;
  bookId: EntityId;
}

interface State {
  books: EntityState<Book>;
  chapters: EntityState<Chapter>;
}

---

It's hard for me to write your reducers without knowing what shape the data is in when it comes from the server. Based on what you've said about the chapters coming in one by one, it sounds like it's already normalized?

---

It's easier for me to write the components. We have selectors that select the complete entity object from just the id:

const bookAdapter = createEntityAdapter<Book>();

const chapterAdapter = createEntityAdapter<Chapter>();

export const {
  selectIds: selectBookIds,
  selectById: selectBookById
} = bookAdapter.getSelectors((state: State) => state.books);

export const { 
  selectById: selectChapterById
} = chapterAdapter.getSelectors((state: State) => state.chapters);

So the only prop that each component needs is the id:

const Chapter = ({ id }: { id: EntityId }) => {
  const chapter = useSelector((state) => selectChapterById(state, id));

  // probably some hook here to request the chapter if not loaded
  // dispatch an async thunk inside of a useEffect

  if (!chapter) {
    return <Loading />;
  }

  return (
    <div>
      <h3>{chapter.name}</h3>
      <p>{chapter.info}</p>
    </div>
  );
};

const Book = ({ id }: { id: EntityId }) => {
  const book = useSelector((state) => selectBookById(state, id));

  // probably some hook here to request the book if not loaded
  // dispatch an async thunk inside of a useEffect

  if (!book) {
    return <Loading />;
  }

  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.bookInfo}</p>
      <h2>Chapters</h2>
      <ul>
        {book.chapterIds.map((chapterId) => (
          <li key={chapterId}>
            <Chapter id={chapterId} />
          </li>
        ))}
      </ul>
    </div>
  );
};

You can check out this answer for more info on how you can request entities from the API only if they haven't already been loaded.