Le hook useReducer: Simplifier la gestion des états dans React

La gestion des états est cruciale dans le développement de React, servant de pierre angulaire pour la gestion et la mise à jour des données dans les interfaces utilisateur. Réagissez useState Hook fournit une approche simple pour gérer l'état, mais cela devient fastidieux avec un état complexe. C'est là que le useReducer Le crochet entre.

Le useReducer Hook propose une méthodologie structurée pour gérer les états et les transitions complexes. Embrasser le useReducer Hook déverrouille la flexibilité et l'efficacité, conduisant à un code plus propre.

Comprendre le crochet useReducer

Le useReducer Hook est une fonctionnalité intégrée fournie par React qui rationalise la gestion des états en adhérant aux principes du modèle de réducteur. Il vous offre une alternative organisée et évolutive au useState Hook, particulièrement adapté à la manipulation d'états complexes.

En tirant parti de la useReducer Hook, vous pouvez consolider à la fois l'état et ses transitions dans une seule fonction de réduction.

Cette fonction prend l'état actuel et une action comme entrées, produisant ensuite le nouvel état. Il fonctionne sur les mêmes principes que la fonction de réduction employée dans JavaScript Array.prototype.reduce() méthode.

Syntaxe et exemple d'utilisation du crochet useReducer

La syntaxe d'utilisation de useReducer Le crochet est le suivant :

constante [état, dispatch] = useReducer (réducteur, initialState);

Le useReducer fonction accepte deux arguments :

• réducteur (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.
• état initial (tout): Représente la valeur de l'état initial du composant.

Sur invocation, le useReducer Hook renvoie un tableau composé de deux éléments :

• état (quelconque): Indique la valeur de l'état actuel.
• dépêche (fonction): Cette fonction permet de dispatcher des actions pour mettre à jour l'état.

Considérez l'exemple ci-dessous illustrant l'utilisation du useReducer Accro à la gestion d'un compteur simple :

importer Réagissez, { useReducer } depuis'réagir';
constante état initial = 0;
constante réducteur = (état, acte) => {
changer (type d'action) {
cas'incrément':
retour état + 1;
cas'décrémenter':
retour État - 1;
défaut:
retour État;
 }
};
constante Compteur = () => {
constante [count, dispatch] = useReducer (reducer, initialState);
constante poignéeIncrément = () => {
 expédition({ taper: 'incrément' });
 };
constante handleDecrement = () => {
 expédition({ taper: 'décrémenter' });
 };
retour (



Incrément</button>
{count}</span>
Décrémenter</button>
 </div>
 );
};

D'après l'illustration ci-dessus, un état initial de 0 est définie à côté d'une fonction réductrice chargée de gérer deux types d'actions: incrément et décrémenter. La fonction de réduction modifie dûment l'état conformément aux actions spécifiées.

En tirant parti de la useReducer Hook, l'état est initialisé et la valeur d'état actuelle et la fonction de répartition sont acquises. La fonction de répartition est ensuite utilisée pour déclencher des mises à jour d'état en cliquant sur les boutons respectifs.

Construction d'une fonction de réduction

Pour une utilisation optimale du useReducer Hook, vous pouvez créer une fonction de réduction qui décrit comment l'état doit être mis à jour en fonction des actions envoyées. Cette fonction de réduction accepte l'état actuel et l'action comme arguments et renvoie le nouvel état.

Typiquement, une fonction de réduction emploie une instruction conditionnelle switch pour gérer divers types d'action et effectuer des modifications d'état en conséquence.

Considérez l'exemple ci-dessous d'une fonction de réduction utilisée pour gérer une liste de tâches :

constante étatinitial = [] ;
constante réducteur = (état, acte) => {
changer (type d'action) {
cas'ajouter':
retour [...état, action.charge utile] ;
cas'basculer':
retour état.map((faire) =>
 todo.id action.charge utile? { ...faire, complété: !todo.completed }: todo
 );
cas'supprimer':
retour état.filtre((faire) => todo.id !== action.payload);
défaut:
retour État;
 }
};

Dans l'exemple ci-dessus, la fonction reducer gère trois types d'action distincts: ajouter, basculer, et supprimer. Dès réception du ajouter action, il ajoute la charge utile (un nouvel élément todo) à la État déployer.

Dans le cas du basculer action, il alterne les complété propriété de l'élément todo associé à l'ID spécifié. Le supprimer L'action, d'autre part, élimine l'élément todo lié à l'ID fourni du tableau d'état.

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 des mises à jour d'état facilitées par le useReducer Hook, le dispatching des actions devient indispensable. Les actions représentent des objets JavaScript simples qui expliquent le type de modification d'état souhaité.

La responsabilité de gérer ces actions et de générer l'état suivant incombe à la fonction de réduction.

La fonction dispatch, fournie par le useReducer Hook, est utilisé pour envoyer des actions. Il accepte un objet d'action comme argument, provoquant ainsi la mise à jour de l'état pertinent.

Dans les exemples précédents, les actions étaient distribuées en utilisant la syntaxe dispatch({type: 'actionType'}). Cependant, il est concevable que des actions englobent des données supplémentaires, appelées charge utile, qui fournit des informations supplémentaires sur la mise à jour. Par exemple:

expédition({ taper: 'ajouter', charge utile: { identifiant: 1, texte: 'Finir les devoirs', complété: FAUX } });

Dans ce scénario, le ajouter L'action comprend un objet de charge utile encapsulant les détails du nouvel élément de tâche à incorporer dans l'état.

Gérer l'état complexe avec useReducer

La vraie force du useReducer Hook réside dans sa capacité à gérer des structures d'état complexes, englobant de nombreuses valeurs interconnectées et des transitions d'état complexes.

En centralisant la logique d'état au sein d'une fonction réductrice, la gestion de divers types d'action et la mise à jour systématique de l'état devient une entreprise réalisable.

Considérez un scénario où un le formulaire de réaction se compose de plusieurs champs de saisie. Plutôt que de gérer l'état de chaque entrée individuellement via useState, le useReducer Hook 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 pertinentes à la modification de champs spécifiques et à la validation complète de l'ensemble du formulaire.

constante état initial = {
 nom: '',
 e-mail: '',
 mot de passe: '',
 isFormValid: FAUX,
};
constante réducteur = (état, acte) => {
changer (type d'action) {
cas'champ de mise à jour':
retour { ...état, [action.payload.field]: action.payload.value } ;
cas'validateForm':
retour { ...État, isFormValid: action.payload };
défaut:
retour État;
 }
};

Dans l'exemple, la fonction reducer répond à deux types d'action distincts: champ de mise à jour et validerFormulaire. Le champ de mise à jour L'action facilite la modification d'un champ spécifique dans l'état en utilisant la valeur fournie.

A l'inverse, la validerFormulaire l'action met à jour le isFormValid propriété basée sur le résultat de validation fourni.

En employant le useReducer Crochet pour gérer l'état du formulaire, tous les états et actions associés sont regroupés au sein d'une entité singulière, améliorant ainsi la facilité de compréhension et de maintenance.

Comparaison de useReducer avec d'autres solutions de gestion d'état

Bien que le useReducer Hook est un outil puissant pour la gestion de l'état, il est essentiel 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 Hook suffit pour gérer des états simples et isolés au sein d'un composant. Sa syntaxe est plus concise et simple par rapport à useReducer. Néanmoins, pour les transitions d'état ou d'état complexes, useReducer permet une approche plus organisée.

Redux

Redux représente une bibliothèque de gestion d'état de premier plan pour les applications React. Il adhère à un modèle de réducteur similaire à celui useReducer, mais fournit des fonctionnalités supplémentaires telles qu'un magasin centralisé, la prise en charge de middleware et le débogage du voyage dans le temps.

Redux s'avère idéal pour les applications à grande échelle nécessitant des exigences de gestion d'état complexes. Cependant, pour les petits projets ou les besoins de gestion d'état plus simples, useReducer peut servir d'alternative légère et plus simple.

API de contexte

L'API Context de React permet le partage d'état sur plusieurs composants sans recourir au forage d'hélice. En collaboration avec useReducer, il peut produire une solution de gestion d'état centralisée.

Tandis que la combinaison de Context API et useReducer possède une puissance considérable, il peut introduire une complexité supplémentaire lorsqu'il est juxtaposé à l'utilisation de useReducer isolément.

L'API de contexte est mieux utilisée lorsqu'il est nécessaire de partager l'état au sein de composants profondément imbriqués ou lorsqu'il 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, useReducer peut s'avérer être une alternative efficace et plus simple à Redux ou à l'API Context.

Libérer la simplicité de la gestion de l'état

Le crochet useReducer est un instrument puissant pour simplifier la gestion des états dans les applications React. En adhérant aux principes du modèle de réducteur, il offre une approche structurée et évolutive pour gérer les transitions d'état et d'état complexes.

Lorsqu'il est utilisé en tandem avec le crochet useState, useReducer peut servir d'alternative légère à des bibliothèques comme Redux ou l'API Context, en particulier dans le contexte des petites et moyennes entreprises projets.