Обнаружение изменений в хранилище React / Redux и выполнение действий в зависимости от конкретного изменения.

Question

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

API создает массив пользователей JSON, такой как этот (ниже) , который выбирается моей страницей React каждые 10 секунд

[{
  "id": 1,
  "email": "bdudson0@arstechnica.com",
  "online": false,
  "paid": true
}, {
  "id": 2,
  "email": "srodear1@seattletimes.com",
  "online": true,
  "paid": true
}, {
  "id": 3,
  "email": "mwillmont2@nytimes.com",
  "online": true,
  "paid": false
}]

Этот массив JSON может изменитьсяв любое время один раз получен.Так, например, он может выявить дополнительного пользователя, показать удаленного пользователя, изменить онлайн-статус одного пользователя на true или false и т. Д.

Поскольку в контексте избыточности у вас есть действия, отправляемые намагазин, который меняет магазин;этот сценарий (который кажется обратным) использует только одно действие, которое является действием выборки JSON.Кроме того, я считаю, что хранилище должно быть массивом JSON, извлекаемым каждый раз.Как мне обнаружить изменения в хранилище, чтобы я мог выполнять действия на его основе.

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

например, 4 изменения состояния могут привести к следующим действиям, которые я буду анимировать с помощью реакции:

1. USER_ADDED
2. USER_ONLINE_STATUS_CHANGED
3. USER_PAYMENT_STATUS_CHANGED
4. USER_REMOVED

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

Answer 1

Redux не поможет вам автоматически различать два состояния.По сути, вам нужно вручную создать функцию для этого.

Простой способ - преобразовать массив JSON в es6, установленный с помощью

const set1 = new Set(OLD_STATE);
const set2 = new Set(NEW_STATE);

, после чего вы можете вызвать difference() дляполучить изменения между этими двумя состояниями:

set1.difference(set2)

В качестве альтернативы, вы можете использовать redux-diff-logger или redux-dev-tools для вывода различий в вашей консоли.

Answer 2

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

Реализуйте Redux, только если вам понадобится состояние, в данном случае массив JSON, постоянный во всем приложении React.В противном случае просто обрабатывайте вызовы API и изменения внутри компонента.Когда вы переключаете компоненты, вы теряете состояние, потому что оно не сохраняется между компонентами.Это то, что решает Redux.

"Мне нужно будет иметь возможность обнаруживать все изменения между новым и старым состоянием и выполнять анимацию на основе конкретных изменений."

Redux сможет обрабатывать обновление состояния с помощью создателей действий и редукторов.Создатели действий вызовут API и отправят ответ редукторам.Затем редукторы будут обновлять, изменять или удалять элементы из состояния.

"Подходит ли для этого избыточность? Я буду работать с гораздо большими массивами, и мне нужно будет найти удобный способ для достижения этой цели.. "

Звучит так, будто Redux подойдет для этого проекта.Используйте его, только если вам нужно состояние во всем приложении React.