📋 محتويات الصفحة
📖 الوصف
Zustand هي مكتبة خفيفة الوزن لإدارة الحالة في تطبيقات JavaScript. توفر حلاً بسيطاً ومباشراً باستخدام hooks مع الحفاظ على بساطة Redux بدون boilerplate الزائد. المكتبة لا تحتاج إلى Provider wrappers أو复杂的 الإعدادات. تُستخدم بشكل أساسي مع React لكن النواة الأساسية تعتمد على JavaScript العامة ويمكن تكي...
🎯 يستخدم في
مجالات استخدام هذه الأداة
إدارة الحالة العامة في تطبيقات React
State management بدون boilerplate
تطبيقات تحتاج لحالة مشتركة بين العديد من الـ components
State persists في localStorage أو sessionStorage
حالة derived (computed) من state أساسي
✨ المميزات
أبرز مميزات هذه الأداة
خفيفة جداً (~1KB)
لا تحتاج Provider أو Context wrapper
API بسيط جداً – دالة create فقط
دعم مباشر للـ devtools (Redux DevTools)
Middleware مرن (persist
devtools
immer)
لا re-render غير ضروري – optimized selectors
⚠️ العيوب
نقاط يجب مراعاتها
مصممة في الأصل لـ React – تحتاج تعديل للاستخدام في أماكن أخرى
لا توجد time-travel debugging متقدمة مثل Redux
مجتمع أصغر من Redux
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import create from 'zustand';
// Create store
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
reset: () => set({ count: 0 }),
}));
// Use in component
function Counter() {
const count = useStore((state) => state.count);
const increment = useStore((state) => state.increment);
return <button onClick={increment}>Count: {count}</button>;
}📚 أدوات أخرى في JavaScript
قد يعجبك أيضاً
Anime.js
⭐مكتبة رسوم متحركة خفيفة (Lightweight Animation Library)
Anime.js
⭐مكتبة رسوم متحركة خفيفة (Lightweight Animation Library)
Chart.js (Core)
⭐مكتبة رسوم بيانية (Charting Library)
Chart.js (Core)
⭐مكتبة رسوم بيانية (Charting Library)
D3.js
⭐مكتبة تصور البيانات (Data Visualization Library)
D3.js
⭐مكتبة تصور البيانات (Data Visualization Library)