# How to Configure the Redux Provider Component in a React Application

> Learn to configure the Redux Provider component in React. Wrap your root component with Provider and pass your store to make state accessible via React Context.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-19

---

**Wrap your application's root component with the `<Provider>` component from react-redux and pass your Redux store via the `store` prop to make state and dispatch functions accessible throughout the React component tree via React's Context API.**

The `<Provider>` component serves as the essential bridge between your Redux store and the React rendering hierarchy, leveraging mechanisms defined in the `facebook/react` repository to eliminate prop drilling. When you configure the Redux provider component at your application's entry point, it utilizes `React.createContext` (implemented in [`packages/react/src/ReactContext.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactContext.js)) to propagate the store reference to all descendant components. This pattern enables any component to access the store through hooks like `useSelector` and `useDispatch` without manual prop passing.

## How Provider Uses React Context Internally

The `react-redux` library utilizes React's context system to distribute the store throughout your component tree. Internally, the library calls `React.createContext(null)` to initialize a context object that holds your store reference. When you render `<Provider store={store}>`, the component renders a `<Context.Provider value={store}>` element, making the store the context value for that entire subtree.

Downstream components consume this context through `React.useContext(StoreContext)`, which powers both the modern `useSelector` hook and the legacy `connect` higher-order component. This architecture ensures that `dispatch` and selected state slices inject automatically as props or hook returns, maintaining clean component interfaces.

## Basic Provider Configuration Pattern

Configure the provider at your application's entry point to establish a single source of truth for state management. The standard pattern uses Redux Toolkit's `configureStore` to create the store, then wraps your root `<App />` component with a single Provider instance.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import App from './App';
import rootReducer from './store/rootReducer';

// Create the store
const store = configureStore({
  reducer: rootReducer,
});

// Render with Provider at the top level
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

```

**Single source of truth:** Maintain exactly **one** `<Provider>` at the root of your application. Nesting multiple providers creates ambiguous store resolution contexts and triggers unnecessary re-renders.

## Advanced: Configuring Multiple Stores

While uncommon, you may need separate stores for distinct application domains such as micro-frontend boundaries. In these cases, nest separate Provider instances, understanding that inner providers override outer contexts for their respective subtrees.

```tsx
import { Provider as ReduxProvider } from 'react-redux';
import { store as authStore } from './store/authStore';
import { store as dataStore } from './store/dataStore';

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <ReduxProvider store={authStore}>
      <ReduxProvider store={dataStore}>
        <App />
      </ReduxProvider>
    </ReduxProvider>
  </React.StrictMode>
);

```

**Warning:** Only implement this pattern when you require truly isolated state domains. Most applications benefit from a single combined store with slice reducers rather than multiple nested providers.

## Testing Components with Provider

When unit testing components that rely on Redux state, wrap the component under test with a Provider containing a test-specific store. Create the test store using `configureStore` with `preloadedState` to inject mock data.

```tsx
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import Counter from './Counter';
import counterReducer from '../slices/counterSlice';

function renderWithStore(ui, { preloadedState } = {}) {
  const store = configureStore({
    reducer: { counter: counterReducer },
    preloadedState,
  });
  return render(<Provider store={store}>{ui}</Provider>);
}

// Test implementation
test('shows initial count', () => {
  const { getByText } = renderWithStore(<Counter />, {
    preloadedState: { counter: { value: 5 } },
  });
  expect(getByText(/5/)).toBeInTheDocument();
});

```

## Performance and TypeScript Considerations

**Server-side rendering:** Wrap your application root with `<Provider store={store}>` on both server and client, ensuring the store rehydrates with identical initial state to prevent hydration mismatches. Create a fresh store instance per request on the server.

**TypeScript integration:** Export `RootState` and `AppDispatch` types from your store configuration file. Reference these types in `useSelector` and `useDispatch` hooks throughout your application for complete type safety.

**Re-render optimization:** The `react-redux` library implements memoization for selector results, triggering component updates only when selected state slices change. The source context implementation in [`facebook/react/packages/react/src/ReactContext.js`](https://github.com/facebook/react/blob/main/facebook/react/packages/react/src/ReactContext.js) enables efficient propagation of store updates. Combine this with `createSelector` from Reselect for computed state values to maintain high performance in large component trees.

## Summary

- **Single Provider rule:** Configure exactly one `<Provider>` at the application root to avoid context conflicts and unnecessary renders.
- **Context mechanism:** The provider leverages `React.createContext` (source: [`facebook/react/packages/react/src/ReactContext.js`](https://github.com/facebook/react/blob/main/facebook/react/packages/react/src/ReactContext.js)) to distribute the store via React's Context API.
- **Hook integration:** `useSelector` and `useDispatch` access the store through `React.useContext`, eliminating the need for manual store passing.
- **Testing strategy:** Use `configureStore` with `preloadedState` and wrap components in a test-specific Provider to simulate state scenarios.
- **SSR compatibility:** Maintain consistent Provider wrapping across server and client environments with proper store hydration.

## Frequently Asked Questions

### Can I use multiple Redux stores in one React application?

Yes, but you should only do so when you have independent domains such as micro-frontends that require complete isolation. Nest multiple `<Provider>` components, keeping in mind that inner providers shadow outer ones for their child subtrees. For most applications, a single store with properly sliced reducers provides better performance and simpler debugging.

### How does the Redux Provider connect to React's Context API?

The `react-redux` library calls `React.createContext` (as defined in [`packages/react/src/ReactContext.js`](https://github.com/facebook/react/blob/main/packages/react/src/ReactContext.js) in the `facebook/react` repository) to create a context object. The `<Provider>` component renders a `Context.Provider` with your store as the value, and hooks like `useSelector` consume this context via `React.useContext` to retrieve the store reference for state selection and dispatching.

### What is the correct way to configure the Provider for server-side rendering?

Create a new store instance for each server request, wrap your application with `<Provider store={store}>` during server-side `renderToString` operations, and serialize the initial state to the HTML response. On the client, rehydrate using the same initial state passed to `configureStore` to prevent UI mismatches. The provider configuration remains identical on both platforms.

### Should I use the Provider with TypeScript, and how do I maintain type safety?

Always export typed `RootState` and `AppDispatch` interfaces from your store file. When configuring hooks, create typed versions: `export const useAppDispatch = () => useDispatch<AppDispatch>()` and `export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector`. The Provider itself requires no additional TypeScript configuration beyond ensuring your store variable matches the expected store type.