react-state-management
Implémenter la gestion d'état React
La gestion d'état à travers les composants React peut conduire à un code complexe et des données incohérentes. Cette compétence fournit des modèles complets pour Redux Toolkit, Zustand, Jotai et React Query afin de gérer efficacement l'état local, global et 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". Quelle bibliothèque de gestion d'état devrais-je utiliser pour une petite application avec des besoins d'état global simples ?
Résultat attendu:
Pour les petites applications avec un état global simple, Zustand ou Jotai sont d'excellents choix :
**Zustand** offre l'API la plus simple avec un minimum de boilerplate :
- Créer des stores avec une seule fonction de type hook
- Middleware devtools et persistence intégrés
- Aucun provider requis
- Les souscriptions sélectives empêchent les re-rendus inutiles
**Jotai** excelle lorsque vous voulez des mises à jour atomiques et granulaires :
- Chaque élément d'état est un atome indépendant
- Les atomes dérivés calculent automatiquement à partir d'autres atomes
- Parfait pour la réactivité fine
Choisissez Zustand si vous préférez un modèle de store unifié. Choisissez Jotai si vous voulez des mises à jour atomiques sans wrapper de store global.
Utilisation de "react-state-management". Comment gérer l'état serveur avec React Query vs l'état client avec Redux Toolkit ?
Résultat attendu:
Gardez l'état serveur et l'état client séparés pour plus de clarté et de maintenabilité :
**React Query gère l'état serveur :**
- Données serveur, mise en cache et synchronisation
- Récupération automatique et mises à jour en arrière-plan
- Stratégie de mise en cache stale-while-revalidate
- Mutations optimistes avec rollback
**Redux Toolkit gère l'état client :**
- État de l'interface utilisateur (modals, ouverture/fermeture de sidebar)
- État d'authentification (lorsqu'il n'est pas dans les cookies)
- Préférences et paramètres de l'application
- État dérivé complexe côté client
Cette séparation empêche le mélange des préoccupations et facilite le débogage car chaque outil a un objectif clair.
Audit de sécurité
SûrAll 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.
Score de qualité
Ce que vous pouvez construire
Choisir une solution d'état pour un nouveau projet
Une équipe de développement démarrant une nouvelle application React doit sélectionner l'approche de gestion d'état appropriée en fonction de la taille et des exigences de l'application.
Implémenter la mise en cache de données serveur
Un développeur frontend souhaite ajouter la mise en cache, la récupération en arrière-plan et les mises à jour optimistes pour les données API dans une application React.
Migrer Redux legacy vers des modèles modernes
Un développeur doit mettre à jour le code boilerplate Redux verbeux vers Redux Toolkit avec Immer pour les mises à jour immuables.
Essayez ces prompts
Comment configurer Redux Toolkit avec TypeScript dans une application React ? Montrez comment créer un store avec des slices et des hooks useDispatch et useSelector typés.
Montrez-moi comment créer un store Zustand qui persiste dans localStorage avec support devtools. Incluez comment accéder au store dans les composants et gérer les mises à jour d'état typées.
Écrivez une mutation React Query qui effectue des mises à jour optimistes. Incluez onMutate pour capturer l'état précédent, onError pour le rollback, et onSettled pour la récupération.
Comment combiner React Query pour l'état serveur avec Zustand pour l'état client uniquement dans la même application ? Montrez la séparation des préoccupations et comment les composants consomment les deux.
Bonnes pratiques
- Colocalisez l'état aussi près que possible de l'endroit où il est utilisé - évitez de tout mettre dans l'état global
- Utilisez des sélecteurs pour sélectionner uniquement les données nécessaires des stores afin d'éviter les re-rendus inutiles de composants
- Séparez l'état serveur (React Query) de l'état client (Zustand/Redux) - chacun a des modèles de mise à jour et des durées de vie différents
Éviter
- Mettre chaque élément d'état dans l'état global simplement parce qu'il est accessible par plusieurs composants - l'état local est souvent suffisant
- Muter l'état directement au lieu d'utiliser des modèles de mise à jour immuables ou des bibliothèques comme Immer
- Dupliquer l'état serveur à la fois dans React Query et dans les stores client - laissez React Query être la source unique de vérité pour les données serveur