Данный урок базируется на статье https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape официальной документации

Большинство приложений работают с данными, которые имеют вложенную структуру. Например у постов в блоге есть автор и комментарии. У комментариев тоже есть авторы и могут быть лайки.

const blogPosts = [
  {
    id: 'post1',
    author: { username: 'user1', name: 'User 1' },
    body: '......',
    comments: [
      {
        id: 'comment1',
        author: { username: 'user2', name: 'User 2' },
        comment: '.....'
      },
      {
        id: 'comment2',
        author: { username: 'user3', name: 'User 3' },
        comment: '.....'
      }
    ]
  },
];

Работать с такой структурой напрямую тяжело по нескольким причинам:

  • Внутри нее дублируются данные, например, author. Из-за этого резко усложняется обновление.
  • Логика редьюсеров становится тем сложнее, чем больше вложенность

Правильный подход при работе с редаксом - воспринимать редакс как реляционную базу данных. Данные внутри контейнера должны быть нормализованы. При таком взгляде, каждый редьюсер может восприниматься как отдельная таблица в базе данных.

Основные принципы организации данных в контейнере:

  • Каждая сущность хранится в своем редьюсере.
  • Коллекция сущностей одного типа, хранится в виде объекта, где ключи - идентификаторы объектов, а значения - сами объекты.
  • Порядок данных в этом объекте, задается отдельным массивом состоящим только из идентификаторов.
  • Данные ссылаются друг на друга только по идентификаторам
{
    posts : {
        byId : {
            "post1" : {
                id : "post1",
                author : "user1",
                body : "......",
                comments : ["comment1", "comment2"]
            },
            "post2" : {
                id : "post2",
                author : "user2",
                body : "......",
                comments : ["comment3", "comment4", "comment5"]
            }
        },
        allIds : ["post1", "post2"]
    },
    comments : {
        byId : {
            "comment1" : {
                id : "comment1",
                author : "user2",
                comment : ".....",
            },
            "comment2" : {
                id : "comment2",
                author : "user3",
                comment : ".....",
            }
        },
        allIds : ["comment1", "comment2"]
    },
    users : {
        byId : {
            "user1" : {
                username : "user1",
                name : "User 1",
            },
            "user2" : {
                username : "user2",
                name : "User 2",
            },
            "user3" : {
                username : "user3",
                name : "User 3",
            }
        },
        allIds : ["user1", "user2", "user3"]
    }
}

Теперь данные нормализованы. Каждая сущность хранится в своем собственном редьюсере. Объект byId хранит сами сущности, а allIds - идентификаторы. Какие премущества мы получили?

  • Данные не повторяются, а значит достаточно поменять только одно место при их изменении
  • Редьюсеры не имеют вложенности
  • Данные в таком виде легко извлекать и модифицировать

Для продолжения нужно перейти в курс и вступить в него.