提供者

概述

<Provider> 组件使 Redux store 可用于任何需要访问 Redux 商店的嵌套组件。

由于 React Redux 应用程序中的任何 React 组件都可以连接到商店，因此大多数应用程序将在顶层渲染一个 <Provider>，并将整个应用程序的组件树放在其中。

然后，钩子 和 connect API 可以通过 React 的 Context 机制访问提供的商店实例。

道具

interface ProviderProps<A extends Action = AnyAction, S = any> {
  /**
   * The single Redux store in your application.
   */
  store: Store<S, A>

  /**
   * An optional server state snapshot. Will be used during initial hydration render
   * if available, to ensure that the UI output is consistent with the HTML generated on the server.
   * New in 8.0
   */
  serverState?: S

  /**
   * Optional context to be used internally in react-redux. Use React.createContext()
   * to create a context to be used.
   * If this is used, you'll need to customize `connect` by supplying the same
   * context provided to the Provider.
   * Set the initial value to null, and the hooks will error
   * if this is not overwritten by Provider.
   */
  context?: Context<ReactReduxContextValue<S, A> | null>

  /** Global configuration for the `useSelector` stability check */
  stabilityCheck?: StabilityCheck

  /** The top-level React elements in your component tree, such as `<App />` **/
  children: ReactNode
}

通常，您只需要传递 <Provider store={store}>。

您可以提供一个上下文实例。如果您这样做，您需要将相同的上下文实例提供给所有连接的组件。未能提供正确的上下文会导致此运行时错误

不变式违规

在 "Connect(MyComponent)" 的上下文中找不到 "store"。请将根组件包装在 <Provider> 中，或将自定义 React 上下文提供程序传递给 <Provider>，并将相应的 React 上下文消费者传递给 Connect(Todo) 的连接选项。

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()

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
)

React 18 SSR 水合

在此示例中，客户端已收到服务器渲染的 HTML，以及附加到 window 的序列化 Redux 状态。序列化状态用于预填充存储的内容，以及作为 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>,
)