Redux et Hooks React ne doivent pas être considérés comme l'opposé de l'un de l'autre. Ce sont des choses différentes, avec des objectifs distincts.
Quand Hooks React est né, plusieurs développeurs semblaient perplexes face aux concepts introduits et à la manière dont ils seront interpolés dans le Redux library. Le Utilisez Reducer Hook a accru cette confusion.
Dans cet article, je vais vous expliquer comment Redux et le nouveau Hook React Utilisez Reducer sont différents et comment ils peuvent être utilisés.
Redux a été créé pour gérer l'état de l'application. Il fournit plusieurs outils pour simplifier la gestion de l'état global de l'application.
Les nouveaux ajouts au Réagir library, Use the context et Utilisez Reducer, est également venu gérer l'état d'un Réagir candidature. Cependant, il présente une subtile différence avec Redux, que je vais clarifier plus loin.
Mais tout d'abord, permettez-moi de vous présenter Hooks React.
React Hooks est la nouvelle méthode de gestion de l'état et du cycle de vie des composants React, sans compter sur les classes de composants. Il a été introduit dans la version 16.8 de la bibliothèque et a pour but de réduire la complexité des composants en partageant la logique entre eux.
Hooks React fournit un moyen facile de les manipuler composant behavior and partagez composant logique.
Le Hooks React cette fonctionnalité n'a pas l'intention de remplacer les connaissances antérieures de Réagir des concepts tels que cycle de vie, état, accessoires, contexte, et réfs.
Avec Hooks React, nous pouvons écrire nos hooks personnalisés pour extraire la logique qui sera utilisée dans plusieurs composants et implémenter le D.R.Y (Ne vous répétez pas) motif.
Dans l'extrait ci-dessous, vous pouvez voir un exemple de hooks personnalisés écrits pour l'un de nos projets :
D'accord, maintenant que nous savons Hooks React, jetons un coup d'œil à Redux.
Redux est une bibliothèque permettant de gérer l'état global de l'application. Dans cette bibliothèque, nous pouvons trouver plusieurs outils qui nous aident, les développeurs, à être en contact avec l'état de l'application et à le transformer en donnant à l'utilisateur la possibilité d'émettre actions.
Redux, comme le dit la documentation, peut être décrit selon trois principes fondamentaux :
magasin.magasin c'est en émettant des actions.magasin, le réducteur doit être écrit comme une fonction pure.Redux same mis à jour la bibliothèque avec ses crochets personnalisés. Ils peuvent être utilisés pour intégrer les composants qui utilisent Hooks React fonctionnalités permettant d'accéder aux données du magasin et à des actions d'expédition sans avoir recours aux classes de composants.
Maintenant que nous sommes un peu plus familiarisés avec Redux et Hooks React voyons la différence entre les deux.
Les deux gèrent la gestion de l'État, mais à quelques différences près. Il y a beaucoup d'abstraction dans la phrase suivante, mais cela semble être une règle d'or pour savoir quand utiliser Redux dans votre application :
Redux doit être utilisé dans des applications dotées de plusieurs fonctionnalités. Grâce à ces fonctionnalités, vous partagez des parties des mêmes informations.
Lors de l'utilisation du Use the context et Utilisez Reducer, le Redux les fonctionnalités peuvent être reproduites. Redux propose des outils gratuits qui nous aident à gérer l'application sans réinventer la roue. Il nous offre également les avantages suivants :
connecteur () fonction.
Sens un peu plus sur la réalité Réagir addictions, Hooks React, pour gérer l'état global et son utilisation idéale.
Le Use the context le crochet vient accéder au état qui est partagé par fournisseurs. Le meilleur scénario pour utiliser le Hooks React Use the context se trouve dans une petite application ou permet de partager de petites informations entre les composants, comme le thème de l'application. Le Use the context a deux concepts principaux, qui sont énumérés ci-dessous.
This provider create the theme objet qui sera utilisé dans toutes les applications et une fonction pour le mettre à jour, le Definar the theme. Dans l'extrait ci-dessous, vous pouvez consulter les Definar the theme en action.
Dans l'extrait ci-dessus, nous pouvons vérifier l'utilisation de l'objet global theme pour définir la couleur de fond de notre application.
Après avoir appris à connaître Use the context fonction, il y en a une autre qui embrouille les développeurs. Le Utilisez Reducer crochets. Dans la section ci-dessous, je vais parcourir cette fonctionnalité et expliquer son cas d'utilisation.
Le Utilisez Reducer hook doit être utilisé dans les composants qui reposent sur une logique complexe. Cela apparaît comme la principale confusion avec le Redux bibliothèque, car les développeurs ont tendance à penser que Utilisez Reducer pourrait remplacer la bibliothèque du directeur de l'État. Mais en fait, son utilisation devrait être limitée aux composants. Cela s'explique principalement par le fait que l'utilisation mondiale de Utilisez Reducer exige la réécriture du nouveau code pour des fonctionnalités telles que le contrôle de la mise à jour des composants.
Maintenant que nous comprenons le cas d'utilisation du Utilisez Reducer Hook est le moment de montrer de l'action. Dans l'exemple ci-dessous, nous utilisons le nouveau Hook React toxicomanie Utilisez Reducer pour contrôler un composant avec différents états.
Jetons un coup d'œil en profondeur à la Utilisez Reducer paramètres d'entrée et de sortie.
La déclaration du Utilisez Reducer hook ressemblera très probablement à ceci :const [état, expédition] = useReducer (réducteur, INITIAL_STATE) ;
Où l'on peut identifier que Utilisez Reducer hook reçoit deux paramètres, comme indiqué ci-dessous :
Le premier paramètre de sortie du hook est l'état réel du composant. Cet état doit être utilisé dans notre application pour représenter les données.
Il suit également la même règle de la Réagir state, c'est-à-dire :
N'écrivez jamais directement dans l'état et l'état doit être mis à jour en émettant actions.
Le actions ce sera expédié by our components doit toujours être représenté comme un seul objet avec le type et charge utile clé. Où type est l'identifiant du expédié action et charge utile is the information according which this action s'ajoutera à l'État.
En plus de toutes ces pièces, nous pouvons voir le résultat final dans l'application ci-dessous :
Redux et Hooks React doivent être considérés comme des compléments et aussi comme des éléments différents. Alors qu'avec le nouveau Hooks React des ajouts, Use the context et Utilisez Reducer, vous pouvez gérer l'état global, dans des projets de plus grande complexité sur lesquels vous pouvez compter Redux pour vous aider à gérer les données de l'application.
Si vous pensez à création d'une application, les deux peuvent être utilisés. Alors que Redux contient l'état global et les actions qui peuvent être envoyées, le Hooks React fonctionnalités permettant de gérer l'état du composant local.
Développeur Javascript depuis 2016, j'ai créé des applications mobiles en utilisant Ionic et React Native. Guitariste et passionné de cuisine.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
