Redux FAQ: Организация состояния
Содержание
- Могу ли я хранить все мое состояние в Redux? Должен ли я всегда использовать setState() из React?
- Могу ли я хранить функции, промисы или другие несериализируемые данные в моем сторе состояния?
- Как мне хранить вложенные или дублирующиеся данные в моем состоянии?
Организация состояния
Могу ли я хранить все мое состояние в Redux? Должен ли я всегда использовать setState() из React?
Не существует “правильного” ответа на этот вопрос. Некоторые пользователи предпочитают хранить все данные в Redux, чтобы поддерживать полностью сериализуемую и контролируемую версию своего приложения на протяжении всего времени. Другие предпочитают выносить некритичные данные (UI состояние), как, например “is this dropdown currently open”, в состояние компонента.
Лучше использовать состояние компонента. Это Ваша работа, как разработчика, решать, какие части состояния составляют ваше приложение и где каждая из них хранится. Найдите баланс, который подходит Вам, и реализуйте его.
Ниже описаны некоторые негласные правила для определения тех частей данных, которые должны хранится в Redux-сторе:
- Остальные части приложения используют эти данные?
- Потребуется ли в дальнейшем возможность создавать данные, основанные на этих данных?
- Эти данные используются для управления несколькими компонентами?
- Важна ли Вам возможность восстанавливать это состояние в какой-то момент времени, т.е. отладка по времени (time travel debugging)?
- Требуется ли кэшировать данные, т.е. использовать то, что уже хранится в состоянии вместо повторного запроса?
Существует несколько пакетов, реализующих различные подходы к хранению данных в Redux-сторе вместо состояния компонента, таких как: redux-ui, redux-component, redux-react-local и другие. Они также позволяют применять принципы Redux и концепцию редюсера к задачам обновления локального состояни компонента, поддерживая идею this.setState( (previousState) => reducer(previousState, someAction))
.
Дополнительная информация
Статьи
- You Might Not Need Redux
- Finding
state
's place with React and Redux - A Case for setState
- How to handle state in React: the missing FAQ
- Where to Hold React Component Data: state, store, static, and this
- The 5 Types of React Application State
Обсуждения
- #159: Investigate using Redux for pseudo-local component state
- #1098: Using Redux in reusable React component
- #1287: How to choose between Redux's store and React's state?
- #1385: What are the disadvantages of storing all your state in a single immutable atom?
- Twitter: Should I keep something in React component state?
- Twitter: Using a reducer to update a component
- React Forums: Redux and global state vs local state
- Reddit: "When should I put something into my Redux store?"
- Stack Overflow: Why is state all in one place, even state that isn't global?
- Stack Overflow: Should all component state be kept in Redux store?
Библиотеки
Могу ли я хранить функции, промисы или другие несериализируемые данные в моем сторе состояния?
Настоятельно рекомендуется сохранять в сторе только простые сериализуемые объекты, массивы и примитивы. Технически возможно добавить несериализуемые данные в сторе, но это может сломать способность сохранять и восстанавливать содержимое стора, что сделает невозможным отладку по временной шкале (time-travel debugging).
Если Вы смиритесь с тем, что эти функции возможно не будут работать как положено, то Вы можете спокойно использовать несериализуемые данные в Redux-сторе. В конечном счете, это Ваше приложение, и как оно будет реализовано — решать Вам. Как и со многими другими вещами в Redux, Вы должны четко понимать, на какие компромиссы идете.
Дополнительная информация
Обсуждения
- #1248: Is it ok and possible to store a react component in a reducer?
- #1279: Have any suggestions for where to put a Map Component in Flux?
- #1390: Component Loading
- #1407: Just sharing a great base class
- #1793: React Elements in Redux State
Как мне хранить вложенные или дублирующиеся данные в моем состоянии?
Данные с идентификаторами, вложенностью или отношениями, как правило, следует хранить в “нормализированном” стиле: каждый объект должен быть сохранен однажды, идентифицирован, и другие ссылающиеся на него объекты должны хранить только идентификатор, а не копировать весь объект.
Это помогает думать о частях приложения как о базе данных с отдельными “таблицами” на каждый элемент. Такие библиотеки, как normalizr и redux-orm могут помочь и облегчить управление нормализированными данными.
Дополнительная информация
Документация
- Продвинутое использование: Асинхронные экшены
- Примеры: Real World
- Рецепты: Структурирование редюсеров — Предварительные концепциии
- Рецепты: Структурирование редюсеров — Нормализация состояния
- Примеры: Tree View
Статьи
Обсуждения
- #316: How to create nested reducers?
- #815: Working with Data Structures
- #946: Best way to update related state fields with split reducers?
- #994: How to cut the boilerplate when updating nested entities?
- #1255: Normalizr usage with nested objects in React/Redux
- #1269: Add tree view example
- #1824: Normalising state and garbage collection
- Twitter: state shape should be normalized
- Stack Overflow: How to handle tree-shaped entities in Redux reducers?
- Stack Overflow: How to optimize small updates to props of nested components in React + Redux?