Значение состояния изменяется, даже если действие / редуктор не изменяет это значение

Question

Я использую одну и ту же полезную нагрузку для установки двух разных значений состояния с одинаковым содержимым.

Это сделано для того, чтобы я мог получить исходные данные до того, как они претерпели какие-либо изменения, и в конце их можно сравнить, например:

onLoadUserDataSuccess

userData: action.payload
originalUserData: action.payload

Проблема в том, что когда у меня есть действие, которое обновляет пользовательские данные, но изменяет только значение userData, а не originalUserData, я вижу в devtools, что оба меняются. Пример:

onUserDataUpdate

userData: action.payload

Единственная причина, которую я могу себе представить, заключается в том, что каким-то образом это обрабатывается по ссылке? Таким образом, originalUserData автоматически изменится при изменении значения userData?

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

Answer 1

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

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

Это можно сделать и другими библиотеками, такими как Immutable.js и immer.

Подробнее о шаблонах неизменяемого обновления здесь