Zustand cart store

Write a cart store with Zustand.

Moving to Zustand

In this lesson you move the same cart logic to Zustand. Write a store with create, define an addItem action; components access it via the useCart hook.

Zustand does not require a provider like Redux; the store lives at module scope. This makes the code shorter and clearer.

Seeing the same logic solved with different libraries deepens your grasp of state management.

The useCart store

A Zustand store is exported as a hook. In components you read the cart with const items = useCart((s) => s.items) and get the action with const addItem = useCart((s) => s.addItem).

The set function auto-merges the new state; set((s) => ({ items: [...s.items, payload] })) appends a new item to the old list.

Zustand provides immutability automatically, similar to RTK's immer dependency; you do not have to write spread.

Exercise Write useCart store

Complete the skeleton. Define useCart store with create. State: { items: [], addItem: (product) => set((s) => ({ items: [...s.items, product] })) }. Export with export const useCart = create(...).

Show example solution

import { create } from 'zustand';

export const useCart = create((set) => ({
  items: [],
  addItem: (product) => set((s) => ({ items: [...s.items, product] })),
}));

Test yourself

What is Zustand's advantage over Redux?
```
No provider = Zustand.
```
- It runs faster
- It writes more code
- It does not require a provider
- It is only for tests
Show answer

It does not require a provider — Zustand does not require a provider.

addItem action

addItem: (product) => ____((s) => ({ items: [...s.items, product] }));

Show answer

addItem: (product) => set((s) => ({ items: [...s.items, product] }));

Zustand cart store: match the terms

create

Builds store
useCart

Returns hook
set

Updates state
selector

Relevant piece

Next lesson: Data fetching with SWR

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies