La gestion de l'état est au cœur de toute application React, et pour des scénarios plus complexes, le hook useReducer offre un moyen puissant de gérer l'état de manière structurée. Dans cet article, nous explorerons useReducer à travers un exemple concret : la création d'une liste de tâches.

Comprendre useReducer

useReducer est un hook React qui permet la gestion de l'état en utilisant un modèle de réducteur. Au lieu d'utiliser useState pour gérer l'état d'un composant, useReducer est particulièrement adapté pour traiter des états complexes, comme des listes de données.

L'idée de base est de fournir une fonction réducteur qui prend deux arguments : l'état actuel et l'action à effectuer.

• L'action est généralement un objet qui décrit un changement d'état, comme l'ajout d'une tâche, sa suppression ou sa marquage comme terminée.
• La fonction réducteur renvoie le nouvel état en fonction de l'état actuel et de l'action.

Exemple Pratique : Création d'une Liste de Tâches avec useReducer

Imaginez que vous développiez une application de liste de tâches. Voici comment vous pouvez utiliser useReducer pour gérer la liste des tâches :

1import React, { useReducer } from 'react';
2
3// Définissez une fonction réducteur
4const taskReducer = (state, action) => {
5  switch (action.type) {
6    case 'ADD_TASK':
7      return [...state, { id: Date.now(), text: action.text, done: false }];
8    case 'DELETE_TASK':
9      return state.filter(task => task.id !== action.id);
10    case 'TOGGLE_TASK':
11      return state.map(task =>
12        task.id === action.id ? { ...task, done: !task.done } : task
13      );
14    default:
15      return state;
16  }
17};
18
19function ListeDeTaches() {
20  // Remplacez `useState` par `useReducer` avec le réducteur et l'état initial
21  const [tâches, dispatch] = useReducer(taskReducer, []);
22
23  // Créez des fonctions pour le réducteur
24  const ajouterTâche = text => {
25    dispatch({ type: 'ADD_TASK', text });
26  };
27
28  const supprimerTâche = id => {
29    dispatch({ type: 'DELETE_TASK', id });
30  };
31
32  const basculerTâche = id => {
33    dispatch({ type: 'TOGGLE_TASK', id });
34  };
35
36  return (
37    <div>
38      <h1>Liste de Tâches</h1>
39      <ul>
40        {tâches.map(tâche => (
41          <li key={tâche.id}>
42            <span
43              style={{ textDecoration: tâche.done ? 'line-through' : 'none' }}
44            >
45              {tâche.text}
46            </span>
47            <button onClick={() => basculerTâche(tâche.id)}>
48              {tâche.done ? 'Annuler' : 'Fait'}
49            </button>
50            <button onClick={() => supprimerTâche(tâche.id)}>Supprimer</button>
51          </li>
52        ))}
53      </ul>
54      <input
55        type="text"
56        placeholder="Ajouter une tâche"
57        onKeyUp={e => {
58          if (e.key === 'Enter' && e.target.value) {
59            ajouterTâche(e.target.value);
60            e.target.value = '';
61          }
62        }}
63      />
64    </div>
65  );
66}

Dans cet exemple, nous avons créé une application de liste de tâches. Nous utilisons useReducer pour gérer les tâches. Des actions telles que ADD_TASK, DELETE_TASK et TOGGLE_TASK nous permettent de modifier l'état de la liste des tâches de manière structurée.

Avantages de useReducer pour la Gestion des Tâches

useReducer présente plusieurs avantages pour la gestion d'une liste de tâches dans une application React :

• Structure et Lisibilité : Les actions sont explicitement définies avec des types, ce qui rend le code plus lisible et plus facile à entretenir.

• État Immuable : useReducer encourage l'immuabilité de l'état, ce qui évite les effets secondaires et les erreurs inattendues.

• Gestion des États Complexes : useReducer est idéal pour gémérer une liste de données avec de nombreuses actions possibles.

• Séparation des Préoccupations : En regroupant les actions et la logique de réduction dans une seule fonction, useReducer favorise la séparation des préoccupations.

• Potentiel d'Extensions Futures : Vous pouvez facilement ajouter de nouvelles actions pour étendre la fonctionnalité de votre application.

Conclusion

En conclusion, useReducer est un outil puissant pour gérer l'état d'une application React, en particulier lorsqu'il s'agit de gérer des états complexes et une variété d'actions possibles. En l'intégrant dans vos projets, vous pouvez créer des applications plus robustes et structurées tout en améliorant la maintenabilité et la lisibilité du code.