State Management مع Zustand — مقدمة React

State Management مع Zustand

Zustand هي مكتبة خفيفة وسهلة لإدارة الحالة في React.

التثبيت

npm install zustand

إنشاء Store

import { create } from 'zustand';

const useStore = create((set, get) => ({
  // الحالة
  count: 0,
  user: null,
  
  // الإجراءات
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
  
  // يمكن الوصول للحالة داخل الإجراءات
  doubleCount: () => {
    const currentCount = get().count;
    set({ count: currentCount * 2 });
  },
}));

export default useStore;

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

function Counter() {
  // استخدام جزء من الحالة
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  
  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={increment}>زيادة</button>
    </div>
  );
}

function UserInfo() {
  const user = useStore((state) => state.user);
  const logout = useStore((state) => state.logout);
  
  if (!user) return <p>مرحباً زائر</p>;
  
  return (
    <div>
      <p>مرحباً {user.name}</p>
      <button onClick={logout}>تسجيل خروج</button>
    </div>
  );
}

Persist (حفظ في localStorage)

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useSettingsStore = create(
  persist(
    (set) => ({
      theme: 'light',
      language: 'ar',
      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'settings-storage', // اسم المفتاح في localStorage
    }
  )
);

import { create } from 'zustand';

// Cart Store للتسوق
const useCartStore = create((set, get) => ({
  items: [],
  
  addItem: (product) => set((state) => {
    const existing = state.items.find(i => i.id === product.id);
    if (existing) {
      return {
        items: state.items.map(i => 
          i.id === product.id 
            ? { ...i, quantity: i.quantity + 1 }
            : i
        )
      };
    }
    return { items: [...state.items, { ...product, quantity: 1 }] };
  }),
  
  removeItem: (productId) => set((state) => ({
    items: state.items.filter(i => i.id !== productId)
  })),
  
  clearCart: () => set({ items: [] }),
  
  get total() {
    return get().items.reduce((sum, item) => 
      sum + item.price * item.quantity, 0
    );
  }
}));

// الاستخدام
function Cart() {
  const items = useCartStore((s) => s.items);
  const total = useCartStore((s) => s.total);
  const clearCart = useCartStore((s) => s.clearCart);
  
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name} × {item.quantity}</div>
      ))}
      <p>المجموع: {total} ريال</p>
      <button onClick={clearCart}>إفراغ السلة</button>
    </div>
  );
}