Zustand skill: 10 store patterns you can ship

The prompt

Create a typed Zustand store in `src/store/cart/index.ts`. State: `items: CartItem[]`, `couponCode: string | null`. Actions in verb form: `addItem(item)`, `removeItem(id)`, `applyCoupon(code)`, `clear()`. Type it with a `CartState` interface and a `CartAction` interface combined as the store type, and use `create<CartState & CartAction>()`. Export per-field selector hooks — `useCartItems`, `useCartTotal` (derived from items) — so a component reading the total never re-renders when the coupon changes.

What slides.md looks like

interface CartState {
  items: CartItem[];
  couponCode: string | null;
}
interface CartAction {
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  clear: () => void;
}
export const useCartStore = create<CartState & CartAction>()((set) => ({
  items: [],
  couponCode: null,
  addItem: (item) => set((s) => ({ items: [...s.items, item] })),
  removeItem: (id) =>
    set((s) => ({ items: s.items.filter((i) => i.id !== id) })),
  clear: () => set({ items: [], couponCode: null }),
}));

// Selectors keep re-renders narrow.
export const useCartItems = () => useCartStore((s) => s.items);
export const useCartTotal = () =>
  useCartStore((s) => s.items.reduce((sum, i) => sum + i.price, 0));

Pairs with

The prompt

Refactor `src/store/chat/index.ts` into slices. Create `messageSlice` and `inputSlice`, each typed as `StateCreator<ChatStore, [], [], MessageSlice>` returning its own state plus actions. Build the combined store with `create<ChatStore>()((...a) => ({ ...messageSlice(...a), ...inputSlice(...a) }))`. Keep public actions in verb form (`sendMessage`, `editInput`) and follow LobeHub's naming: ID arrays like `messageEditingIds`, active identifiers like `activeMessageId`, init flags like `messagesInit`.

What slides.md looks like

export interface MessageSlice {
  messages: Message[];
  activeMessageId: string | null;
  sendMessage: (text: string) => void;
}
export const messageSlice: StateCreator<
  ChatStore, [], [], MessageSlice
> = (set, get) => ({
  messages: [],
  activeMessageId: null,
  sendMessage: (text) =>
    set((s) => ({ messages: [...s.messages, build(text)] })),
});

export type ChatStore = MessageSlice & InputSlice;
export const useChatStore = create<ChatStore>()((...a) => ({
  ...messageSlice(...a),
  ...inputSlice(...a),
}));

Pairs with

The prompt

Add `persist` to `src/store/settings/index.ts`. Persist only `theme` and `sidebarCollapsed` — exclude the transient `isSaving` flag and `lastSyncedAt` via `partialize`. Use `createJSONStorage(() => localStorage)`, set `name: 'settings'` and `version: 1`, and add a `migrate` stub that maps version 0 to 1. Note in a comment that reads before hydration finishes return the initial state, and show how to gate on `useSettingsStore.persist.hasHydrated()`.

What slides.md looks like

export const useSettingsStore = create<SettingsStore>()(
  persist(
    (set) => ({
      theme: 'system',
      sidebarCollapsed: false,
      isSaving: false,
      setTheme: (theme) => set({ theme }),
    }),
    {
      name: 'settings',
      version: 1,
      storage: createJSONStorage(() => localStorage),
      // Only these keys reach localStorage.
      partialize: (s) => ({
        theme: s.theme,
        sidebarCollapsed: s.sidebarCollapsed,
      }),
      migrate: (persisted, version) =>
        version === 0 ? { ...(persisted as object) } : persisted,
    },
  ),
);

Pairs with

The prompt

Convert `src/store/board/index.ts` to use the `immer` middleware so I can mutate nested draft state directly. The state is a Kanban board: `columns: Record<string, { title: string; cardIds: string[] }>` and `cards: Record<string, Card>`. Add `moveCard(cardId, fromCol, toCol, index)` that splices the id out of one column's `cardIds` and into another's by index — written as plain draft mutations, not spreads. Keep the middleware order: `immer` is the innermost wrapper.

What slides.md looks like

export const useBoardStore = create<BoardStore>()(
  immer((set) => ({
    columns: {},
    cards: {},
    moveCard: (cardId, fromCol, toCol, index) =>
      set((draft) => {
        const from = draft.columns[fromCol].cardIds;
        from.splice(from.indexOf(cardId), 1);
        draft.columns[toCol].cardIds.splice(index, 0, cardId);
      }),
  })),
);

Pairs with

The prompt

Add an async `fetchTopics()` action to `src/store/topic/index.ts`. It sets `topicsLoading = true`, calls `topicService.getTopics()`, commits the result to `topics`, sets `topicsInit = true`, and clears the loading flag in a `finally`. On error, store the message in `topicsError`. Follow LobeHub's init-flag convention so the UI can distinguish 'never loaded' from 'loaded but empty'. Keep the action self-contained — no try/catch leaking into components.

What slides.md looks like

fetchTopics: async () => {
  set({ topicsLoading: true, topicsError: null });
  try {
    const topics = await topicService.getTopics();
    set({ topics, topicsInit: true });
  } catch (e) {
    set({ topicsError: (e as Error).message });
  } finally {
    set({ topicsLoading: false });
  }
},

// Component reads three flags, owns none of the logic:
const loading = useTopicStore((s) => s.topicsLoading);
const init = useTopicStore((s) => s.topicsInit);

Pairs with

The prompt

Add the `subscribeWithSelector` middleware to `src/store/player/index.ts` and register a subscription outside React that fires only when `currentTrackId` changes — not on every state update. In the listener, log a `track_played` analytics event with the new and previous id. Show the `equalityFn` third argument and return the unsubscribe function so a teardown can call it. Keep the subscription in a module-level `initPlayerEffects()` the app calls once.

What slides.md looks like

export const usePlayerStore = create<PlayerStore>()(
  subscribeWithSelector((set) => ({
    currentTrackId: null,
    play: (id) => set({ currentTrackId: id }),
  })),
);

export function initPlayerEffects() {
  return usePlayerStore.subscribe(
    (s) => s.currentTrackId,
    (id, prevId) => {
      if (id) analytics.track('track_played', { id, prevId });
    },
  );
}

Pairs with

The prompt

Migrate the Redux `authSlice` in `src/redux/auth.ts` to a Zustand store at `src/store/auth/index.ts`. Map each reducer case to a verb-form action: `login.fulfilled` becomes an async `login(creds)`, `logout` becomes `logout()`. Replace `useSelector((s) => s.auth.user)` call sites with a `useAuthUser` selector hook. Remove the `<Provider>` and the dispatch plumbing. Do not keep both stores live at once — port the slice, update its call sites, delete the Redux file in the same pass.

What slides.md looks like

// Before (Redux): dispatch(login(creds)); useSelector(s => s.auth.user)
// After (Zustand): one store, no provider, no dispatch.
export const useAuthStore = create<AuthStore>()((set) => ({
  user: null,
  status: 'idle',
  login: async (creds) => {
    set({ status: 'loading' });
    const user = await authService.login(creds);
    set({ user, status: 'authed' });
  },
  logout: () => set({ user: null, status: 'idle' }),
}));
export const useAuthUser = () => useAuthStore((s) => s.user);

Pairs with

The prompt

In `src/store/pointer/index.ts`, expose the store's `getState`/`setState` so a pointermove handler can write `x`/`y` at 60fps without re-rendering React. Show a component that subscribes transiently — it reads the live value via `usePointerStore.subscribe` into a ref and updates a DOM node directly, instead of calling the selector hook. Note where the trade-off lands: no re-render, but the value is read imperatively, so it's for visuals, not for state React must reconcile.

What slides.md looks like

// Write at 60fps, zero React renders:
window.addEventListener('pointermove', (e) => {
  usePointerStore.setState({ x: e.clientX, y: e.clientY });
});

// Read transiently into a ref — no selector subscription:
function Cursor() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(
    () =>
      usePointerStore.subscribe((s) => {
        if (ref.current)
          ref.current.style.transform = `translate(${s.x}px,${s.y}px)`;
      }),
    [],
  );
  return <div ref={ref} className="cursor" />;
}

Pairs with

The prompt

Add the `devtools` middleware to `src/store/chat/index.ts` and give every `set` call a third action-name argument so the Redux DevTools timeline reads 'sendMessage', 'editInput', etc. instead of anonymous. Set `{ name: 'chat-store' }` so it gets its own DevTools instance, and gate it behind `process.env.NODE_ENV !== 'production'` so the wrapper is stripped in prod. Show the correct middleware order when combined with persist: `devtools(persist(...))`.

What slides.md looks like

export const useChatStore = create<ChatStore>()(
  devtools(
    (set) => ({
      messages: [],
      sendMessage: (text) =>
        set(
          (s) => ({ messages: [...s.messages, build(text)] }),
          false,
          'sendMessage', // labeled in Redux DevTools
        ),
    }),
    { name: 'chat-store', enabled: process.env.NODE_ENV !== 'production' },
  ),
);

Pairs with

The prompt

Write Vitest tests for `useCartStore` in `src/store/cart/index.test.ts`. Capture the initial state and reset it in `beforeEach` with `useCartStore.setState(initialState, true)`. Test `addItem` appends, `removeItem` filters by id, and the `useCartTotal` selector sums prices — each by calling actions through `getState()` and asserting the result. No `@testing-library/react`; this is pure store logic. Mock the coupon service with `vi.fn()` for the async `applyCoupon` path.

What slides.md looks like

import { useCartStore } from './index';

const initial = useCartStore.getState();
beforeEach(() => useCartStore.setState(initial, true));

it('addItem appends an item', () => {
  useCartStore.getState().addItem({ id: 'a', price: 10 });
  expect(useCartStore.getState().items).toHaveLength(1);
});

it('removeItem filters by id', () => {
  const { addItem, removeItem } = useCartStore.getState();
  addItem({ id: 'a', price: 10 });
  removeItem('a');
  expect(useCartStore.getState().items).toEqual([]);
});

Pairs with