zustand-store-ts
بناء متاجر Zustand آمنة نوعياً لـ React
إدارة حالة React بأنواع TypeScript صحيحة وبرمجيات وسيطة معقدة. توفر هذه المهارة أنماطاً مثبتة لإنشاء متاجر Zustand قابلة للصيانة مع subscribeWithSelector وفصل واضح بين الحالة/الإجراءات.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "zustand-store-ts". Create a counter store with increment, decrement, and reset actions
النتيجة المتوقعة:
واجهة متجر TypeScript مع حالة count وثلاث طرق إجراءات، بالإضافة إلى تنفيذ create() مع برمجية subscribeWithSelector الوسيطة مغلفة حول تعريف المتجر.
استخدام "zustand-store-ts". How do I subscribe to only the userId change?
النتيجة المتوقعة:
استخدم store.subscribe((state) => state.userId, (id) => console.log(id)) لتلقي استدعاءات فقط عندما يتغير userId، وتجنب التنفيذ غير الضروري لتحديثات الحالة الأخرى.
التدقيق الأمني
آمنStatic analysis flagged 19 patterns (14 external_commands, 5 blocker/crypto), but all are false positives. The backticks detected are markdown code fence delimiters for TypeScript examples, not shell execution. The cryptographic warnings reference 'subscribeWithSelector' text patterns, not actual crypto algorithms. This is a documentation-only skill with code examples for Zustand state management.
درجة الجودة
ماذا يمكنك بناءه
مطور React يبني حالة عامة
إنشاء متجر Zustand جديد لإدارة الحالة على مستوى التطبيق مثل جلسات المستخدم أو السمات أو ميزات الرايات مع دعم كامل لـ TypeScript.
فريق يوحد أنماط الحالة
إنشاء أنماط متاجر متسقة عبر قاعدة الكود مع كتابة صحيحة واستخدام البرمجيات الوسيطة وأفضل ممارسات الاشتراك.
الانتقال من Redux إلى Zustand
تحويل متاجر Redux الحالية إلى متاجر Zustand خفيفة الوزن مع الحفاظ على أنواع TypeScript وتحسين إعادة التصيير.
جرّب هذه الموجهات
Create a Zustand store template for a shopping cart with items array and total price calculation. Use TypeScript and include the subscribeWithSelector middleware.
Generate a user store with async login and logout actions. Include proper TypeScript interfaces for state and actions, with loading and error states.
Create a project management store with tasks, filters, and computed selectors. Show how to use individual selectors to prevent unnecessary re-renders.
Show how to subscribe to store changes outside React components for logging or integration with external systems like analytics.
أفضل الممارسات
- غلف المتاجر دائماً ببرمجية subscribeWithSelector الوسيطة للاشتراكات الدقيقة
- عرّف واجهات منفصلة للحالة والإجراءات، ثم اجمعها لنوع المتجر
- استخدم دوال المحدد في المكونات للاشتراك فقط في شرائح الحالة المطلوبة
تجنب
- إلغاء هيكلة المتجر بالكامل في المكونات يسبب إعادة تصيير عند أي تغيير حالة
- إنشاء متاجر بدون واجهات TypeScript يفقد فوائد أمان الأنواع
- الاشتراك في كائن الحالة بالكامل عند الحاجة إلى خاصية واحدة فقط