Чтобы расширить наши горизонты, мы недавно начали экспериментировать с созданием одностраничных приложений (SPA), используя очень популярную комбинацию React + Redux. Управление состоянием приложения с помощью Redux было совсем другим (по сравнению, например, с шаблоном MVVM), но также очень интересно и увлекательно. К этому нужно привыкнуть, но как только вы освоитесь, мы думаем, что вам, как и нам, это действительно понравится!
Одна вещь, которая действительно важна при работе с Redux, - это то, что вы никогда не должны мутировать (изменять напрямую) свое состояние. Вместо этого вы всегда должны возвращать копию состояния , которое вы изменяете (распространенное заблуждение состоит в том, что вам нужно скопировать / клонировать все, читайте больше здесь и здесь. Это означает, что вам нужно научиться новые способы работы с массивами, изменение свойств объектов и т. д. Чтобы упростить это, мы хотели поделиться собственной шпаргалкой / рецептурной книгой для наиболее распространенных случаев.
Совет. Чтобы лучше понять эти примеры, узнайте больше об операторе распространения, Object.assign, slice, filter и map.
Наслаждайтесь!
Шпаргалка / рецепты неизменяемых обновлений
Объекты
Обновление свойства объекта
Обновление свойства вложенного объекта
Для вложенных полей не забудьте скопировать каждый уровень, подробнее здесь.
Массивы
Добавление предмета
Вставка элемента в индекс
Удаление элемента по индексу
Замена элемента по индексу
Обновление предмета в зависимости от совпадения
Удалить элемент на основе совпадения
Надеюсь, это помогло вам, это, безусловно, помогло нам!
История изначально опубликована по адресу: http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/
Ссылки и дополнительная литература:
- Http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html
- Http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html
- Http://redux.js.org/docs/faq/ImmutableData.html
- Https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread
- Https://egghead.io/lessons/javascript-redux-avoiding-object-mutations-with-object-assign-and-spread
- Https://egghead.io/lessons/javascript-redux-writing-a-todo-list-reducer-adding-a-todo
- Https://egghead.io/lessons/javascript-redux-writing-a-todo-list-reducer-toggling-a-todo
- Https://stackoverflow.com/questions/32925460/spread-operator-vs-object-assign