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

Dec 18, 2023

Le crochet useReducer est l'une des meilleures options de gestion d'état dans React. Commencez votre voyage avec le crochet useReducer en utilisant ce guide.

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éagissezuseState Hook fournit une approche simple pour gérer l'état, mais cela devient fastidieux avec un état complexe. C'est là que leuseReducerLe crochet entre.

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

LeuseReducer 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 auuseStateHook, particulièrement adapté à la manipulation d'états complexes.

En tirant parti de lauseReducerHook, 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 JavaScriptArray.prototype.reduce()méthode.

La syntaxe d'utilisation deuseReducerLe crochet est le suivant :

LeuseReducerfonction accepte deux arguments :

Sur invocation, leuseReducerHook renvoie un tableau composé de deux éléments :

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

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

En tirant parti de lauseReducer 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.

Pour une utilisation optimale duuseReducer 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.

En règle générale, une fonction de réduction utilise 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 :

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

Dans le cas dubasculeraction, il alterne lescomplété propriété de l'élément todo associé à l'ID spécifié. LesupprimerL'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.

Pour effectuer des mises à jour d'état facilitées par leuseReducer 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 leuseReducer 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 syntaxedispatch({type : 'actionType'}) . Cependant, il est concevable que des actions englobent des données supplémentaires, appeléescharge utile , qui fournit des informations supplémentaires sur la mise à jour. Par exemple:

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

La vraie force duuseReducerHook 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 formulaire de réaction se compose de plusieurs champs de saisie. Plutôt que de gérer l'état de chaque entrée individuellement viauseState, leuseReducerHook 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.

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

A l'inverse, lavaliderFormulairel'action met à jour leisFormValidpropriété basée sur le résultat de validation fourni.

En employant leuseReducerCrochet 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.

Bien que leuseReducerHook 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.

LeuseState 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,useReducerpermet une approche plus organisée.

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 à celuiuseReducer, 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,useReducerpeut servir d'alternative légère et plus simple.

L'API Context de React permet le partage de l'état entre plusieurs composants sans recourir au forage d'accessoires. En collaboration avecuseReducer, il peut produire une solution de gestion d'état centralisée.

Tandis que la combinaison de Context API etuseReducerpossè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,useReducerpeut s'avérer être une alternative efficace et plus simple à Redux ou à l'API Context.

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 aux bibliothèques comme Redux ou l'API Context, en particulier dans le contexte de projets de petite à moyenne taille.

Paul est un passionné de gadgets qui croit au pouvoir de la technologie pour changer le monde. Il est connu pour ses articles engageants et informatifs, faisant de lui un écrivain à surveiller dans le monde de la technologie.