Когда мы используем Redux с React, помещаем ли мы все состояния в Redux?

Я могу поместить некоторые состояния в качестве состояний компонентов, и я подумал, что для этого предназначен useState().

Однако книга Learning React, O'Reilly, 1st Ed, 2nd Release, p. 185, сказал:

С Redux мы полностью отделяем управление состоянием от React.

Кроме того, на официальном веб-сайте Redux пример Real World также даже делают isFetching состояние Redux вместо состояния компонента. (Репозиторий GitHub).

Я также обнаружил, что в каком-то проекте в какой-то компании коллеги, кажется, одобряют все как состояние Redux, даже если это может быть состояние компонента.

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

На этой веб-странице также говорится:

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

будьте прагматичным программистом: используйте компоненты без сохранения состояния, где это возможно

Я не совсем понимаю. Как это работает? Когда состояние может быть состоянием компонента, было бы нормально поместить его в состояние компонента? Или в React/Redux правило — переводить все в состояние Redux? (в таком случае для чего тогда useState()?)

Обновление: мне нравится ответ @RemcoGerlich, и я поставил две ссылки в качестве комментария под его ответом. Это официальные документы, в которых говорится, что не помещайте все состояния в Redux.


reactjs redux react-redux react-state-management
person kla    schedule 17.05.2021    source источник
comment
Идея состоит в том, чтобы поместить глобальное состояние, используемое различными компонентами, в редукцию, чтобы проблема props drill down и state lifting не требовались, и поместить локальное состояние в сами компоненты.   -  person Mayank Pandeyz    schedule 17.05.2021

Ответы (2)


arrow_upward
1
arrow_downward

Это вечная дискуссия. Есть несколько типов состояний, которые имеют свои лучшие способы их решения:

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

  • Состояние, полученное из серверной части через его API, на самом деле это вовсе не состояние вашего внешнего интерфейса, у вас есть кеш. Для этого гораздо больше подходит библиотека, такая как React Query (она обрабатывает, например, ваше состояние isFetching, а также перезагружает вещи через некоторое время).

  • Небольшие биты состояния, которые имеют только локальное значение, например, открыт или закрыт небольшой элемент управления, который скрывает некоторые детали. Я чувствую, что вещи, которые используются только локально, должны храниться только локально, например, в useState.

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

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

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

person RemcoGerlich    schedule 17.05.2021
comment
благодарю вас. Я также получил рекомендацию посмотреть эту официальную документацию redux.js.org/faq/ и еще один: redux.js.org/style-guide/style-guide/ и это похоже на то, что вы говорите - person kla; 17.05.2021
comment
@kla: спасибо, я перешлю эту ссылку на сингл Redux со всеми фанатиками, которые есть у меня в команде :) - person RemcoGerlich; 18.05.2021

arrow_upward
0
arrow_downward

Если ваше состояние и операции с этим состоянием невелики по размеру, то react Context API действительно достаточно умен, чтобы поддержать вас. Даже @danAbrvmov пишет:

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

Вам может понравиться прочитать его статью: Вам может не понадобиться Redux

Что касается некоторых компаний и проектов, использующих Redux, это потому, что Redux существует уже давно, а Context API новее. Более того, если вам действительно нужны некоторые функции, такие как redux-thunk, вы все равно можете их использовать.

Я сомневаюсь, что вы ясно понимаете, как состояние обрабатывается в React.

В типичном приложении React данные передаются сверху вниз (от родителя к дочернему элементу) через свойства. Вам может понравиться мой ответ в другом сообщении, чтобы узнать, когда нам вообще может понадобиться Context API или Redux: https://stackoverflow.com/a/62980048/9857078

person Mateen    schedule 17.05.2021
comment
так что вы говорите, что нам может даже не понадобиться Redux и мы можем просто использовать Context API... Я до сих пор не знаю, правда ли, что если мы используем Context API, мы можем изменить что-либо в состоянии, и все приложение повторно -rendered, а при использовании Redux перерисовываются только необходимые компоненты. Но, тем не менее, вопрос действительно в том, когда используется Redux... - person kla; 17.05.2021
comment
Я обновил свой ответ. Сможете ли вы пройти через это? - person Mateen; 17.05.2021