Zustand مكتبة الحالة Zustand
آخر تحديث: 2026-11-03
Zustand مكتبة الحالة Zustand
Zustand مكتبة حالة عامة بسيطة جدًا: تعرّف create متجرًا، وتستدعيه المكوّنات كـ Hook مخصّص، وتُشارَك الحالة عبر المكوّنات دون حاجة إلى Provider. جوهرها مجرد دالتين set وget، بلا قوالب نمطية، وهي البديل الرائج عن Redux في المشاريع الصغرى والمتوسطة حيث يكون متجر كامل بأفعال ومخفّضات ووسيطات كثرة مراسم.
| المجموعة | التوجيه وإدارة الحالة |
|---|---|
| النوع | مكتبة |
| منذ الإصدار | Zustand v4 / v5 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
import { create } from 'zustand'
const useStore = create((set, get) => ({
count: 0, // state
inc: () => set(s => ({ count: s.count + 1 })), // action
reset: () => set({ count: 0 })
}))
// Inside a component (no Provider required)
const count = useStore(s => s.count) // subscribe to a slice, update precisely
const inc = useStore(s => s.inc)⚙️ المعاملات
| selector | دالة اختيار الحالة عند استدعاء Hook المتجر، مثل s => s.count؛ وحذفها يشترك في المتجر كاملًا فتُعاد الرسمة عند أي تغيير. |
|---|
القيمة المرجعة：create يُعيد Hook: استدعاؤه يُعيد قطعة الحالة المختارة؛ وset تدمج الحالة وتُطلق التحديثات في المكوّنات المشتركة، وget تقرأ الحالة الأحدث.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
النقر على زر A يغيّر الرقم الذي يقرأه المكوّن B — لا يجمعهما أبٌ يمرّر props، بل مزامنة الحالة الخارجية، وهذا تمامًا ما تفعله Zustand (عرض توضيحي محاكى).💡 النقاط الأساسية
💡 نصيحة مُحدِّد يُعيد كائنًا (s => ({ a: s.a, b: s.b })) يُنتج مرجعًا جديدًا كل مرة فيسبب رسومات زائدة؛ استخدم مقارنة ضحلة أو افصله إلى عدة استدعاءات.
ℹ️ ملاحظة تزامن وسيلة persist المتجر مع localStorage، وتُدخِل وسيلة devtools Zustand في Redux DevTools — كلاهما استيراد واحد.
⚠️ تحذير set دمج ضحل: للكائنات المتداخلة افردها بنفسك بـ set(s => ({ deep: { ...s.deep, x: 1 } }))، ولا تتوقّع دمجًا عميقًا تلقائيًا.
🏷️ المزيد من التوجيه والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا لا يحتاج Zustand إلى Provider؟
ج الحالة تعيش في متغيّر على مستوى الوحدة ولا تعتمد على Context؛ وتشترك فيها المكوّنات مباشرة عبر useSyncExternalStore، فتُشارَك طبيعتها عبر المكوّنات.
س كيف أحفظ الحالة؟
ج استورد { persist } من 'zustand/middleware' ولفّ المُنشئ بـ persist(fn, { name: 'key' }) داخل create؛ فيقرأ localStorage ويكتبه تلقائيًا.
س كيف أكتب فعلًا غير متزامن؟
ج الفعل مجرد دالة: fetchUser: async () => { const data = await api(); set({ user: data }) }. لا فرق بين thunks والمخفّضات.
