أنماط تحديد أنواع مخازن Zustand

لماذا نُنمّط Zustand؟

import { create } from "zustand";

مخزن مُنمّط أساسي

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

قراءة حالة المخزن

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

فصل الحالة عن الإجراءات

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

الإجراءات غير المتزامنة في Zustand

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

تنميط برمجية immer الوسيطة

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

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

برمجية devtools الوسيطة

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

تنميط المخزن المستمر

import { persist } from "zustand/middleware";

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

نمط الأجزاء المُنمّطة

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

الاشتراك خارج React

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

مراجعة: تنميط Zustand

تحقق سريع

ما تعلمتموه