Coding exercise: create a shopping cart in React.

React practical coding · Freshers and experienced

Model answer

A reducer suits a cart well because it has several actions on one piece of state. Store items by id with a quantity, and work out the total during render.

function cartReducer(state, action) {
  switch (action.type) {
    case 'add': {
      const found = state.find((i) => i.id === action.item.id);
      return found
        ? state.map((i) => (i.id === found.id ? { ...i, qty: i.qty + 1 } : i))
        : [...state, { ...action.item, qty: 1 }];
    }
    case 'remove': return state.filter((i) => i.id !== action.id);
    case 'qty': return state.map((i) => (i.id === action.id ? { ...i, qty: Math.max(1, action.qty) } : i));
    default: return state;
  }
}
function Cart({ catalog }) {
  const [cart, dispatch] = useReducer(cartReducer, []);
  const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
  return (
    <>
      {catalog.map((p) => <button key={p.id} onClick={() => dispatch({ type: 'add', item: p })}>Add {p.name}</button>)}
      <ul>{cart.map((i) => (
        <li key={i.id}>{i.name} × {i.qty}
          <button onClick={() => dispatch({ type: 'remove', id: i.id })}>Remove</button></li>))}</ul>
      <p>Total: {total.toFixed(2)}</p>
    </>
  );
}

To share the cart across pages, put the reducer in a context provider and save it to localStorage. Prices must be checked again on the server at checkout.

Tips

Practise it yourself in the React and Angular code playground.

Learn this topic

React.js Full Course: Beginner to Advanced .

Sign in to add your own answer.

More questions