إنشاء أول متجر Zustand لك

مرحبًا

ما هو Zustand؟

التثبيت

npm install zustand

إنشاء مخزن

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

استخدام المخزن في مكوّن

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

صيغة selector

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

تحديث الحالة باستخدام set

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

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

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

تحديثات الحالة المتداخلة

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

قراءة المخزن خارج React

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

تحقق سريع

مراجعة

التالي