Redux создание новых объектов на пользовательском интерфейсе

Question

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

При передаче значений между компонентами пользовательского интерфейса и редукторами. Неизменность стала проблемой.

1) Проблема с циклом - у меня есть формы, которые создают JSON объекты - которые затем используются редукторами для поддержания модели. В следующий раз, когда вы используете форму, она устанавливается в более раннее состояние ... и либо выдает ошибку, либо обновляет предыдущий атрибут вместе с собой. Есть ли какой-то способ перехватить вещи в не-избыточном состоянии и затем передать их в состояния для процесса?

2) Redux возвращает или редукторы становятся чрезвычайно неуправляемыми в масштабе. Я начал использовать immer для этого. Это хороший выбор?

Answer 1

Используете ли вы Reactjs для создания форм?

Чтобы извлечь наибольшую выгоду из иммутабилирования, лучше всего, если ваш дизайн также его охватит. Что я имею в виду: разработать форму, которая просто отображает ваши данные. (чистая форма или FormPure)

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

Иерархия будет выглядеть следующим образом: Приложение> Форма> FormPure

• Компоненты
  • Форма:
  • • Подключено к Redux
  • • Может иметь свое собственное состояние.
  • FormPure:
  • • Не знает о избыточном
  • • Только отображает данные, предоставленные от его родителя (реагирует через реквизиты и передается через обратные вызовы вверх)

Когда пользователь нажимает кнопку «Сохранить», то подключенный компонент ( Form) может отправлять действие по обновлению состояния в избыточном формате.

Таким образом, вы можете создать свой FormPure отдельно от любых данных и просто использовать его по мере необходимости.

Вы можете рассмотрите возможность использования Storybook для приятного проектирования ваших компонентов.

Для 2: Да, immer разумно подходит для использования, просто убедитесь, что вы не злоупотребляете им, создавая большие деревья объектов, как описано в документация. Также обязательно отключите автозамерзание при развертывании в рабочей среде.

Подсказка: immer использует Proxy , убедитесь, что ваша целевая платформа поддерживает их, или обязательно переключитесь на реализацию ES5, которая является значительно медленнее (см. immer docs )