zustand-store-ts
Créer des Stores Zustand Typés pour React
La gestion de l'état React avec des types TypeScript appropriés et des middlewares est complexe. Cette compétence fournit des modèles éprouvés pour créer des stores Zustand maintenables avec subscribeWithSelector et une séparation claire entre état et actions.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "zustand-store-ts". Create a counter store with increment, decrement, and reset actions
النتيجة المتوقعة:
Une interface de store TypeScript avec l'état count et trois méthodes d'action, plus l'implémentation create() avec le middleware subscribeWithSelector enveloppant la définition du store.
استخدام "zustand-store-ts". How do I subscribe to only the userId change?
النتيجة المتوقعة:
Utilisez store.subscribe((state) => state.userId, (id) => console.log(id)) pour recevoir des callbacks uniquement lorsque userId change, évitant ainsi les exécutions inutiles pour d'autres mises à jour d'état.
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
Développeur React Construisant un État Global
Créer un nouveau store Zustand pour gérer l'état au niveau de l'application comme les sessions utilisateur, les thèmes ou les feature flags avec un support TypeScript complet.
Équipe Standardisant les Motifs d'État
Établir des motifs de store cohérents dans une base de code avec un typage approprié, l'utilisation de middleware et les meilleures pratiques de subscription.
Migration de Redux vers Zustand
Convertir les stores Redux existants en stores Zustand légers tout en conservant les types TypeScript et en optimisant les re-rendus.
جرّب هذه الموجهات
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.
أفضل الممارسات
- Enveloppez toujours les stores avec le middleware subscribeWithSelector pour des subscriptions granulaires
- Définissez des interfaces séparées pour l'état et les actions, puis combinez-les pour le type du store
- Utilisez des fonctions de sélecteur dans les composants pour ne s'abonner qu'aux parties d'état nécessaires
تجنب
- Destructurer le store entier dans les composants provoque des re-rendus à chaque changement d'état
- Créer des stores sans interfaces TypeScript perd les avantages de la sécurité des types
- S'abonner à l'objet d'état entier alors qu'une seule propriété est nécessaire