Zustand

bun add zustand
bun add immer            # only for the immer middleware
# npm i zustand · pnpm add zustand

import { create } from "zustand";
 
type CounterState = { count: number; step: number };
type CounterActions = {
  inc: () => void;
  setStep: (step: number) => void;
  reset: () => void;
};
export type CounterStore = CounterState & CounterActions;
 
const initial: CounterState = { count: 0, step: 1 };
 
export const useCounter = create<CounterStore>()((set) => ({
  ...initial,
  inc: () => set((s) => ({ count: s.count + s.step })),
  setStep: (step) => set({ step }),
  reset: () => set(initial),
}));

import { useShallow } from "zustand/react/shallow";
import { useCounter } from "./stores/counter";
 
function Counter() {
  const count = useCounter((s) => s.count);   // atomic
  const inc = useCounter((s) => s.inc);
  const { step, setStep } = useCounter(
    useShallow((s) => ({
      step: s.step,
      setStep: s.setStep,
    })),
  ); // re-renders only when step changes
  return (
    <button
      onClick={inc}
      onContextMenu={() => setStep(step + 1)}
    >
      {count}
    </button>
  );
}

import type { StoreApi, UseBoundStore } from "zustand";
 
type WithSelectors<S> = S extends { getState: () => infer T }
  ? S & { use: { [K in keyof T]: () => T[K] } }
  : never;
 
export function createSelectors<
  S extends UseBoundStore<StoreApi<object>>,
>(store: S) {
  const s = store as WithSelectors<typeof store>;
  s.use = {} as WithSelectors<typeof store>["use"];
  for (const k of Object.keys(s.getState())) {
    (s.use as Record<string, () => unknown>)[k] = () =>
      s((state) => state[k as keyof typeof state]);
  }
  return s;
}
// const useC = createSelectors(useCounter); useC.use.count()

import { create } from "zustand";
 
type User = { id: string; name: string };
type Status = "idle" | "loading" | "error";
type UserStore = {
  user: User | null;
  prefs: { theme: "light" | "dark"; lang: string };
  status: Status;
  setTheme: (t: "light" | "dark") => void;
  load: (id: string, signal?: AbortSignal) => Promise<void>;
};
 
export const useUser = create<UserStore>()((set, get) => ({
  user: null,
  prefs: { theme: "light", lang: "en" },
  status: "idle",
  setTheme: (theme) =>
    set((s) => ({ prefs: { ...s.prefs, theme } })),
  load: async (id, signal) => {
    if (get().status === "loading") return;
    set({ status: "loading" });
    try {
      const res = await fetch(`/api/users/${id}`, {
        signal,
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const user = (await res.json()) as User;
      set({ user, status: "idle" });
    } catch {
      set({ status: "error" });
    }
  },
}));

import { create } from "zustand";
 
export const useCart = create<{ ids: string[] }>()(() => ({
  ids: [],
}));
 
export const addToCart = (id: string) =>
  useCart.setState((s) => ({ ids: [...s.ids, id] }));
export const clearCart = () => useCart.setState({ ids: [] });

import { create, type StateCreator } from "zustand";
import { devtools } from "zustand/middleware";
 
type BearSlice = { bears: number; addBear: () => void };
type FishSlice = { fish: number; eatFish: () => void };
type AppStore = BearSlice & FishSlice;
 
type Mw = [["zustand/devtools", never]];
 
type Slice<T> = StateCreator<AppStore, Mw, [], T>;
 
const createBearSlice: Slice<BearSlice> = (set) => ({
  bears: 0,
  addBear: () =>
    set((s) => ({ bears: s.bears + 1 }), false, "bear/add"),
});
 
const createFishSlice: Slice<FishSlice> = (set, get) => ({
  fish: 10,
  eatFish: () => {
    if (get().bears === 0) return;   // cross-slice read
    set((s) => ({ fish: s.fish - 1 }), false, "fish/eat");
  },
});
 
export const useApp = create<AppStore>()(
  devtools((...a) => ({
    ...createBearSlice(...a),
    ...createFishSlice(...a),
  })),
);

import { create } from "zustand";
import {
  createJSONStorage,
  persist,
} from "zustand/middleware";
 
type Settings = {
  theme: "light" | "dark";
  fontSize: number;
  draft: string;                       // not persisted
  setTheme: (t: Settings["theme"]) => void;
};
type Persisted = Pick<Settings, "theme" | "fontSize">;
 
export const useSettings = create<Settings>()(
  persist(
    (set) => ({
      theme: "light",
      fontSize: 16,
      draft: "",
      setTheme: (theme) => set({ theme }),
    }),
    {
      name: "settings",                // storage key
      storage: createJSONStorage(() => localStorage),
      partialize: (s): Persisted => ({
        theme: s.theme,
        fontSize: s.fontSize,
      }),
      version: 2,
      migrate: (old, from): Persisted => {
        // v1 stored `size`; v2 renamed it to `fontSize`
        type V1 = Partial<Persisted> & { size?: number };
        if (from < 2) {
          const v1 = old as V1;
          return {
            theme: v1.theme ?? "light",
            fontSize: v1.size ?? 16,
          };
        }
        return old as Persisted;
      },
    },
  ),
);

import { create } from "zustand";
import { devtools } from "zustand/middleware";
 
type Todo = { id: string; done: boolean };
type TodoStore = {
  todos: Todo[];
  toggle: (id: string) => void;
};
 
export const useTodos = create<TodoStore>()(
  devtools(
    (set) => ({
      todos: [],
      toggle: (id) =>
        set(
          (s) => ({
            todos: s.todos.map((t) =>
              t.id === id ? { ...t, done: !t.done } : t,
            ),
          }),
          undefined,
          "todos/toggle",      // action name in DevTools
        ),
    }),
    {
      name: "todos",
      enabled: process.env.NODE_ENV !== "production",
    },
  ),
);

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
 
type Board = {
  lists: Record<string, { title: string; cards: string[] }>;
  addCard: (listId: string, card: string) => void;
};
 
export const useBoard = create<Board>()(
  immer((set) => ({
    lists: { l1: { title: "Todo", cards: [] } },
    addCard: (listId, card) =>
      set((draft) => {
        // mutate the draft; immer makes the copy
        draft.lists[listId]?.cards.push(card);
      }),
  })),
);

import { create } from "zustand";
import {
  combine,
  subscribeWithSelector,
} from "zustand/middleware";
import { shallow } from "zustand/shallow";
 
// combine: state type inferred, no create<T>() needed
export const usePos = create(
  subscribeWithSelector(
    combine({ x: 0, y: 0 }, (set) => ({
      move: (x: number, y: number) => set({ x, y }),
    })),
  ),
);
 
const unsub = usePos.subscribe(
  (s) => [s.x, s.y] as const,
  ([x, y], [px, py]) => console.log(px, py, "->", x, y),
  { equalityFn: shallow, fireImmediately: true },
);
unsub();

import { createStore } from "zustand/vanilla";
 
type Timer = { ms: number; tick: (d: number) => void };
 
export const timerStore = createStore<Timer>()((set) => ({
  ms: 0,
  tick: (d) => set((s) => ({ ms: s.ms + d })),
}));
 
// works in workers, tests, plain TS, other frameworks
timerStore.getState().tick(16);

import { useStore } from "zustand";
import { timerStore } from "./stores/timer";
 
function Elapsed() {
  const ms = useStore(timerStore, (s) => s.ms);
  return <span>{(ms / 1000).toFixed(1)} s</span>;
}

import { createStore } from "zustand/vanilla";
 
export type CartState = { items: string[] };
export type CartActions = { add: (id: string) => void };
export type CartStore = CartState & CartActions;
 
export const createCartStore = (
  init: CartState = { items: [] },
) =>
  createStore<CartStore>()((set) => ({
    ...init,
    add: (id) => set((s) => ({ items: [...s.items, id] })),
  }));

"use client";
import { createContext, useContext, useState } from "react";
import type { ReactNode } from "react";
import { useStore } from "zustand";
import {
  createCartStore,
  type CartState,
  type CartStore,
} from "@/stores/cart-store";
 
type CartApi = ReturnType<typeof createCartStore>;
const CartContext = createContext<CartApi | null>(null);
 
export function CartStoreProvider(props: {
  children: ReactNode;
  initial?: CartState;
}) {
  const [store] = useState(() =>
    createCartStore(props.initial),
  );
  return (
    <CartContext value={store}>{props.children}</CartContext>
  );
}
 
export function useCartStore<T>(
  sel: (s: CartStore) => T,
): T {
  const store = useContext(CartContext);
  if (!store) throw new Error("Missing CartStoreProvider");
  return useStore(store, sel);
}

import type { ReactNode } from "react";
import {
  CartStoreProvider,
} from "@/providers/cart-store-provider";
 
export default function RootLayout(p: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CartStoreProvider>{p.children}</CartStoreProvider>
      </body>
    </html>
  );
}

import { afterEach, expect, test } from "bun:test";
import { useCounter } from "./stores/counter";
 
afterEach(() => {
  useCounter.setState(useCounter.getInitialState(), true);
});
 
test("inc adds step", () => {
  useCounter.getState().setStep(5);
  useCounter.getState().inc();
  expect(useCounter.getState().count).toBe(5);
});
 
test("starts fresh", () => {
  expect(useCounter.getState().count).toBe(0);
});

import { create } from "zustand";
import { persist } from "zustand/middleware";
 
type Prefs = {
  theme: "light" | "dark";
  hydrated: boolean;
  setTheme: (t: Prefs["theme"]) => void;
  setHydrated: () => void;
};
 
export const usePrefs = create<Prefs>()(
  persist(
    (set) => ({
      theme: "light",
      hydrated: false,
      setTheme: (theme) => set({ theme }),
      setHydrated: () => set({ hydrated: true }),
    }),
    {
      name: "prefs",
      partialize: (s) => ({ theme: s.theme }),
      onRehydrateStorage: (s) => () => s.setHydrated(),
    },
  ),
);

import type { StateCreator } from "zustand";
 
export type AuthSlice = {
  token: string | null;
  login: (t: string) => void;
};
export type UiSlice = {
  sidebar: boolean;
  toggleSidebar: () => void;
};
export type AppStore = AuthSlice & UiSlice;
 
export const createAuthSlice: StateCreator<
  AppStore, [], [], AuthSlice
> = (set) => ({
  token: null,
  login: (token) => set({ token, sidebar: true }),
});
// index.ts: create<AppStore>()((...a) => ({
//   ...createAuthSlice(...a), ...createUiSlice(...a) }))

import { create as baseCreate } from "zustand";
import type { StateCreator } from "zustand";
 
const resets = new Set<() => void>();
 
export const create =
  <T,>() =>
  (init: StateCreator<T>) => {
    const store = baseCreate<T>()(init);
    resets.add(() =>
      store.setState(store.getInitialState(), true),
    );
    return store;
  };
 
export const resetAllStores = () => {
  for (const reset of resets) reset();
};

import { useMemo } from "react";
import { create } from "zustand";
import { useShallow } from "zustand/react/shallow";
 
type Item = { id: string; price: number; done: boolean };
const useItems = create<{ items: Item[] }>()(() => ({
  items: [],
}));
const selectTotal = (s: { items: Item[] }) =>
  s.items.reduce((sum, i) => sum + i.price, 0);
 
export function Summary() {
  const total = useItems(selectTotal);          // number
  const openIds = useItems(
    useShallow((s) =>
      s.items.filter((i) => !i.done).map((i) => i.id),
    ),
  );
  const items = useItems((s) => s.items);       // stable ref
  const sorted = useMemo(
    () => items.toSorted((a, b) => a.price - b.price),
    [items],
  );
  return <p>{total} · {openIds.length} · {sorted.length}</p>;
}

import { createContext, useContext, useState } from "react";
import type { ReactNode } from "react";
import { createStore, useStore } from "zustand";
 
type Tabs = { active: string; select: (id: string) => void };
const makeTabs = (active: string) =>
  createStore<Tabs>()((set) => ({
    active,
    select: (id) => set({ active: id }),
  }));
type TabsApi = ReturnType<typeof makeTabs>;
const Ctx = createContext<TabsApi | null>(null);
type RootProps = { start: string; children: ReactNode };
 
export function TabsRoot(p: RootProps) {
  const [store] = useState(() => makeTabs(p.start));
  return <Ctx value={store}>{p.children}</Ctx>;
}
 
export function useTabs<T>(sel: (s: Tabs) => T): T {
  const store = useContext(Ctx);
  if (!store) throw new Error("useTabs outside TabsRoot");
  return useStore(store, sel);
}

import { create } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
 
type Chat = { unread: number; room: string };
export const useChat = create<Chat>()(
  subscribeWithSelector(() => ({
    unread: 0,
    room: "general",
  })),
);
 
const stopTitle = useChat.subscribe(
  (s) => s.unread,
  (n) => {
    document.title = n > 0 ? `(${n}) Chat` : "Chat";
  },
  { fireImmediately: true },
);
 
declare const socket: WebSocket;
socket.addEventListener("message", () =>
  useChat.setState((s) => ({ unread: s.unread + 1 })),
);
// later: stopTitle();