useReducer : réagir aux crochets

useReducer dans React : simplifiez la gestion de l'état avec deux mini-projets

Introduction

La gestion de l'état est un élément essentiel de la création d'applications dynamiques et interactives dans React. Bien que useState soit suffisant pour gérer un état simple, à mesure que l'état de votre application devient de plus en plus complexe, useReducer offre un moyen plus puissant et plus prévisible de le gérer. Inspiré du modèle de réduction de Redux, useReducer vous permet de définir comment les transitions d'état doivent se produire en réponse à des actions spécifiques, ce qui le rend idéal pour les scénarios avec des mises à jour d'état multiples et complexes.

Dans cet article, nous allons :

1. Découvrez une explication claire de useReducer, de sa syntaxe et quand l'utiliser.
2. Mettre en œuvre deux mini-projets :
   • Compteur avec actions multiples : un exemple qui va au-delà de l'incrémentation/décrémentation de base, montrant comment useReducer gère plusieurs types d'actions.
   • Liste de tâches avec transitions d'état complexes : une application de tâches qui met en évidence la capacité de useReducer à gérer des objets d'état complexes.

Voyons comment useReducer peut simplifier la gestion de votre état dans React !

---

Comprendre useReducer

Qu’est-ce qu’useReducer ?

useReducer est un hook React conçu pour les situations où useState échoue. Au lieu de mettre à jour directement l'état, vous spécifiez une fonction de réduction qui calcule l'état suivant en fonction de l'état actuel et d'une action. Cette approche déclarative maintient les transitions d'état prévisibles et vous permet de gérer une logique d'état plus complexe de manière centralisée.

Syntaxe de useReducer

Voici un aperçu de la syntaxe :

const [state, dispatch] = useReducer(reducer, initialState);

• réducteur : Une fonction qui définit comment l'état doit être mis à jour en fonction de l'action. Il faut deux arguments :

  • state : l'état actuel.
  • action : un objet contenant des informations sur l'action, comprenant généralement un type et une charge utile facultative.

• initialState : La valeur de départ de l'état.

Exemple : compteur de base avec useReducer

Créons un compteur simple en utilisant useReducer pour voir la syntaxe en action.

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

Explication du Code

1. Fonction Réducteur : Cette fonction définit comment gérer les actions. En fonction du type d'action (incrémentation ou décrémentation), la fonction réductrice renvoie un nouvel objet d'état.
2. Actions de répartition : la répartition envoie une action au réducteur, qui la traite et met à jour l'état en conséquence.

---

Quand utiliser useReducer

useReducer est particulièrement utile lorsque :

• La logique d'état est complexe ou implique plusieurs sous-valeurs.
• L'état suivant dépend de l'état précédent.
• Plusieurs composants doivent accéder à l'état géré par le réducteur (vous pouvez combiner useReducer avec useContext pour l'état global).

---

Mini projet 1 : Compteur à actions multiples

Dans ce projet, nous allons créer un compteur amélioré qui permet plusieurs opérations (incrémenter, décrémenter, réinitialiser) pour voir comment useReducer gère un ensemble plus large d'actions.

Étape 1 : Définir la fonction du réducteur

const [state, dispatch] = useReducer(reducer, initialState);

Étape 2 : créer le composant compteur

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

Ce compteur amélioré prend désormais en charge la fonctionnalité de réinitialisation en plus de l'incrémentation et de la décrémentation. Ce projet démontre la flexibilité de useReducer dans la gestion des actions pour les mises à jour d'état.

---

Mini-projet 2 : Créer une liste de tâches avec des transitions d'état complexes

L'application de liste de tâches montre à quel point useReducer est idéal pour gérer des objets d'état complexes avec plusieurs transitions, telles que l'ajout, la suppression et le basculement de tâches.

Étape 1 : Définir le réducteur

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

Étape 2 : créer le composant de liste de tâches

importer React, {useReducer, useState } depuis 'react' ;

fonction ToDoList() {
    const [todos, dispatch] = useReducer(todoReducer, []);
    const [tâche, setTask] = useState('');

    const handleAdd = () => {
        si (tâche.trim()) {
            dispatch({ type : 'ajouter', charge utile : tâche });
            setTask(''); // Effacer le champ de saisie
        }
    } ;

    retour (
        <div>
            <h2>Liste de tâches</h2>
            <entrée
                valeur={tâche}
                onChange={e => setTask(e.target.value)}
                placeholder="Entrer une nouvelle tâche"
            />
            <button onClick={handleAdd}>Ajouter une tâche</button>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>



<h3>
  
  
  Explication du code de la liste de tâches
</h3>

<ol>
<li>
<p><strong>Actions</strong> :</p>

<ul>
<li>
<strong>Ajouter</strong> : ajoute une nouvelle tâche à la liste avec un identifiant unique et un statut terminé défini sur faux.</li>
<li>
<strong>Supprimer</strong> : supprime une tâche en la filtrant en fonction de l'ID.</li>
<li>
<strong>Toggle</strong> : marque une tâche comme terminée ou inachevée en basculant le statut terminé.</li>
</ul>
</li>
<li><p><strong>Utilisation de useReducer avec Dynamic Data</strong> : cet exemple montre comment useReducer gère les mises à jour d'état complexes et imbriquées dans un tableau d'objets, ce qui le rend parfait pour gérer des éléments avec plusieurs propriétés.</p></li>
</ol>


<hr>

<h2>
  
  
  Conclusion
</h2>

<p>Dans cet article, vous avez appris à utiliser efficacement useReducer pour une gestion d'état plus complexe dans les applications React. A travers nos projets :</p><ol>
<li>Le <strong>Compteur amélioré</strong> a démontré comment useReducer simplifie plusieurs mises à jour d'état basées sur des actions.</li>
<li>La <strong>To-Do List</strong> a illustré comment gérer des objets d'état complexes, comme des tableaux de tâches, avec useReducer.</li>
</ol>

<p>Avec useReducer, vous pouvez écrire du code plus propre, plus prévisible et plus maintenable pour les applications qui nécessitent une gestion d'état robuste. Expérimentez avec ces projets et envisagez useReducer la prochaine fois que vous rencontrerez une logique d'état complexe dans vos applications React !</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!