Zustand لحالة React خفيفة

ما هو Zustand؟

إنشاء مخزن

import { create } from 'zustand';

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

export const useCounterStore = create<CounterStore>((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);
  return <p>Count: {count}</p>;
}

قراءة الإجراءات

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

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

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

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

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

Slices — تركيب المخازن الكبيرة

Middleware: persist

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

Middleware: devtools

Zustand مقابل Redux Toolkit

Selectors والأداء

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

تحقّق سريعًا

مراجعة: Zustand