React Cheatsheet 12 — Zustand

npm i zustand

import { create } from "zustand";

type CounterStore = {
  count: number;
  inc: () => void;
  dec: () => void;
  reset: () => void;
};

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
  dec: () => set((s) => ({ count: s.count - 1 })),
  reset: () => set({ count: 0 }),
}));

function Counter() {
  const count = useCounter((s) => s.count);
  const inc = useCounter((s) => s.inc);
  return <button onClick={inc}>{count}</button>;
}

import { useShallow } from "zustand/react/shallow";

const { count, inc } = useCounter(
  useShallow((s) => ({ count: s.count, inc: s.inc }))
);

const doubled = useCounter((s) => s.count * 2);

const useUsers = create<{
  users: User[];
  loading: boolean;
  fetch: () => Promise<void>;
}>((set) => ({
  users: [],
  loading: false,
  fetch: async () => {
    set({ loading: true });
    const users = await api.fetchUsers();
    set({ users, loading: false });
  },
}));

useCounter.getState().count;
useCounter.setState({ count: 100 });
useCounter.subscribe((s, prev) => console.log(s.count));

type AuthSlice = { user: User | null; login: (u: User) => void };
type CartSlice = { items: Item[]; add: (i: Item) => void };

const createAuthSlice: StateCreator<AuthSlice & CartSlice, [], [], AuthSlice> = (set) => ({
  user: null,
  login: (u) => set({ user: u }),
});

const createCartSlice: StateCreator<AuthSlice & CartSlice, [], [], CartSlice> = (set) => ({
  items: [],
  add: (i) => set((s) => ({ items: [...s.items, i] })),
});

const useStore = create<AuthSlice & CartSlice>()((...a) => ({
  ...createAuthSlice(...a),
  ...createCartSlice(...a),
}));

import { devtools } from "zustand/middleware";

const useStore = create<State>()(
  devtools((set) => ({ ... }), { name: "store" })
);

import { persist } from "zustand/middleware";

const useStore = create<State>()(
  persist(
    (set) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

persist(..., {
  name: "store",
  storage: createJSONStorage(() => sessionStorage),
});

persist(..., {
  name: "store",
  partialize: (s) => ({ count: s.count }),       // only persist count
});

npm i immer

import { immer } from "zustand/middleware/immer";

const useStore = create<State>()(
  immer((set) => ({
    items: [],
    add: (i) => set((s) => { s.items.push(i); }),         // mutate
  }))
);

import { subscribeWithSelector } from "zustand/middleware";

const useStore = create<State>()(
  subscribeWithSelector((set) => ({ count: 0 }))
);

useStore.subscribe(
  (s) => s.count,
  (newCount, prev) => console.log("changed", prev, "→", newCount),
);

import { persist, devtools, immer } from "zustand/middleware";

const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({ ... })),
      { name: "store" }
    )
  )
);