Challenge: Zustand store

Write a cart store and connect it to two components.

Challenge: Zustand store

In this challenge you will write a state store with Zustand. The create function returns a hook; components call it and subscribe to the relevant slice.

A counter store holds count and increment. You update with set({ count: count + 1 }). A selector subscribes only to the needed slice.

Exercise Write the Zustand store

Write a useCounter store. Import create. Define the store with create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })) and export it.

Show example solution

import { create } from 'zustand';

const useCounter = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));
export default useCounter;

Test yourself

How do you update state in Zustand?
- store.state = newState
- With the set function
- With dispatch
- With useState
Show answer

With the set function — The set function updates state.

Fill in the blank: create a Zustand store

import { create } from 'zustand';

const useCounter = ____((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Show answer

import { create } from 'zustand';

const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Next lesson: Challenge: Form and validation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies