React Redux Examples You Can Edit and 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>
  );
}