Ваше состояние Redux может стать сложным, вот как удалить вложенные данные
Одна из ключевых особенностей Redux - его магазин; он содержит логику вашего приложения как объект состояния.
По сути, вы получаете ограниченное количество методов, которые можно запускать в магазине. Например, используйте getState
как механизм для чтения текущего дерева состояний.
Вы можете спросить: «А как насчет того, чтобы писать в государство?»
Вот тут-то и пригодится dispatch(action)
. Это единственный способ в Redux инициировать изменение состояния. Действия по диспетчеризации тесно связаны с концепцией reducer
. Редуктор получает как action
, так и state
и возвращает новое состояние приложения.
Золотое правило заключается в том, что мы возвращаем не мутированное состояние, а новое состояние. В зависимости от типа вашего действия вам может потребоваться обновить дерево состояний в различных формах, когда оно попадет в редуктор.
- Возможно, вам потребуется добавить новый элемент в одно из свойств состояния.
- Может возникнуть необходимость обновить или переназначить свойство состояния.
- Или у вас может быть сценарий, в котором вам нужно удалить элемент из государственного свойства.
Это подводит нас к концепции неизменных паттернов обновления (или модификации данных) Redux. Неизменяемость является ключевым моментом, потому что мы никогда не хотим напрямую изменять значение в дереве состояний, а всегда делаем копию и возвращаем новое значение на основе старого значения.
Свойства состояния могут иметь много разных типов. Но когда мы говорим о проблемах паттернов модификации данных, Array
и Object
можно считать теми, у которых больше крайних случаев.
В этой статье мы сосредоточимся на конкретном шаблоне модификации данных Redux, который касается удаления элемента во вложенном объекте в дереве состояний.
Пример использования: удаление элемента во вложенном объекте в состоянии Redux
Представим, что у нас есть модное приложение для электронной коммерции со следующим начальным состоянием.
Дерево состояний простое и включает несколько ключей объектов, например outfits
или filters
.
В нашем приложении есть механизм фильтрации, который фильтрует наряды на основе таких атрибутов, как brand
или colour
. Например, если пользователь хочет увидеть одежду марки Bally
с цветом Black
и выполняет фильтрацию; это приведет к следующему дереву состояний.
Если мы хотим иметь более удобное приложение, нас может заинтересовать отображение фильтров, выбранных пользователем; прямо под системой фильтрации.
Таким образом, пользователь имеет возможность увидеть все выбранные им фильтры и удалить те фильтры, которые ему больше не интересны.
Для достижения этой цели нам нужен removeFilter
actionCreator
, который принимает тип поля (например, brand
) и индекс (например, первый элемент) в отображаемом фильтрует и удаляет это конкретное значение фильтра из соответствующего элемента в дереве состояний.
В приведенном ниже коде показана часть рендеринга. Кнопки отображаются путем перебора отфильтрованного списка, который отображает Button
s и предоставляет им index
и field
.
Репо
Если вам интересно, вот репо , которое лучше демонстрирует вариант использования, который мы рассмотрели в этой статье.