Блог

Главная - Вопросы по программированию - Как правильно управлять удалением нормализованных данных, когда разные компоненты полагаются на один и тот же список объектов?

Как правильно управлять удалением нормализованных данных, когда разные компоненты полагаются на один и тот же список объектов?

#reactjs #redux #react-redux

#reactjs #redux #реагировать-redux

Вопрос:

Допустим, у вас есть:

  • разбитый на страницы список всех книг, доступных в вашем приложении. Вы содержите это в BooksList компоненте.
  • список лучших книг в вашем приложении в TopBooksList компоненте.

  • все эти данные, которые вы извлекаете из rest api, нормализуются и сохраняются в вашем хранилище Redux, поэтому ваше хранилище выглядит примерно так:

    {
    entities: {
    books: {
    1: { ... },
    2: { ... },
    3: { ... },
    4: { ... },
    5: { ... }
    }
    },
    topBooksList: [5, 2, 1],
    booksList: [1, 2, 3, 4, 5]
    }

  • Пользователь удаляет книгу 5 , нажав на кнопку удаления в книге в BooksList компоненте

Каждый раз, когда происходит удаление, соответствующий объект удаляется из списка объектов и из списка результатов этого компонента.

0. Каков наилучший способ справиться с тем фактом, что на странице есть другие компоненты, которые ссылаются на эту сущность, которая была только что удалена?

1. Пытаетесь ли вы координировать компоненты, добавляя операторы переключения для действия удаления в каждом редукторе, который имеет дело с такими данными? 1.1 Если да, то что делать, если вы хотите всегда синхронизировать компонент, на который в конечном итоге влияет это удаление, например TopBooksList , компонент в примере. Удаляя book 5 , вы получаете topBooksList длину 2 , которая вам нужна, чтобы иметь длину 3. Вы каким-то образом помечаете его как грязный и повторно извлекаете данные? Разве эта стратегия не становится утомительной, когда количество связанных компонентов на странице растет?

2. Существует ли другая, более простая стратегия?

Комментарии:

1. Вам следует изучить, как привязки данных выполняются в reactjs (не совсем знакомы с ним) или других привязках данных (например, vuejs vuejs.org/guide ) они сделали это довольно мило.

2. «Вы пытаетесь координировать компоненты, добавляя операторы переключения для действия удаления в каждом редукторе» <- Я не совсем понимаю, почему ваши компоненты имеют какое-либо отношение к вашему редуктору? Подход, который я бы выбрал, заключается в том, чтобы выполнить действие DELETE_BOOK, которое удаляет книгу из entities и идентификатор из topBooksList , а booksList затем ваши connect() отредактированные компоненты должны отражать это изменение?

3. «Действие DELETE_BOOK, которое удаляет книгу из объектов и идентификатор из topBooksList и booksList» => Это делается через ваш редуктор.

Ответ №1:

Предполагается, что вы добавляете switch обращения в каждый редуктор, который имеет дело с книгой. Там вы делаете то, что необходимо, чтобы все было в порядке (поддерживайте ссылочную целостность, убедитесь, что верхний список имеет длину 3 и т.д.).

Однако, если это связано с извлечением данных из серверной части, то это должно быть помещено в создатель асинхронных действий для deleteBook .

Причина этого в том, что редукторы всегда должны быть чистыми, что означает, что у них не может быть побочных эффектов.

В вашем случае у меня может быть больше topBooksList , поэтому нет необходимости извлекать каждый раз, когда книга удаляется. Вам не нужно отображать их все.

Не становится ли эта стратегия утомительной, когда количество связанных компонентов на странице растет?

Да, это становится утомительным. Попробуйте Redux-Orm или Redux-Schema (отказ от ответственности: написано мной).