ОК, чтобы обновить состояние в реагирующих компонентах напрямую при использовании react-redux?

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

saveCourse(event) {
  this.setState({saving: true});
}

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

Пожалуйста, скажите мне, если я каким-то образом пропустил общий шаблон использования react-redux.


reactjs redux react-redux-form
person Pete    schedule 02.03.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Совершенно нормально продолжать использовать собственный механизм состояния React в тандеме с хранилищем Redux.

Вот как я понимаю эти два варианта: Если часть данных (и происходящие с ней изменения) является локальной для одного компонента и его непосредственных дочерних компонентов, используйте State. Обновите его, как обычно с React.

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

Вот пример, иллюстрирующий это положение: представьте, что у вас есть список Контакты в вашем магазине Redux. И редуктор addContact для добавления нового контакта в этот список. Элементы в этом списке могут отображаться в различных формах и местах в вашем приложении. Например, элемент меню на боковой панели может отображать количество элементов в списке, а другой элемент div на главной панели может перечислять элементы и их детали. Пока все хорошо.

Теперь вам нужно создать компонент NewContact, который отображает форму и необходимые поля ввода, чтобы пользователь мог добавить новый контакт в список. Входными данными в этой форме могут быть Контролируемые компоненты, обновляющие внутреннее состояние Компонент NewContact, полностью минувший магазин Redux. После отправки формы ваш компонент отправит действие addNewContact с соответствующей полезной нагрузкой, после чего новый контакт будет добавлен в список с помощью механизма Redux, распространяя необходимые обновления на остальную часть вашего приложения.

Это правильный пример гибридного использования Redux Store и React State одновременно.

Не могли бы вы также управлять состоянием формы NewContact в Redux? Абсолютно! Но должны ли вы? Ваш звонок. Вам не нужно, если только в этом нет какой-то выгоды.

person Arash Motamedi    schedule 02.03.2018

arrow_upward
1
arrow_downward

Управление состоянием в редуксе не означает, что вы не можете использовать компоненты с состоянием в реакции, вы используете setState в основном для повторного рендеринга компонентов и получения новых реквизитов. Хотя я использую this.forceUpdate для повторного рендеринга. Но состояние настройки кажется лучше

person Marvin    schedule 02.03.2018

arrow_upward
1
arrow_downward

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

person Ignacio    schedule 02.03.2018