Make one Redux store available to the entire React application
Application startup
Redux Toolkit · Component
Provider
Provider makes a Redux store available to nested React components through React Redux context. It is usually rendered at the top of the application tree around the app.
- Since
- React-Redux v8 for serverState
How it works
Provider places a Redux store into React context for a component subtree. Put it above the components that use React Redux hooks or connect; normally it surrounds the whole application, and an optional custom context must be shared with connected components.
Syntax
<Provider store={store} [context={context}] [serverState={serverState}]}>{children}</Provider>Parameters
| Name | Type | Description |
|---|---|---|
store | Store | Redux store instance made available to descendant components. |
context | React.Context | Optional React Context instance for custom React Redux context wiring. |
serverState | PreloadedState | Optional complete serialized server state used during SSR hydration. |
Returns
A React component that provides the specified Redux store to its descendant component tree.
Key points
- Provider exposes its store to descendant components that need Redux access.
- The standard placement is at the application root.
- Place the complete application tree inside Provider when the whole app uses the store.
- React Redux hooks and connect retrieve the store through React Context.
- The normal declaration supplies the store through the store prop.
Common mistakes
- A custom context is not automatically recognized elsewhere: pass the identical context instance to every connected component.
- For SSR hydration with React-Redux v8 or later, provide the server's complete serialized state through serverState.
Example: Providing a Redux store to React
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import App from './App'
const store = configureStore({ reducer: {} })
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>,
)Wrap the application root with Provider and pass the Redux store so descendants can use React Redux APIs.
When to use it
Expose a selected store to one component subtree
Scoped integration
Match the server state during client hydration
Server-rendered applications
Interview questions
QWhat problem does Provider solve?
Provider makes the Redux store available to descendant React components through React Context. Hooks and connect can then obtain the provided store instance.
Follow-up: What must change when using a custom context? Pass that same context instance to the Provider and to all connected components.
QWhere should Provider be rendered, and what prop is normally required?
Most applications render Provider near the root and place the entire application tree inside it. The usual required prop is the store prop.
Follow-up: Can Provider wrap only part of an application? Yes; only descendants inside its subtree can access that provided store.
QHow does Provider support SSR hydration?
React-Redux v8 added serverState for SSR hydration. Supply the complete serialized server state so React uses it for the initial hydration render.
Follow-up: Why must the value represent the entire serialized state? The initial client render needs to match the server-rendered state during hydration.
Related
useSelectoruseDispatchconnectconfigureStoreReact Context