react-state-management
Implémenter la gestion d'état React
Également disponible depuis: wshobson
Cette compétence aide les développeurs à choisir et implémenter la bonne solution de gestion d'état pour les applications React, de l'état local simple aux stores globaux complexes avec synchronisation serveur.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-state-management". Comment choisir entre Redux Toolkit et Zustand ?
Résultat attendu:
Pour les petites et moyennes applications avec des besoins d'état simples, Zustand offre une API minimale avec une excellente prise en charge TypeScript. Pour les grandes applications d'entreprise nécessitant des middlewares, une intégration devtools et des modèles stricts, Redux Toolkit apporte la structure. Utilisez Zustand lorsque : vous avez besoin d'un état global simple sans boilerplate, vous privilégiez une API basée sur les hooks, vous souhaitez une taille de bundle minimale. Utilisez Redux Toolkit lorsque : vous avez besoin d'une logique asynchrone complexe avec thunks, vous avez besoin d'un suivi strict des actions pour le débogage, votre équipe maîtrise les modèles Redux.
Utilisation de "react-state-management". Configurer React Query pour la récupération de données
Résultat attendu:
Installez @tanstack/react-query, puis encapsulez votre application avec QueryClientProvider. Créez un client de requête avec des options par défaut pour la mise en cache. Utilisez le hook useQuery pour la récupération avec des clés pour la gestion du cache. Utilisez useMutation pour les mises à jour avec des mises à jour optimistes via onMutate. La clé de requête ['users', userId] permet le refetch automatique et la mise en cache.
Audit de sécurité
SûrThis is a documentation skill for React state management patterns. Static analysis flagged external_commands, network, and sensitive data patterns, but evaluation confirms these are FALSE POSITIVES - the 'backticks' are TypeScript template literals in code examples, 'fetch' calls are legitimate API examples, and 'localStorage' access is proper state persistence teaching. No actual security risks identified.
Problèmes à risque moyen (2)
Problèmes à risque faible (1)
Facteurs de risque
⚙️ Commandes externes (20)
🌐 Accès réseau (6)
Score de qualité
Ce que vous pouvez construire
Configuration d'un nouveau projet React
Sélectionner et configurer la solution de gestion d'état adaptée lors du démarrage d'une nouvelle application React
Migration d'architecture existante
Migrer depuis d'anciens modèles Redux ou des composants de classe vers des approches modernes de gestion d'état
Optimisation des performances
Réduire les re-rendus inutiles et optimiser les modèles d'accès à l'état dans les applications existantes
Essayez ces prompts
Montrez-moi comment configurer Zustand pour une application React simple avec état d'authentification utilisateur et bascule de thème.
Créez un store Redux Toolkit avec hooks typés et un slice utilisateur qui gère le chargement asynchrone.
Configurez React Query pour la récupération de données utilisateur avec mise en cache, mises à jour optimistes lors des mutations, et gestion d'erreurs.
Implémentez des atomes Jotai pour un panier avec atomes dérivés pour les totaux et persistance dans localStorage.
Bonnes pratiques
- Séparer l'état client de l'état serveur - utiliser React Query pour les données serveur et Zustand/Redux pour l'état UI
- Colocaliser l'état près de son utilisation - éviter de tout mettre dans l'état global
- Utiliser TypeScript pour tout le code lié à l'état afin de prévenir les erreurs d'exécution et permettre un meilleur support IDE
Éviter
- Stocker les données serveur dans l'état global au lieu d'utiliser React Query - crée des problèmes de synchronisation
- Sur-globaliser l'état - mettre l'état spécifique aux composants dans Redux/Zustand quand useState suffit
- Mutations directes de l'état au lieu d'utiliser des modèles de mise à jour immuables - brise la réactivité