Перейти к основному содержимому

Настройка хранилища

Неофициальный Бета-перевод

Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →

Redux FAQ: Настройка хранилища​

Можно или нужно ли создавать несколько хранилищ? Можно ли импортировать хранилище напрямую и использовать его в компонентах?​

Оригинальный шаблон Flux предполагает наличие нескольких "хранилищ" в приложении, каждое из которых содержит данные из разных предметных областей. Это может вызывать проблемы, например необходимость "waitFor" одного хранилища для обновления другого. В Redux это не требуется, поскольку разделение данных по областям уже достигается разбиением единого редюсера на более мелкие.

Как и в других вопросах, создание нескольких отдельных хранилищ Redux на странице возможно, но рекомендуемый подход — использование единственного хранилища. Одно хранилище позволяет работать с Redux DevTools, упрощает сохранение и восстановление данных, а также логику подписок.

Допустимые причины для использования нескольких хранилищ в Redux:

  • Устранение проблем с производительностью из-за слишком частых обновлений части состояния, подтверждённых профилированием приложения.

  • Изоляция Redux-приложения как компонента в более крупном приложении, где может потребоваться создание хранилища для каждого экземпляра корневого компонента.

Однако создание новых хранилищ не должно быть первым решением, особенно для разработчиков с опытом работы в Flux. Сначала попробуйте композицию редюсеров, и только если это не решит проблему — используйте несколько хранилищ.

Аналогично, хотя вы можете обращаться к экземпляру хранилища через прямой импорт, в Redux это не рекомендуется. Экспорт хранилища из модуля создаёт синглтон. Это усложнит изоляцию Redux-приложения как компонента в более крупном приложении или организацию серверного рендеринга, где для каждого запроса нужно создавать отдельные экземпляры хранилища.

В React Redux классы-обёртки, созданные функцией connect(), действительно ищут props.store, но лучше обернуть корневой компонент в <Provider store={store}>, поручив React Redux передачу хранилища вниз. Так компонентам не нужно импортировать модуль хранилища, а изоляция приложения или серверный рендеринг упрощаются.

Дополнительные материалы​

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

Обсуждения

Допустимо ли иметь несколько цепочек middleware в улучшителе хранилища? В чём разница между next и dispatch в функции middleware?​

Middleware в Redux работают как связный список. Каждая функция middleware может:

  • Вызвать next(action) для передачи действия следующему middleware
  • Вызвать dispatch(action) для перезапуска обработки с начала списка
  • Не делать ничего для остановки обработки действия

Эта цепочка определяется аргументами функции applyMiddleware при создании хранилища. Несколько цепочек работать корректно не будут, так как они имеют разные ссылки dispatch и фактически изолированы друг от друга.

Дополнительные материалы​

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

Обсуждения

Как подписаться только на часть состояния? Можно ли получить диспатченный экшен в подписке?​

Redux предоставляет единственный метод store.subscribe для уведомления слушателей об обновлении хранилища. Колбэки слушателей не получают текущее состояние в качестве аргумента — это просто индикация, что что-то изменилось. Логика подписчика может затем вызвать getState() для получения текущего значения состояния.

Этот API задуман как низкоуровневый примитив без зависимостей и сложностей, и может использоваться для построения более высокоуровневой логики подписки. UI-биндинги, такие как React Redux, могут создавать подписку для каждого подключенного компонента. Также возможно писать функции, которые могут интеллектуально сравнивать старое и новое состояние, и выполнять дополнительную логику при изменении определённых частей. Примеры включают redux-watch, redux-subscribe и redux-subscriber, предлагающие разные подходы к спецификации подписок и обработке изменений.

Новое состояние не передаётся слушателям для упрощения реализации усилителей хранилища, таких как Redux DevTools. Кроме того, подписчики предназначены для реакции на само значение состояния, а не на экшен. Для обработки экшенов можно использовать middleware.

Дополнительные материалы​

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

Обсуждения

Библиотеки