react-state-management
تنفيذ إدارة الحالة في React
يمكن أن يؤدي إدارة الحالة عبر مكونات React إلى رمز معقد وبيانات غير متسقة. توفر هذه المهارة أنماطًا شاملة لـ Redux Toolkit و Zustand و Jotai و React Query للتعامل مع الحالة المحلية والعالمية وحالة الخادم بكفاءة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-state-management". ما مكتبة إدارة الحالة التي يجب أن أستخدمها لتطبيق صغير مع احتياجات حالة عامة بسيطة؟
النتيجة المتوقعة:
للتطبيقات الصغيرة مع احتياجات حالة عامة بسيطة، Zustand أو Jotai هما خياران ممتازان:
**Zustand** يوفر أبسط واجهة برمجة تطبيقات مع minimal boilerplate:
- إنشاء متاجر مع دالة واحدة تشبه hook
- devtools مدمجة و persistence middleware
- لا حاجة لمزودين
- الاشتراكات الانتقائية تمنع إعادة العرض غير الضرورية
**Jotai** يتفوق عندما تريد تحديثات ذرية ودقيقة:
- كل قطعة حالة هي ذرة مستقلة
- derived atoms تحسب من ذرات أخرى تلقائيًا
- مثالي للت реактивية الدقيقة
اختر Zustand إذا كنت تفضل نموذج متجر موحد. اختر Jotai إذا كنت تريد تحديثات ذرية بدون غلاف متجر عام.
استخدام "react-state-management". كيف أتعامل مع حالة الخادم باستخدام React Query مقابل الحالة العميلة باستخدام Redux Toolkit؟
النتيجة المتوقعة:
احتفظ بحالة الخادم وحالة العميلة منفصلتين للوضوح وقابلية الصيانة:
**React Query تتعامل مع حالة الخادم:**
- بيانات الخادم والتخزين المؤقت والمزامنة
- إعادة الجلب التلقائي والتحديثات في الخلفية
- استراتيجية التخزين المؤقت stale-while-revalidate
- الطفرات المتفائلة مع التراجع
**Redux Toolkit تتعامل مع حالة العميلة:**
- حالة واجهة المستخدم (مودالات، شريط جانبي مفتوح/مغلق)
- حالة المصادقة (عندما لا تكون في ملفات تعريف الارتباط)
- تفضيلات وإعدادات التطبيق
- حالة عميلة مشتقة معقدة
هذا الفصل يمنع خلط الاهتمامات ويجعل التصحيح أسهل لأن كل أداة لها غرض واضح.
التدقيق الأمني
آمنAll 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
درجة الجودة
ماذا يمكنك بناءه
اختيار حل حالة لمشروع جديد
فريق تطوير يبدأ تطبيق React جديد يحتاج إلى اختيار نهج إدارة الحالة الصحيح بناءً على حجم التطبيق والمتطلبات.
تنفيذ التخزين المؤقت لبيانات الخادم
مطور الواجهة الأمامية يريد إضافة التخزين المؤقت وإعادة الجلب في الخلفية والتحديثات المتفائلة لبيانات API في تطبيق React.
ترحيل Redux القديم إلى أنماط حديثة
مطور يحتاج إلى تحديث رمز Redux المطول إلى Redux Toolkit مع Immer للتحديثات غير القابلة للتغيير.
جرّب هذه الموجهات
كيف أقوم بإعداد Redux Toolkit مع TypeScript في تطبيق React؟ أظهر كيفية إنشاء متجر مع slices و typed useDispatch و useSelector hooks.
أظهر كيفية إنشاء متجر Zustand يستمر إلى localStorage مع دعم devtools. يتضمن كيفية الوصول إلى المتجر في المكونات والتعامل مع التحديثات المكتوبة.
اكتب mutation لـ React Query يقوم بتحديثات متفائلة. يتضمن onMutable لالتقاط الحالة السابقة و onError للتراجع و onSettled لإعادة الجلب.
كيف أدمج React Query لحالة الخادم مع Zustand للحالة العميلة فقط في نفس التطبيق؟ أظهر فصل الاهتمامات وكيفية استهلاك المكونات لكليهما.
أفضل الممارسات
- ضع الحالة بأقرب مكان ممكن من حيث تُستخدم - تجنب وضع كل شيء في الحالة العامة
- استخدم محددات البيانات لاختيار البيانات المطلوبة فقط من المتاجر لمنع إعادة عرض المكونات غير الضرورية
- فصل حالة الخادم (React Query) عن حالة العميلة (Zustand/Redux) - لكل منها أنماط تحديث وعمر مختلفة
تجنب
- وضع كل قطعة حالة في الحالة العامة فقط لأنها تُستخدم من قبل مكونات متعددة - الحالة المحلية غالبًا ما تكون كافية
- تغيير الحالة مباشرة بدلاً من استخدام أنماط التحديث غير القابلة للتغيير أو مكتبات مثل Immer
- تكرار حالة الخادم في كل من React Query ومتاجر العميل - دع React Query تكون المصدر الوحيد للحقيقة لبيانات الخادم