Ваше состояние Redux может стать сложным, вот как удалить вложенные данные

Одна из ключевых особенностей Redux - его магазин; он содержит логику вашего приложения как объект состояния.

По сути, вы получаете ограниченное количество методов, которые можно запускать в магазине. Например, используйте getState как механизм для чтения текущего дерева состояний.

Вы можете спросить: «А как насчет того, чтобы писать в государство?»

Вот тут-то и пригодится dispatch(action). Это единственный способ в Redux инициировать изменение состояния. Действия по диспетчеризации тесно связаны с концепцией reducer. Редуктор получает как action, так и state и возвращает новое состояние приложения.

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

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

Это подводит нас к концепции неизменных паттернов обновления (или модификации данных) Redux. Неизменяемость является ключевым моментом, потому что мы никогда не хотим напрямую изменять значение в дереве состояний, а всегда делаем копию и возвращаем новое значение на основе старого значения.

Свойства состояния могут иметь много разных типов. Но когда мы говорим о проблемах паттернов модификации данных, Array и Object можно считать теми, у которых больше крайних случаев.

В этой статье мы сосредоточимся на конкретном шаблоне модификации данных Redux, который касается удаления элемента во вложенном объекте в дереве состояний.

Пример использования: удаление элемента во вложенном объекте в состоянии Redux

Представим, что у нас есть модное приложение для электронной коммерции со следующим начальным состоянием.

Дерево состояний простое и включает несколько ключей объектов, например outfits или filters.

В нашем приложении есть механизм фильтрации, который фильтрует наряды на основе таких атрибутов, как brand или colour. Например, если пользователь хочет увидеть одежду марки Bally с цветом Black и выполняет фильтрацию; это приведет к следующему дереву состояний.

Если мы хотим иметь более удобное приложение, нас может заинтересовать отображение фильтров, выбранных пользователем; прямо под системой фильтрации.

Таким образом, пользователь имеет возможность увидеть все выбранные им фильтры и удалить те фильтры, которые ему больше не интересны.

Для достижения этой цели нам нужен removeFilter actionCreator , который принимает тип поля (например, brand) и индекс (например, первый элемент) в отображаемом фильтрует и удаляет это конкретное значение фильтра из соответствующего элемента в дереве состояний.

В приведенном ниже коде показана часть рендеринга. Кнопки отображаются путем перебора отфильтрованного списка, который отображает Buttons и предоставляет им index и field.

Репо

Если вам интересно, вот репо , которое лучше демонстрирует вариант использования, который мы рассмотрели в этой статье.