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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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