Подтвердить что ты не робот

Я использую Redux. Должен ли я управлять контролируемым состоянием ввода в хранилище Redux или использовать setState на уровне компонента?

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

Как мне управлять управляемым состоянием ввода?

4b9b3361

Ответ 1

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

  • Вы также можете проверить Redux Form. Это в основном то, что вы описали. Он связывает входы формы с состоянием Redux.

Первый способ подразумевает, что вы делаете все вручную - максимальный контроль и максимальный шаблон. Второй способ означает, что вы позволяете компоненту более высокого порядка выполнять всю работу за вас. И чем между ними все. Есть несколько пакетов, которые я видел, которые упрощают определенный аспект управления формой:

  1. Изменить формы - Он предоставляет кучу вспомогательных компонентов для упрощения визуализации и проверки форм. Не дает вам способ

  2. Реакция схемы JSON - Просто позволяет преобразовать схему JSON в форму.

  3. Formsy React - Как говорится в описании: "Это расширение для React JS направлено на то, чтобы" сладкое пятно "между гибкостью и возможностью повторного использования".

Ответ 2

Мне нравится этот ответ от одного из соавторов Redux: https://github.com/reactjs/redux/issues/1287

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

Иногда вам нужно перейти из состояния Redux в состояние React (когда хранение чего-то в Redux становится неудобным) или наоборот (когда другие компоненты должны иметь доступ к некоторому состоянию, которое раньше локальные).

Правило большого пальца: сделайте все, что менее неудобно.

То есть, если вы уверены, что ваша форма не повлияет на глобальное состояние или должна быть сохранена после размонтирования вашего компонента, а затем держитесь в состоянии реакции.

Ответ 3

Лично я настоятельно рекомендую хранить все в состоянии Redux и уходить из локального состояния компонента. Это связано с тем, что если вы начнете смотреть на ui как функцию состояния, вы можете выполнить полное тестирование без браузера, и вы можете воспользоваться сохранением ссылки на полную историю состояния (как в том, что было на их входах, какие диалоги были открыты и т.д., когда ошибка пользователя - не то, что было их состоянием с начала времени) для пользователя для целей отладки. Связанный твит из области clojure

отредактировано, чтобы добавить: именно здесь мы и наша дочерняя компания движемся с точки зрения наших производственных приложений и как мы обрабатываем redux/state/ui

Ответ 4

TL; DR

Хорошо использовать все, что подходит вашему приложению (Источник: Redux docs)


Некоторые общие эмпирические правила для определения того, какие данные должны быть помещен в Redux:

  • Учитывают ли другие части приложения эти данные?
  • Вам нужно иметь возможность создавать дополнительные производные данные на основе этих исходных данных?
  • Используются ли те же данные для управления несколькими компонентами?
  • Есть ли у вас ценность для восстановления этого состояния до заданного момента времени (т.е. отладки во времени)?
  • Вы хотите кэшировать данные (т.е. использовать то, что в состоянии, если оно уже существует вместо повторного запроса)?

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

Локальное состояние

  • Полезно, когда моя форма не имеет отношения к другим компонентам пользовательского интерфейса. Просто запишите данные из input (s) и отправьте. Я использую это большую часть времени для простых форм.
  • Я не вижу большого использования в путешествиях во времени, отлаживая входной поток моей формы (если какой-то другой компонент пользовательского интерфейса не зависит от этого).

Состояние редукции

  • Полезно, когда форма должна обновить какой-либо другой компонент пользовательского интерфейса в моем приложении (так же, как двусторонняя привязка).
  • Я использую это, когда моя форма input (s) вызывает некоторые другие компоненты render в зависимости от того, что вводится пользователем.