La gestion des états est cruciale dans le développement React, servant de pierre angulaire à la manipulation et à la mise à jour des données dans les interfaces utilisateur. Le système de gestion des états de React useState Hook fournit une approche simple pour gérer l’état, mais il devient encombrant avec un état complexe. C’est là que la méthode useReducer Entrée en jeu de Hook.
Le useReducer Hook propose une méthodologie structurée pour gérer des états et des transitions complexes. En s’appuyant sur l’approche useReducer Le crochet permet de gagner en flexibilité et en efficacité, ce qui permet d’obtenir un code plus propre.
Comprendre le crochet useReducer
Le crochet useReducer Hook est une fonctionnalité intégrée fournie par React qui rationalise la gestion de l’état en adhérant aux principes du pattern reducer. Il vous offre une alternative organisée et évolutive à la méthode useState Crochet, particulièrement adapté à la gestion d’états complexes.
En tirant parti de l’outil useReducer Hook, vous pouvez consolider à la fois l’état et ses transitions dans une seule fonction de réduction.
Cette fonction prend en entrée l’état actuel et une action, puis produit le nouvel état. Elle fonctionne selon les mêmes principes que la fonction reducer employée dans la fonction JavaScript Array.prototype.reduce() méthode.
Syntaxe et exemple d’utilisation du crochet useReducer
La syntaxe d’utilisation du crochet useReducer Le crochet est le suivant :
const [state, dispatch] = useReducer(reducer, initialState);
Le useReducer La fonction useReducer accepte deux arguments :
- reducer (fonction): Détermine la manière dont l’état doit être mis à jour en fonction de l’état actuel et de l’action envoyée.
- initialState (any): Représente la valeur de l’état initial du composant.
Lors de l’invocation, la fonction useReducer Le crochet renvoie un tableau composé de deux éléments :
- état (quelconque) : Indique la valeur de l’état actuel.
- dispatch (fonction) : Cette fonction permet d’envoyer des actions pour mettre à jour l’état.
L’exemple ci-dessous illustre l’utilisation de la fonction useReducer Crochet dans la gestion d’un simple compteur :
import React, { useReducer } from 'react';
const initialState = 0;
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
};
const Counter = () => {
const [count, dispatch] = useReducer(reducer, initialState);
const handleIncrement = () => {
dispatch({ type: 'increment' });
};
const handleDecrement = () => {
dispatch({ type: 'decrement' });
};
return (
<div>
<button onClick={handleIncrement}>Increment</button>
<span>{count}</span>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
D’après l’illustration ci-dessus, un état initial de 0 est définie à côté d’une fonction de réduction chargée de gérer deux types d’actions : incrémentation et décrément. La fonction de réduction modifie dûment l’état conformément aux actions spécifiées.
En tirant parti de la fonction useReducer Hook, l’état est initialisé et la valeur de l’état actuel ainsi que la fonction de répartition sont acquises. La fonction d’envoi est ensuite utilisée pour déclencher des mises à jour de l’état en cliquant sur les boutons respectifs.
Construction d’une fonction de réduction
Pour une utilisation optimale de la fonction useReducer Hook, vous pouvez créer une fonction reducer qui décrit comment l’état doit être mis à jour en fonction des actions distribuées. Cette fonction de réduction accepte l’état actuel et l’action comme arguments et renvoie le nouvel état.
En général, une fonction de réduction utilise une instruction conditionnelle de commutation pour gérer différents types d’action et modifier l’état en conséquence.
Prenons l’exemple ci-dessous d’une fonction de réduction utilisée pour gérer une liste de tâches :
const initialState = [];
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return [...state, action.payload];
case 'toggle':
return state.map((todo) =>
todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
);
case 'delete':
return state.filter((todo) => todo.id !== action.payload);
default:
return state;
}
};
Dans l’exemple ci-dessus, la fonction de réduction gère trois types d’action distincts : ajouter, bascule, et supprimer. A la réception de la ajouter ajoute la charge utile (un nouvel élément de todo) à la page d’accueil de l’action état tableau.
Dans le cas du bascule , il alterne l’action complétée de l’élément de todo associé à l’ID spécifié. La propriété supprimer en revanche, élimine du tableau d’états l’élément de la tâche lié à l’identifiant fourni.
Si aucun des types d’action ne correspond, la fonction de réduction renvoie l’état actuel sans modification.
Répartition des actions
Pour effectuer les mises à jour d’état facilitées par le useReducer Hook, l’envoi d’actions devient indispensable. Les actions représentent des objets JavaScript simples qui élucident le type de modification d’état souhaité.
La responsabilité du traitement de ces actions et de la génération de l’état suivant incombe à la fonction de réduction.
La fonction de répartition, fournie par la fonction useReducer Le crochet est utilisé pour distribuer les actions. Il accepte un objet d’action comme argument, ce qui déclenche la mise à jour de l’état concerné.
Dans les exemples précédents, les actions ont été exécutées à l’aide de la syntaxe suivante dispatch({type : ‘actionType’}). Cependant, il est concevable que les actions comprennent des données supplémentaires, connues sous le nom de charge utilequi fournit des informations supplémentaires sur la mise à jour. Par exemple :
dispatch({ type: 'add', payload: { id: 1, text: 'Finish homework', completed: false } });
Dans ce scénario, le ajouter L’action « add » comprend un objet « payload » encapsulant les détails du nouvel élément à incorporer dans l’état.
Gérer des états complexes avec useReducer
La véritable force de l’outil useReducer Hook réside dans sa capacité à gérer des structures d’état complexes, comprenant de nombreuses valeurs interconnectées et des transitions d’état complexes.
En centralisant la logique d’état au sein d’une fonction de réduction, la gestion de divers types d’action et la mise à jour systématique de l’état deviennent une entreprise réalisable.
Considérons un scénario dans lequel un formulaire de réaction est constitué de plusieurs champs de saisie. Plutôt que de gérer l’état de chaque entrée individuellement à l’aide de la fonction useState, le useReducer Le crochet peut être utilisé pour gérer de manière holistique l’état du formulaire.
La fonction de réduction peut gérer habilement les actions relatives à la modification de champs spécifiques et à la validation complète de l’ensemble du formulaire.
const initialState = {
name: '',
email: '',
password: '',
isFormValid: false,
};
const reducer = (state, action) => {
switch (action.type) {
case 'updateField':
return { ...state, [action.payload.field]: action.payload.value };
case 'validateForm':
return { ...state, isFormValid: action.payload };
default:
return state;
}
};
Dans l’exemple, la fonction de réduction s’adresse à deux types d’actions distinctes : updateField et validateForm. Les updateField L’action updateField facilite la modification d’un champ spécifique dans l’état en utilisant la valeur fournie.
Inversement, l’action validerForm met à jour le formulaire isFormValid en fonction du résultat de la validation fournie.
En employant la propriété useReducer Le crochet pour gérer l’état du formulaire, tous les états et actions associés sont consolidés au sein d’une entité singulière, ce qui améliore la facilité de compréhension et de maintenance.
Comparaison de useReducer avec d’autres solutions de gestion d’états
Bien que l’outil useReducer Hook est un outil puissant pour la gestion de l’état, il est vital de reconnaître ses différences et ses compromis par rapport aux solutions alternatives de gestion de l’état au sein de l’écosystème React.
useState
Le useState Le crochet suffit pour gérer des états simples et isolés au sein d’un composant. Sa syntaxe est plus concise et plus directe que celle de useReducer. Néanmoins, pour les états complexes ou les transitions d’états, utiliserReducer permet une approche plus organisée.
Redux
Redux est une importante bibliothèque de gestion d’état pour les applications React. Elle adhère à un modèle de réducteur similaire à celui de useReducermais offre des fonctionnalités supplémentaires telles qu’un magasin centralisé, la prise en charge des logiciels intermédiaires et le débogage des voyages dans le temps.
Redux s’avère idéal pour les applications à grande échelle nécessitant des exigences complexes en matière de gestion d’état. Cependant, pour les projets plus petits ou les besoins de gestion d’état plus simples, utiliserReducer peut constituer une alternative légère et plus simple.
API contextuelle
L’API Contexte de React permet le partage de l’état entre plusieurs composants sans avoir recours au forage d’objets (prop drilling). En conjonction avec useReducer, il peut constituer une solution centralisée de gestion des états.
Bien que la combinaison de Context API et de useReducer se vante d’une puissance considérable, elle peut introduire une complexité supplémentaire lorsqu’elle est juxtaposée à l’utilisation de useReducer de manière isolée.
L’API contextuelle est mieux employée lorsqu’il est nécessaire de partager l’état entre des composants profondément imbriqués ou lorsqu’on est confronté à une hiérarchie de composants complexe. La sélection d’une solution de gestion d’état appropriée dépend des exigences spécifiques de l’application en question.
Pour les projets de taille moyenne, utiliserReducer peut s’avérer une alternative efficace et plus simple à Redux ou à l’API Contexte.
Libérer la simplicité de la gestion des états
Le crochet useReducer est un instrument puissant pour simplifier la gestion des états dans les applications React. En adhérant aux principes du schéma réducteur, il offre une approche structurée et évolutive pour gérer des états et des transitions d’état complexes.
Utilisé en tandem avec useState Hook, useReducer peut servir d’alternative légère à des bibliothèques comme Redux ou l’API Contexte, en particulier dans le contexte de projets de petite ou moyenne taille.