zustand-state-management

Status: Production Ready ✅ Last Updated: 2025-10-24 Latest Version: zustand@5.0.8 Dependencies: React 18+, TypeScript 5+

CRITICAL: Notice the double parentheses create ()() - this is required for TypeScript with middleware.

✅ Use create ()() (double parentheses) in TypeScript for middleware compatibility ✅ Define separate interfaces for state and actions ✅ Use selector functions to extract specific state slices ✅ Use set with updater functions for derived state: set((state) => ({ count: state.count + 1 })) ✅ Use unique names for persist middleware storage keys

إعداد تم اختباره على الإنتاج لإدارة حالة Zustand في تطبيقات React باستخدام TypeScript. توفر هذه المهارة أنماطًا شاملة لبناء حالة عالمية آمنة وقابلة للتطوير. يُستخدم عندما: إعداد الحالة العالمية في React، والترحيل من Redux أو context API، والتنفيذ حالة الثبات مع localStorage، وتكوين TypeScript مع Zustand، باستخدام نمط الشرائح للمتاجر المعيارية، إضافة أدوات التطوير الوسيطة لتصحيح الأخطاء، والتعامل مع ترطيب Next.js SSR، أو مواجهة أخطاء ترطيب، أو مشكلات في استدلال TypeScript، أو استمرار مشكلات البرامج الوسيطة. يمنع 5 مشكلات موثقة: عدم تطابق ترطيب Next.js، والأقواس المزدوجة في TypeScript أخطاء في بناء الجملة، وأخطاء تصدير البرامج الوسيطة المستمرة، وحلقات العرض اللانهائية، ونمط الشرائح اكتب فشل الاستدلال. الكلمات الرئيسية: zustand، إدارة الحالة، حالة التفاعل، حالة TypeScript، البرامج الوسيطة المستمرة، أدوات التطوير، نمط الشرائح، الحالة العالمية، خطافات التفاعل، إنشاء متجر، استخدام BoundStore، StateCreator، خطأ في الترطيب، عدم تطابق محتوى النص، عرض لا نهائي، تخزين محلي، تخزين الجلسة، البرامج الوسيطة المدمجة، المساواة الضحلة، نمط التحديد، zustand v5 المصدر: jackspace/claudeskillz.