Чтобы расширить наши горизонты, мы недавно начали экспериментировать с созданием одностраничных приложений (SPA), используя очень популярную комбинацию React + Redux. Управление состоянием приложения с помощью Redux было совсем другим (по сравнению, например, с шаблоном MVVM), но также очень интересно и увлекательно. К этому нужно привыкнуть, но как только вы освоитесь, мы думаем, что вам, как и нам, это действительно понравится!

Одна вещь, которая действительно важна при работе с Redux, - это то, что вы никогда не должны мутировать (изменять напрямую) свое состояние. Вместо этого вы всегда должны возвращать копию состояния , которое вы изменяете (распространенное заблуждение состоит в том, что вам нужно скопировать / клонировать все, читайте больше здесь и здесь. Это означает, что вам нужно научиться новые способы работы с массивами, изменение свойств объектов и т. д. Чтобы упростить это, мы хотели поделиться собственной шпаргалкой / рецептурной книгой для наиболее распространенных случаев.

Совет. Чтобы лучше понять эти примеры, узнайте больше об операторе распространения, Object.assign, slice, filter и map.

Наслаждайтесь!

Шпаргалка / рецепты неизменяемых обновлений

Объекты

Обновление свойства объекта

Обновление свойства вложенного объекта

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

Массивы

Добавление предмета

Вставка элемента в индекс

Удаление элемента по индексу

Замена элемента по индексу

Обновление предмета в зависимости от совпадения

Удалить элемент на основе совпадения

Надеюсь, это помогло вам, это, безусловно, помогло нам!

История изначально опубликована по адресу: http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/

Ссылки и дополнительная литература: