Contexte et réducteur : conteneurs d’état simples
Combinez Context et useReducer pour créer un petit conteneur d’état : Provider expose l’état et dispatch via un crochet personnalisé.
Contexte et réducteur : conteneurs d’état simples est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi utiliser le contexte avec un réducteur ?
Objectif : regroupez la logique d’état dans un fournisseur (contexte) et un réducteur. Les enfants lisent les valeurs via une petite fonction personnalisée : aucun passage en cascade des propriétés et des mises à jour prévisibles.
Étapes de conception
Modèle :
- Créez un contexte
- Dans le fournisseur : useReducer(state, action)
- Fournissez {state, dispatch}
- Créez une fonction de type useCounter() qui appelle useContext
Démonstration : conteneur de compteur
Un CounterProvider minimal expose state et dispatch ; les enfants utilisent useCounter() pour lire et mettre à jour les valeurs.
<div id="root"></div>
Conseils sur les actions et l’API
Conseils :
- Gardez les actions courtes (INC, DEC, RESET).
- Regroupez le réducteur avec le fournisseur.
- N’exportez que la fonction personnalisée afin que son utilisation reste simple.
Démonstration : conteneur de tâches
Un petit TodoProvider montre comment plusieurs champs peuvent être mis à jour de manière prévisible avec un seul réducteur et une API de fonction claire.
<div id="root"></div>
Pièges et conseils
Pièges :
- Oublier d’entourer les enfants avec le fournisseur.
- Placer de gros objets dans le contexte ; ne transmettez que ce qui est nécessaire.
- Modifier l’état dans le réducteur : renvoyez toujours de nouveaux objets.
Vérification du modèle de conteneur
Récapitulatif
Récapitulatif : le contexte fournit l’accès ; useReducer gère les transitions. Exportez une petite fonction useXxx pour lire {state, dispatch} et garder une utilisation simple.
Questions Fréquemment Posées
La leçon « Contexte et réducteur : conteneurs d’état simples » est-elle gratuite ?
Oui — le texte complet de « Contexte et réducteur : conteneurs d’état simples » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Contexte et réducteur : conteneurs d’état simples » ?
Combinez Context et useReducer pour créer un petit conteneur d’état : Provider expose l’état et dispatch via un crochet personnalisé. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Contexte et réducteur : conteneurs d’état simples » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases du contexte et éviter le forage des propriétés
- Bases de useReducer et modèles d’actions
- Contexte et réducteur : conteneurs d’état simples