React-Redux: Если все составные состояния хранятся в Redux магазине

Question

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

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

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

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 ...

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

Answer 3

Redux FAQ: Organizing State
эта часть перевождь официального док хорошо ответил на ваш вопрос.

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

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

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