Стоит ли хранить данные в стейт менеджере Redux

Что проверяют

Умеете ли вы выбирать место для состояния, а не тащить всё в глобальный стор по привычке. Вопрос открытый специально: ответы «да, всегда» и «нет, это устарело» одинаково плохи.

Как отвечать

Разделите состояние по природе, и ответ сложится сам:

• серверные данные, то есть всё пришедшее из API. У них своя жизнь: загрузка, ошибка, устаревание, повтор запроса. Складывая их в стор руками, вы пишете библиотеку кэша заново, поэтому их держат в готовой, в том числе в той, что идёт в комплекте с современным набором инструментов Redux;
• состояние экрана: открыт ли список, какая вкладка активна. Это useState рядом с компонентом, в глобальном сторе ему делать нечего;
• адресное состояние: фильтры каталога, номер страницы, поисковая строка. Ему место в адресной строке, иначе ссылка перестаёт воспроизводить экран;
• настоящее общее состояние: корзина, черновик многошаговой формы, данные сессии и права. Вот это и есть кандидат на стор.

Дальше скажите, как писать, если стор выбран. Берут набор инструментов вместо ручных редьюсеров, изменения описывают как мутацию черновика, которую Immer превращает в неизменяемое обновление, сущности хранят нормализованно по идентификаторам, а компоненты читают данные селекторами, чтобы не перерисовываться на каждое чужое изменение.

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

Где спотыкаются

Кладут в стор ответ сервера и считают задачу решённой. Потом выясняется, что нет ни инвалидации, ни повторного запроса при возврате на вкладку, и половина кэширующей библиотеки дописывается руками.

Второе: используют контекст как замену стору для часто меняющихся данных. Смена значения перерисовывает всё поддерево целиком, выборочной подписки там нет, и на больших экранах это заметно глазом.

Третье: мутируют состояние там, где черновика нет: в своём хуке, в обычном объекте, в поле класса. Ссылка остаётся прежней, сравнение по ссылке решает, что ничего не изменилось, и компонент не обновляется.