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

React-Redux: все компоненты компонентов сохраняются в Redux Store

Скажем, у меня есть простой переключатель:

Когда я нажимаю кнопку, компонент цвета изменяется между красным и синим

Я мог бы достичь этого результата, выполнив что-то вроде этого.

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

но это адский код для написания чего-то, что я мог бы достичь за 5 секунд с помощью jQuery, некоторых классов и некоторых css...

Итак, я думаю, что я действительно спрашиваю, что я делаю неправильно здесь?

4b9b3361

Ответ 1

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

Просто задайте следующие вопросы: важно ли это состояние для остальной части приложения? Будут ли другие части приложения вести себя по-другому на основе этого состояния? Во многих незначительных случаях это не так. Возьмите раскрывающееся меню: тот факт, что он открыт или закрыт, вероятно, не повлияет на другие части приложения. Таким образом, подключение его к вашему магазину, вероятно, слишком велико. Это, безусловно, правильный вариант, но на самом деле не дает вам никаких преимуществ. Вам лучше использовать this.state и назвать его днем.

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

В общем, постарайтесь сохранить состояние приложения как можно меньше. Вам не нужно ничего там пихать. Сделайте это, когда вам нужно, или это имеет смысл, чтобы что-то там держать. Или это облегчит вашу жизнь при использовании Dev Tools. Но не слишком сильно перегружайте его значение.

Ответ 2

Redux FAQ: Организационное государство
эта часть официального документа редукса хорошо ответила на ваш вопрос.

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

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

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

Ответ 3

Чтобы выделить большую ссылку, предоставленную @AR7, и потому, что эта ссылка была перемещена некоторое время назад:

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

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

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

Дэн Абрамов: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

Ответ 4

Я не согласен с предлогом "все или ничего". Государство не обязательно переплетено и не должно быть, когда это не нужно. Раскрытие может быть проще для написания и отладки без Redux, и оно может быть полностью отделено от других состояний, которые было бы очень трудно отладить без Redux. Например. Я полностью поддерживаю маршрутизацию вызовов API через Redux и использую ее для других сложных или далеко идущих состояний, но я думаю, что изменение кода в пяти местах для простого раскрывающегося списка (или переключения цвета) является излишним и добавляет ненужные затраты на разработку.

Ответ 5

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

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

По соображениям производительности вы можете захотеть вернуться к this.setState() из-за чего-либо, что неоднократно отправляло бы много действий. Например: сохранение состояния поля ввода в Redux каждый раз, когда пользователь вводит клавишу, может привести к снижению производительности. Вы можете решить эту проблему, рассматривая ее как транзакцию: после того, как пользовательское действие "зафиксировано", сохраните конечное состояние в Redux.

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