ReactJS - Utilisation de useReducer

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des hooks de React, en nous concentrant spécifiquement sur le puissant hook useReducer. Ne vous inquiétez pas si vous êtes nouveau en programmation - je vais vous guider pas à pas, comme j'ai fait pour des centaines d'étudiants au fil des ans. Mettons-nous à l'œuvre !

Qu'est-ce que useReducer ?

Avant de plonger dans les détails, comprendreons ce qu'est useReducer. Imaginez que vous jouez à un jeu vidéo où votre personnage a différents états - santé, pouvoir et vitesse. Pendant que vous jouez, ces états changent en fonction de vos actions. useReducer est comme le moteur du jeu qui gère ces changements d'état en fonction de règles spécifiques.

En termes de React, useReducer est un hook qui nous aide à gérer des logiques d'état complexes dans nos applications. Il est particulièrement utile lorsque vous avez plusieurs sous-valeurs dans votre état, ou lorsque l'état suivant dépend de l'état précédent.

Signature du hook useReducer

Maintenant, voyons comment nous utilisons réellement useReducer dans notre code. Voici sa structure de base :

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

Décomposons cela :

• state : C'est notre état actuel, comme la santé actuelle de notre personnage dans l'analogie du jeu.
• dispatch : C'est une fonction que nous utilisons pour envoyer des actions pour mettre à jour notre état.
• reducer : C'est une fonction qui spécifie comment notre état devrait changer en réponse aux actions.
• initialState : C'est l'état initial de notre application.

Ça peut paraître un peu confus maintenant, mais ne vous inquiétez pas ! Nous verrons cela en action bientôt, et tout prendra sens.

Application du hook reducer

Créons une application simple de compteur pour comprendre comment useReducer fonctionne. Nous commencerons par une configuration de base et ensuite nous construirons dessus.

import React, { useReducer } from 'react';

// Étape 1 : Définir l'état initial
const initialState = { count: 0 };

// Étape 2 : Créer la fonction reducer
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}

// Étape 3 : Créer le composant Counter
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
Compte : {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}

export default Counter;

Décomposons cela étape par étape :

1. Nous importons useReducer de React.
2. Nous définissons notre initialState avec un compteur à 0.
3. Nous créons une fonction reducer qui prend l'état actuel et une action, et retourne le nouvel état en fonction du type d'action.
4. Dans notre composant Counter, nous utilisons useReducer pour obtenir notre état actuel et la fonction dispatch.
5. Nous rendons le compteur actuel et deux boutons qui envoient des actions 'increment' et 'decrement' lorsque cliqués.

Lorsque vous cliquez sur le bouton '+', il envoie une action 'increment', que notre réducteur gère en augmentant le compteur. Le bouton '-' fonctionne de manière similaire pour décrémenter.

Utilisation de useReducer

Maintenant que nous avons vu un exemple de base, explorons un scénario plus complexe. Imaginons que nous construisons une application de gestion de tâches simple. Nous utiliserons useReducer pour gérer l'ajout et la suppression des tâches.

import React, { useReducer, useState } from 'react';

// Étape 1 : Définir l'état initial
const initialState = { tasks: [] };

// Étape 2 : Créer la fonction reducer
function reducer(state, action) {
switch (action.type) {
case 'ADD_TASK':
return { tasks: [...state.tasks, action.payload] };
case 'REMOVE_TASK':
return { tasks: state.tasks.filter((task, index) => index !== action.payload) };
default:
return state;
}
}

// Étape 3 : Créer le composant TaskManager
function TaskManager() {
const [state, dispatch] = useReducer(reducer, initialState);
const [newTask, setNewTask] = useState('');

const handleAddTask = () => {
if (newTask.trim()) {
dispatch({ type: 'ADD_TASK', payload: newTask });
setNewTask('');
}
};

const handleRemoveTask = (index) => {
dispatch({ type: 'REMOVE_TASK', payload: index });
};

return (
<div>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Entrez une nouvelle tâche"
/>
<button onClick={handleAddTask}>Ajouter une tâche</button>
<ul>
{state.tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleRemoveTask(index)}>Supprimer</button>
</li>
))}
</ul>
</div>
);
}

export default TaskManager;

Dans cet exemple plus complexe :

1. Notre initialState maintenant a un tableau de tâches.
2. La fonction reducer gère deux types d'actions : 'ADD_TASK' et 'REMOVE_TASK'.
3. Dans le composant TaskManager, nous utilisons à la fois useReducer pour gérer les tâches et useState pour gérer le champ d'entrée.
4. Nous avons des fonctions pour gérer l'ajout et la suppression des tâches, qui envoient les actions appropriées.
5. Nous rendons un champ d'entrée pour les nouvelles tâches, un bouton pour ajouter des tâches, et une liste des tâches existantes avec des boutons de suppression.

Cet exemple montre comment useReducer peut aider à gérer des logiques d'état plus complexes de manière propre et organisée.

Tableau des méthodes

Voici un tableau résumant les méthodes et concepts clés que nous avons couverts :

Méthode/Concept	Description	Exemple
useReducer	Un hook React pour gérer des logiques d'état complexes	const [state, dispatch] = useReducer(reducer, initialState);
reducer	Une fonction qui spécifie comment l'état devrait changer en réponse aux actions	function reducer(state, action) { ... }
dispatch	Une fonction utilisée pour envoyer des actions pour mettre à jour l'état	dispatch({ type: 'ADD_TASK', payload: newTask })
action	Un objet décrivant le changement à apporter à l'état	{ type: 'INCREMENT' }
initialState	L'état initial de l'application	const initialState = { count: 0 };

Souvenez-vous, apprendre à utiliser useReducer efficacement nécessite de la pratique. Ne soyez pas découragé si cela ne vous saute pas immédiatement - même les développeurs expérimentés ont parfois besoin de temps pour comprendre de nouveaux concepts. Continuez à coder, continuez à expérimenter, et surtout, amusez-vous ! Avant de vous en rendre compte, vous serez un pro de la gestion des états complexes. Bon codage !

Credits: Image by storyset