Provider in React Redux

A Redux store holds app state outside of React. The Provider component from React Redux makes that store reachable from every component below it.

All React Redux examples React Redux: usage and stats

Provider in React Redux: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Create a store. createStore(rootReducer) from redux builds the store from a reducer. This reducer only returns its initial state, which holds a user and a cart. [1]
Wrap the app in Provider. <Provider store={store}> wraps everything App renders. Header and Summary get no props, yet both can reach the store. [1]
Read from any component. Each component calls useSelector with a small function that picks one value, like state.user.name or state.cart.items. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { createStore } from "redux";
import { Provider, useSelector } from "react-redux";

const initialState = {
  user: { name: "Ada Lovelace", plan: "Pro" },
  cart: { items: 3, total: 59.9 },
};

// A reducer that only returns its state is enough to create a store
function rootReducer(state = initialState) {
  return state;
}

const store = createStore(rootReducer);

const page = { minHeight: "100vh", background: "#111", display: "flex", alignItems: "center",
  justifyContent: "center", fontFamily: "system-ui, sans-serif" };
const card = { background: "#1e1e1e", color: "#e5e7eb", border: "1px solid #333", borderRadius: 12,
  padding: "18px 22px", boxSizing: "border-box" };
const btn = { padding: "6px 12px", borderRadius: 8, border: "1px solid #444", background: "#2a2a2a",
  color: "#f3f4f6", fontSize: 14, cursor: "pointer" };

function Header() {
  const name = useSelector((state) => state.user.name);
  const items = useSelector((state) => state.cart.items);
  return (
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 17 }}>
      <b>Hi, {name}</b>
      <span style={{ background: "#2563eb", borderRadius: 999, padding: "2px 10px" }}>Cart: {items}</span>
    </div>
  );
}

function Summary() {
  const plan = useSelector((state) => state.user.plan);
  const total = useSelector((state) => state.cart.total);
  return <p style={{ color: "#9ca3af" }}>Plan: {plan} &middot; Cart total: ${total.toFixed(2)}</p>;
}

export default function App() {
  return (
    <Provider store={store}>
      <div style={page}>
        <div style={{ ...card, width: 380 }}>
          <Header />
          <Summary />
          <pre style={{ margin: 0, fontSize: 12, color: "#86efac" }}>
            {JSON.stringify(store.getState(), null, 2)}
          </pre>
        </div>
      </div>
    </Provider>
  );
}

Ctrl/⌘ + Enter runs

Change the name in initialState and both the header and the state dump update. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-redux 9.3.0, react 19.3.0, react-dom 19.3.0, redux 5.0.1. Needs WebGL.

More React Redux examples

useSelector and useDispatch counter in React Redux Selecting by prop with useSelector in React Redux shallowEqual with useSelector in React Redux Derived values with useSelector in React Redux

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Redux? Ask AgentGid →