Shopping Cart

Build a cart with shared state across components using Context API.

Context APIuseReducerProps

Overview

A shopping cart is the standard project for learning the Context API because it has a real, unavoidable state-sharing problem: a `ProductList` component needs to add items to the cart, and a completely separate `CartSummary` component needs to display and update those same items — with neither one a parent of the other. Passing the cart down through props from a common ancestor would mean threading it through components that do not actually use it themselves, a pattern known as prop drilling.

Instead, this project manages the cart's state with `useReducer` — a more structured alternative to `useState` for state that changes through a small, well-defined set of actions — and exposes it through `createContext`, so `ProductList` and `CartSummary` can each reach into the cart directly, no matter how deep they are rendered.

What You'll Build

A `cartReducer` function handling `ADD_ITEM`, `REMOVE_ITEM`, and `UPDATE_QUANTITY` actions.
A `CartContext` created with `createContext` and a `CartProvider` component wrapping the app.
A custom `useCart()` hook that reads the context safely, with a clear error if used in the wrong place.
A `ProductList` component that dispatches `ADD_ITEM` without needing any cart props passed in.
A `CartSummary` component that reads live cart totals and dispatches quantity/removal changes.
Two sibling components sharing one source of truth with zero prop drilling between them.

Prerequisites

JSX basics and function components — you should be comfortable with props from a first React project (like the Todo App above).
`useState` fundamentals — `useReducer` builds directly on the same "state + a function to update it" idea.
Array methods — `find`, `map`, `filter`, and `reduce`, used throughout the reducer and the cart total calculation.
Immutable updates — spreading objects and arrays with `...` instead of mutating them in place.
`useReducer` and the Context API are new here — both are introduced from the ground up in this tutorial.

Project Structure

A `CartContext` and `CartProvider` live in their own file so any component in the tree can import and use them. `ProductList` and `CartSummary` are true siblings — both rendered directly inside `App`, next to each other — which is exactly the layout that would force prop drilling without Context.

src/
  CartContext.jsx  // createContext, cartReducer, CartProvider, and the useCart() hook
  products.js      // Static list of products available to add to the cart
  ProductList.jsx  // Reads nothing from the cart, only dispatches ADD_ITEM
  CartSummary.jsx  // Reads cart items + dispatches REMOVE_ITEM / UPDATE_QUANTITY
  App.jsx          // Wraps ProductList and CartSummary in <CartProvider>
  index.css        // Shared dark-theme styling

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #1a1d23;
  color: #e8e8e8;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.shop-app { width: 100%; max-width: 480px; background: #23262e; border-radius: 10px; padding: 24px; }
.shop-app h1 { margin-bottom: 16px; font-size: 1.5rem; }
.shop-app h2 { margin: 16px 0 10px; font-size: 1.1rem; }

.product-row, .cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #3a3f4b;
}

.product-row span:first-child, .cart-row span:first-child { flex: 1; }

.product-row button, .cart-row button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #4f8cff;
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
}

.cart-row button { background: #5a3a3a; }

.cart-row input[type="number"] {
  width: 48px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #3a3f4b;
  background: #1a1d23;
  color: #e8e8e8;
  text-align: center;
}

.cart-total { margin-top: 12px; font-weight: bold; text-align: right; font-size: 1.1rem; }
.cart-empty { color: #888; padding: 8px 0; }

Step 1: Define Product Data and Cart State Shape

The product catalog is static data, not state — it never changes while the app runs, so it lives as a plain exported array rather than in `useState`. The cart itself is designed as `{ items: [...] }`, where each cart item is a product's fields plus a `quantity` — kept as a flat array so the reducer can work with ordinary array methods.

// products.js
export const PRODUCTS = [
  { id: 1, name: 'Wireless Mouse', price: 24.99 },
  { id: 2, name: 'Mechanical Keyboard', price: 89.99 },
  { id: 3, name: 'USB-C Hub', price: 34.5 },
  { id: 4, name: 'Laptop Stand', price: 42.0 },
];

// Cart state shape, used throughout CartContext.jsx:
// { items: [{ id, name, price, quantity }] }
//
// Deliberately a flat array (not an object keyed by id) so the reducer below
// can lean on plain array methods (find/map/filter) instead of juggling
// object-key bookkeeping

Step 2: Write the Cart Reducer

A reducer is a function that takes the current state and an "action" describing what happened, and returns the *next* state — it never mutates the state it was given. `useReducer` is a better fit than `useState` here because the cart has several distinct kinds of updates (add, remove, change quantity), and a `switch` on `action.type` keeps all of that update logic in one predictable, testable place instead of scattered across components.

// CartContext.jsx (part 1 of 2)
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find((item) => item.id === action.product.id);

      if (existing) {
        // Already in the cart — bump its quantity instead of adding a
        // duplicate row. map() keeps every OTHER item's object reference
        // exactly the same, since only the matching one actually changed
        return {
          items: state.items.map((item) =>
            item.id === action.product.id ? { ...item, quantity: item.quantity + 1 } : item
          ),
        };
      }

      // First time this product is added — spread its fields and start quantity at 1
      return { items: [...state.items, { ...action.product, quantity: 1 }] };
    }

    case 'REMOVE_ITEM':
      return { items: state.items.filter((item) => item.id !== action.id) };

    case 'UPDATE_QUANTITY': {
      if (action.quantity < 1) {
        // Treat "quantity 0 or less" as a removal rather than leaving a
        // useless zero-quantity row in the cart
        return { items: state.items.filter((item) => item.id !== action.id) };
      }
      return {
        items: state.items.map((item) =>
          item.id === action.id ? { ...item, quantity: action.quantity } : item
        ),
      };
    }

    default:
      // Throwing on an unrecognized action type surfaces a typo'd
      // action.type immediately during development, instead of the cart
      // silently doing nothing and leaving a bug to track down later
      throw new Error('Unknown cart action type: ' + action.type);
  }
}

const initialCartState = { items: [] };

How State Flows Through the Reducer

Click Run to see what this code prints.

Step 3: Create CartContext and a Provider

`createContext` makes a channel that any descendant component can read from, without it being passed down through props at every level. `CartProvider` is the component that actually holds the `useReducer` call and hands both `items` and `dispatch` to everything inside it via `<CartContext.Provider value={...}>`.

// CartContext.jsx (part 2 of 2)
import { createContext, useContext, useReducer } from 'react';

// No default value is passed to createContext (it defaults to undefined) —
// that's intentional. It lets useCart() below detect and clearly warn about
// a component that was rendered outside <CartProvider> by mistake
const CartContext = createContext(undefined);

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initialCartState);

  // Every descendant gets both the current items and the dispatch function.
  // dispatch never changes identity between renders, so handing it down
  // never causes extra re-renders on its own
  return (
    <CartContext.Provider value={{ items: state.items, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

// A small custom hook wrapping useContext — every component that needs cart
// data calls useCart() instead of importing CartContext directly, and gets a
// clear error message if it's ever rendered in the wrong place
export function useCart() {
  const context = useContext(CartContext);
  if (context === undefined) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
}

Step 4: Build the Product List

`ProductList` only ever *dispatches* — it never reads `items` — so it re-renders only when its own state changes, which in this component is never, since `PRODUCTS` is static. Notice it receives zero cart-related props: `useCart()` reaches straight into context instead.

// ProductList.jsx
import { PRODUCTS } from './products';
import { useCart } from './CartContext';

function ProductList() {
  const { dispatch } = useCart(); // only needs to dispatch actions, never reads items itself

  return (
    <div className="product-list">
      <h2>Products</h2>
      {PRODUCTS.map((product) => (
        <div className="product-row" key={product.id}>
          <span>{product.name}</span>
          <span>{product.price.toFixed(2)}</span>
          <button type="button" onClick={() => dispatch({ type: 'ADD_ITEM', product })}>
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

Step 5: Build the Cart Summary

`CartSummary` reads `items` straight from `useCart()` — no prop passed it that data from `App`, and no prop connects it to `ProductList` either. The running total is computed with `reduce()` on every render rather than tracked as its own state, the same "derive, don't duplicate" principle used for `filteredTasks` in the Todo App project.

// CartSummary.jsx
import { useCart } from './CartContext';

function CartSummary() {
  const { items, dispatch } = useCart(); // reads items directly from context — no common-ancestor props involved

  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);

  if (items.length === 0) {
    return <p className="cart-empty">Your cart is empty.</p>;
  }

  return (
    <div className="cart-summary">
      <h2>Cart</h2>
      {items.map((item) => (
        <div className="cart-row" key={item.id}>
          <span>{item.name}</span>
          <input
            type="number"
            min="1"
            value={item.quantity}
            onChange={(event) =>
              dispatch({
                type: 'UPDATE_QUANTITY',
                id: item.id,
                quantity: Number(event.target.value), // input values are always strings; convert back to a number for the reducer
              })
            }
          />
          <span>{(item.price * item.quantity).toFixed(2)}</span>
          <button type="button" onClick={() => dispatch({ type: 'REMOVE_ITEM', id: item.id })}>
            Remove
          </button>
        </div>
      ))}
      <p className="cart-total">Total: {total.toFixed(2)}</p>
    </div>
  );
}

export default CartSummary;

Step 6: Wire It Together in App

The only thing `App` does with the cart is decide where `<CartProvider>` starts. Every component nested inside it — `ProductList` and `CartSummary` alike — automatically gets access to the same cart state, which is exactly what eliminates the prop drilling this project set out to avoid.

// App.jsx
import { CartProvider } from './CartContext';
import ProductList from './ProductList';
import CartSummary from './CartSummary';

function App() {
  return (
    // Wrapping BOTH ProductList and CartSummary in the SAME provider is what
    // lets them share cart state without App holding or forwarding it itself
    <CartProvider>
      <div className="shop-app">
        <h1>Shop</h1>
        <ProductList />
        <CartSummary />
      </div>
    </CartProvider>
  );
}

export default App;

Complete Code

Here is the complete project — every file, fully assembled from the steps above, in the order they would sit in a real project.

// products.js
export const PRODUCTS = [
  { id: 1, name: 'Wireless Mouse', price: 24.99 },
  { id: 2, name: 'Mechanical Keyboard', price: 89.99 },
  { id: 3, name: 'USB-C Hub', price: 34.5 },
  { id: 4, name: 'Laptop Stand', price: 42.0 },
];

// CartContext.jsx
import { createContext, useContext, useReducer } from 'react';

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find((item) => item.id === action.product.id);
      if (existing) {
        return {
          items: state.items.map((item) =>
            item.id === action.product.id ? { ...item, quantity: item.quantity + 1 } : item
          ),
        };
      }
      return { items: [...state.items, { ...action.product, quantity: 1 }] };
    }
    case 'REMOVE_ITEM':
      return { items: state.items.filter((item) => item.id !== action.id) };
    case 'UPDATE_QUANTITY': {
      if (action.quantity < 1) {
        return { items: state.items.filter((item) => item.id !== action.id) };
      }
      return {
        items: state.items.map((item) =>
          item.id === action.id ? { ...item, quantity: action.quantity } : item
        ),
      };
    }
    default:
      throw new Error('Unknown cart action type: ' + action.type);
  }
}

const initialCartState = { items: [] };
const CartContext = createContext(undefined);

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initialCartState);
  return (
    <CartContext.Provider value={{ items: state.items, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  const context = useContext(CartContext);
  if (context === undefined) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
}

// ProductList.jsx
import { PRODUCTS } from './products';
import { useCart } from './CartContext';

function ProductList() {
  const { dispatch } = useCart();

  return (
    <div className="product-list">
      <h2>Products</h2>
      {PRODUCTS.map((product) => (
        <div className="product-row" key={product.id}>
          <span>{product.name}</span>
          <span>{product.price.toFixed(2)}</span>
          <button type="button" onClick={() => dispatch({ type: 'ADD_ITEM', product })}>
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

// CartSummary.jsx
import { useCart } from './CartContext';

function CartSummary() {
  const { items, dispatch } = useCart();
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);

  if (items.length === 0) {
    return <p className="cart-empty">Your cart is empty.</p>;
  }

  return (
    <div className="cart-summary">
      <h2>Cart</h2>
      {items.map((item) => (
        <div className="cart-row" key={item.id}>
          <span>{item.name}</span>
          <input
            type="number"
            min="1"
            value={item.quantity}
            onChange={(event) =>
              dispatch({ type: 'UPDATE_QUANTITY', id: item.id, quantity: Number(event.target.value) })
            }
          />
          <span>{(item.price * item.quantity).toFixed(2)}</span>
          <button type="button" onClick={() => dispatch({ type: 'REMOVE_ITEM', id: item.id })}>
            Remove
          </button>
        </div>
      ))}
      <p className="cart-total">Total: {total.toFixed(2)}</p>
    </div>
  );
}

export default CartSummary;

// App.jsx
import { CartProvider } from './CartContext';
import ProductList from './ProductList';
import CartSummary from './CartSummary';

function App() {
  return (
    <CartProvider>
      <div className="shop-app">
        <h1>Shop</h1>
        <ProductList />
        <CartSummary />
      </div>
    </CartProvider>
  );
}

export default App;

Sample Run

Sample Interaction

Click Run to see what this code prints.

Extend This Project

Add a "Checkout" button in `CartSummary` that dispatches a `CLEAR_CART` action and shows a thank-you message.
Persist `state.items` to `localStorage` inside `CartProvider` with a `useEffect`, the same pattern used in the Todo App project.
Add quantity stepper `+`/`-` buttons instead of a raw number input, dispatching `UPDATE_QUANTITY` with `item.quantity + 1` or `- 1`.
Show a live item-count badge (total quantity across all items) in a navbar component that also consumes `useCart()`.
Split the reducer into smaller action creator functions (e.g. `addItem(product)`) so components call `addItem(product)` instead of building action objects by hand.

Summary

You built a shopping cart where two sibling components — `ProductList` and `CartSummary` — share one piece of state through the Context API, with `useReducer` keeping every update to that state funneled through a single, predictable function. This combination — reducer for the "how state changes" logic, Context for "who can reach it" — is the standard shape of shared state in small-to-medium React apps that don't need a full external state-management library.