Provider

Overview

Компонент <Provider> делает store Redux доступным для любых вложенных компонентов, которым необходим доступ к хранилищу Redux.

Поскольку любой компонент React в приложении React Redux может быть подключен к хранилищу, большинство приложений будут рендерить <Provider> на верхнем уровне со всем деревом компонентов приложения внутри него.

Хуки и connect после подключения смогут получить доступ к предоставленному экземпляру хранилища через механизм передачи контекста из React.

Пропсы

interface ProviderProps<A extends Action = AnyAction, S = any> {
  /**
   * Единственное хранилище Redux в вашем приложении.
   */
  store: Store<S, A>

  /**
   * (Опционально) снэпшот серверного состояния. Будет использован во время изначального рендеринга при гидрации(hydration)
   * Если доступно, то убедится, что вывод пользовательского интерфейса соответствует HTML-коду, сгенерированному на сервере.
   * Новый в 8.0
   */
  serverState?: S

  /**
   * (Опционально) контекст, который будет внутренне использован в react-redux. 
   * Функция React.createContext() отвечает за создание контекста для использования.
   * Если этот пропс используется, вам понадобится изменить `connect` 
   * путём предоставления того же контекста, что был передан в Provider.
   * Изначальное значение не важно, т.к. оно перезаписывается внутренним состоянием Provider.
   */
  context?: Context<ReactReduxContextValue<S, A>>

  /** Верхнеуровеневый элемент React в вашем дереве компонентов, такие как `<App />` **/
  children: ReactNode
}

Как правило, вам нужно только передать <Provider store={store}>.

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

Invariant Violation

Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Todo) in connect options.

Использование React 18 SSR

Начиная с React-Redux v8, <Provider> теперь принимает свойство serverState для использования в сценариях гидратации SSR. Это необходимо, если вы вызываете hydrateRoot, чтобы избежать несоответствия при гидратации.

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

Примеры

Базовое использование

В приведенном ниже примере компонент <App /> является компонентом корневого уровня. Это означает, что он находится на самом верху нашей иерархии компонентов.

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

// Начиная с React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

React 18 SSR гидрация(Hydration)

В этом примере клиент получил HTML, отображаемый сервером, а также сериализованное состояние Redux, прикрепленное к window. Сериализованное состояние используется для предварительного заполнения содержимого хранилища и для передачи в качестве свойства serverState в <Provider>

src/index.ts

import { hydrateRoot } from 'react-dom/client'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

const preloadedState = window.__PRELOADED_STATE__

const clientStore = configureStore({
  reducer: rootReducer,
  preloadedState,
})

hydrateRoot(
  document.getElementById('root'),
  <Provider store={clientStore} serverState={preloadedState}>
    <App />
  </Provider>
)