The Provider

The Provider

<Provider> is the bridge between the store and React 7,897 : it puts the store on a React context so every Hook below it finds the same instance.

Mounting the store at the rootJavaScript

import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
createRoot(document.getElementById('root')).render(
  <Provider store={store}><App /></Provider>
);

Wrap the whole application, router included (Routing with React Router), so route components can read the store too. A Hook rendered outside the Provider throws could not find react-redux context value, which almost always means a test rendered a component on its own; the fix is the same call, with a store built for that test — which is why configureStore is a plain function and not a singleton. Of the optional props, serverState is the one you will need: it takes the snapshot serialized during server rendering, so the first client render matches the HTML instead of tearing (renderToString and hydrateRoot).

MENU