Project: Cart management

Review the goal and steps of the cart management project.

Project: Cart management

In this project we'll build a cart management system step by step. Three lessons: cart reducer, cart context, and add-to-cart UI. Each lesson builds on the previous.

State is managed with useReducer: { '{ items: [], total: 0 }' }. Actions: ADD, REMOVE, CLEAR. The reducer handles these.

Context distributes the reducer result to all components. This keeps the global cart state clean and testable. After three lessons you get a real e-commerce flow.

Three-step structure

The first lesson writes the cartReducer function: handles ADD, REMOVE, CLEAR actions via switch. Each case returns a new state object.

The second lesson writes the CartProvider component: calls useReducer, wraps with two contexts. State and dispatch are in separate contexts; so components using only dispatch don't render needlessly.

The third lesson adds a product list and cart summary. Product cards dispatch ADD; the summary reads items and total from state. This is where the three lessons merge.

Exercise Cart skeleton

Complete the skeleton. Write a CartApp component. Call useReducer(cartReducer, { '{ items: [], total: 0 }' }); destructure as [state, dispatch]. Return <main><h1>Cart</h1><p>{ '{ state.total }' } TL</p></main>. Export it.

Show example solution

import { useReducer } from "react";

function CartApp() {
  const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
  return (
    <main>
      <h1>Cart</h1>
      <p>{state.total} TL</p>
    </main>
  );
}

export default CartApp;

Test yourself

Which is NOT in the cart state?
- items
- color
- total
- ADD
Show answer

color — color is not in the state.

Cart action

To add a product to the cart, dispatch ____.

Show answer

To add a product to the cart, dispatch ADD.

Match the cart steps

cartReducer

switch
CartProvider

two contexts
ProductCard

ADD
CartSummary

total

Next lesson: Cart reducer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies