Redux FAQ: Организация состояния

Содержание

• Нужно ли помещать всё состояние в Redux? Можно ли использовать setState()?
• Можно ли помещать функции, промисы или другие несериализуемые элементы в состояние хранилища?
• Как организовать вложенные или повторяющиеся данные в состоянии?

Организация состояния

Нужно ли помещать всё состояние в Redux? Можно ли использовать setState() React's setState()?

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

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

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

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

Существует ряд пакетов сообщества, которые реализуют различные подходы к хранению состояния каждого компонента в хранилище Redux, такие как redux-ui, redux-component, redux-react-local и другие. Также возможно применение принципов и концепции редьюсеров Redux для обновления локального состояния компонента, аналогично this.setState( (previousState) => reducer(previousState, someAction)).

Дополнительная информация

Статьи

• Возможно, вам не нужен Redux
• Поиск места state с React и Redux
• Случай в пользу setState
• Как обрабатывать состояние в React: недостающий FAQ
• Где хранить данные компонента React: состояние, хранилище, статическое и this
• 5 типов состояния приложения React

Обсуждения

• #159: Исследовать использование Redux для псевдолокального состояния компонента
• #1098: Использование Redux в многократно используемом компоненте React
• #1287: Как выбрать между хранилищем Redux и состоянием React?
• #1385: Какие недостатки хранения всего состояния в одном неизменяемом атоме?
• Твиттер: Следует ли хранить что-то в состоянии компонента React?
• Твиттер: Использование редьюсера для обновления компонента
• Форумы React: Redux и глобальное состояние против локального состояния
• Reddit: "Когда нужно поместить что-то в хранилище Redux?"
• Stack Overflow: Почему всё состояние хранится в одном месте, даже если оно не является глобальным?
• Stack Overflow: Следует ли хранить всё состояние компонента в хранилище Redux?

Библиотеки

• Каталог дополнений Redux: Состояние компонента

Можно ли помещать функции, промисы или другие несериализуемые элементы в состояние хранилища?

Сильно рекомендуется помещать в хранилище только простые сериализуемые объекты, массивы и примитивы. Можно технически вставить в хранилище несериализуемые элементы, но это может нарушить возможность сохранения и регидрации содержимого хранилища, а также повлиять на отладку с путешествиями во времени.

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

Дополнительная информация

Обсуждения

• #1248: Разрешено ли и возможно ли хранить компонент React в редьюсере?
• #1279: Есть ли предложения о том, где поместить компонент Map в Flux?
• #1390: Загрузка компонента
• #1407: Просто совместное использование отличного базового класса
• #1793: Элементы React в состоянии Redux

Как организовать вложенные или повторяющиеся данные в состоянии?

Данные с идентификаторами, вложением или отношениями обычно должны храниться в «нормализованном» виде: каждый объект должен храниться один раз, с ключом по идентификатору, а другие объекты, которые на него ссылаются, должны хранить только идентификатор, а не копию всего объекта. Может быть полезно рассматривать части вашего хранилища как базу данных с отдельными «таблицами» для каждого типа элементов. Библиотеки, такие как normalizr и redux-orm, могут предоставить помощь и абстракции при управлении нормализованными данными.

Дополнительная информация

Документация

• Расширенное: Асинхронные действия
• Примеры: Пример из реальной жизни
• Рецепты: Структурирование редьюсеров - Предварительные концепции
• Рецепты: Структурирование редьюсеров - Нормализация формы состояния
• Примеры: Деревовидное представление

Статьи

• Высокопроизводительный Redux
• Запрос хранилища Redux

Обсуждения

• #316: Как создать вложенные редьюсеры?
• #815: Работа с структурами данных
• #946: Лучший способ обновления связанных полей состояния с разделенными редьюсерами?
• #994: Как сократить избыточность при обновлении вложенных сущностей?
• #1255: Использование Normalizr с вложенными объектами в React/Redux
• #1269: Добавить пример дерева
• #1824: Нормализация состояния и сборка мусора
• Твиттер: форма состояния должна быть нормализованной
• Stack Overflow: Как обработать структуры данных в виде дерева в редьюсерах Redux?
• Stack Overflow: Как оптимизировать небольшие обновления свойств вложенных компонентов в React + Redux?