L'une des parties les plus essentielles de toute application est gestion de l'État. Il dicte ce que les utilisateurs voient, l'apparence de l'application, les données enregistrées, etc. Il n'est donc pas surprenant qu'il existe autant d'outils open source dédiés à rendre la gestion des états plus facile et plus conviviale.
Parmi la multitude de frameworks d'interface utilisateur JavaScript, React est peut-être celui qui bénéficie de l'écosystème le plus dynamique, y compris les bibliothèques de gestion d'état. Cet article couvrira deux de ces bibliothèques : Recoil et Redux - et montrez en quoi ils diffèrent l'un de l'autre, ainsi que leurs différentes approches en matière de développement d'applications.
Alors que Redux est considéré comme le plus populaire bibliothèque de gestion de l'État, Recoil est l'expérience de Facebook Cadre de gestion de l'état React qui a récemment fait l'objet d'une grande attention. Jetons un coup d'œil à ce que sont Recoil et Redux, leurs performances et s'il est judicieux d'utiliser l'un plutôt que l'autre.
UNE la bibliothèque de gestion d'état vous offre un moyen pratique de modéliser l'état de votre application, en déduisez des valeurs calculées et surveillez-le pour détecter les modifications.
En termes simples, la gestion de vos données dans des frameworks frontaux est tout aussi importante que dans des bases de données. Disposer d'un système de gestion de l'état qui gère bien vos données, vous permet d'éviter un certain nombre d'appels d'API.
Sans gestion de l'état, les données sont disséminées partout, comme vous pouvez le voir sur l'image ci-dessous. Vous ne pouvez pas réellement disposer d'une source unique de vérité pour vos données, car ce type de structure est difficile à gérer et ralentit votre processus de développement.
Lorsque vous avez un système de gestion de l'État en place, les données circulent dans une seule direction, de votre application vers l'État et vice versa. Vous connaissez l'emplacement réel de vos données. Ces technologies de gestion de l'état fournissent également un aperçu de l'ensemble de données complet à un moment donné. De cette façon, vous savez exactement où se trouvent vos données, quelles accélère le développement.
Dans l'ensemble, une bonne gestion de vos données rend votre application plus efficace.
Recoil est est une nouvelle bibliothèque de gestion d'état pour React. C'est « minimal et réactif », comme le dit le site Web et, en pratique, cela ressemble beaucoup à l'utilisation des hooks d'état d'utilisation normale, mais avec quelques petites touches plus sympathiques qui le rendent plus facile à comprendre la façon dont les données circulent dans votre application.
Redux est une bibliothèque open source dans le monde JavaScript, très populaire dans le domaine de React et React Native. C'est en quelque sorte un outil incontournable pour tous les développeurs de React. Comprendre les concepts de React et Redux va donc de pair.
Il implémente également Flux, l' « architecture » proposée pour gérer l'état sur une application React.
Redux fournit un magasin centralisé pour l'état et la logique de votre application. Il donne aux composants un accès direct aux données dont ils ont besoin. Il s'agit d'un conteneur d'états prévisible conçu pour vous aider à écrire des applications JavaScript qui se comportent de manière cohérente dans les environnements client-serveur et natifs.
Redux vous permet de faciliter la création d'applications complexes en assurant la cohérence des données dans l'ensemble de l'application. Au fur et à mesure que l'application se développe, la gestion des données avec l'état des composants devient difficile.
Mais pour utiliser Redux, vous n'avez pas besoin de créer une application React : vous pouvez utiliser Redux avec n'importe quel framework ou bibliothèque d'interface utilisateur pour gérer l'état de l'application. Redux dispose d'un vaste écosystème de modules complémentaires pour répondre à vos besoins.
De plus, vous pouvez suivre quand, où, pourquoi et comment l'état de votre application change en utilisant Outils de développement Redux.
Redux est la bibliothèque de choix depuis longtemps, mais avec le lancement de Recul, nous disposons désormais d'une bibliothèque spécifique à React qui s'intègre facilement aux dernières fonctionnalités de React.
Jetons un coup d'œil : à quel moment est-il judicieux d'utiliser ? Recoil et Redux, leurs approches par état, leurs performances, leurs différences d'API et l'expérience des développeurs et des utilisateurs.
Contrairement à Recoil, Redux emploie de nombreux autres termes :
actions - il envoie un message à Redux et peut contenir des données ; une action est un événement qui définit quelque chose qui s'est passé dans l'application ; il possède un type champ sur un objet JavaScript.
réducteurs - un écouteur d'événements qui gère les événements en fonction de l'action reçue ; reçoit les informations en cours état et un actionobjet ; il peut mettre à jour l'état si nécessaire ((état, action) => (Nouvel État)).
magasin - c'est là que réside l'état de l'application Redux ; une certaine planification est nécessaire pour « concevoir » le magasin afin de garantir que les mises à jour soient effectuées sur le plus petit ensemble de données, car les mises à jour du magasin déclencheront des mises à jour dans l'interface utilisateur.
Un scénario assez courant consiste à envoyer accidentellement une mise à jour au magasin avec un ensemble de valeurs, dans lequel une seule des valeurs diffère de celles trouvées dans le magasin. Ils ordonneront aux composants de s'afficher à nouveau pour tous les éléments reçus, mais une seule valeur a été réellement mise à jour. Néanmoins, nous dépensons des ressources informatiques pour demander aux composants de se mettre à jour, ce qui n'était pas nécessaire en raison de la mauvaise conception du magasin/du réducteur/de l'action.
expédition - vous permet de mettre à jour l'état en appelant store.dispatch (); il envoie des actions, c'est-à-dire qu'elles déclenchent un événement.
sélecteurs- extrait des informations spécifiques d'un magasin ; cela évite de répéter la logique.
Regardons l'exemple ci-dessous :
Juste des définitions pour mapper les actions avec les opérations du réducteur.
constants.js
Définit comment l'état de l'application change en fonction des actions reçues. Cet exemple comporte deux tranches, l'une pour Données de l'utilisateur et un autre pour Panier. L'action pour une connexion réussie enregistrera les données de l'utilisateur dans l'état. En cas de déconnexion réussie, nous effaçons les données et le panier de l'utilisateur.
reducers.js
Définition des actions qui déclencheront des changements d'état. Ils peuvent recevoir une charge utile pour introduire de nouvelles données dans l'état. Nous avons une action à lancer après une connexion réussie et une autre pour une déconnexion réussie.
actions.js
selectors.js
Ne contient que quelques concepts simples :
atome - un état ; chaque atome est comme un mini-magasin à lui seul et il devient de plus en plus difficile de revenir au scénario précédent de Redux puisque les atomes sont complètement découplés et visent à contenir des données qui seront mises à jour en une seule fois.
sélecteur - la base sur laquelle un élément d'état est calculé.
Exemple ci-dessous :
state.js
component.js
Créer une tranche () aux côtés de Configurer Store (), qui comprend des actions et des réducteurs ;Utiliser Dispatch et Utiliser le sélecteur crochets pour envoyer des actions et utiliser des sélecteurs.
atome (), qui est également livré avec un sélecteur et des actions distribuables intégrées.
Redux est bon pour appliquer les meilleures pratiques des développeurs, vous fournissant un modèle simple à suivre pour ne pas avoir à prendre trop de décisions d'implémentation lors de la création de fonctionnalités. Il vous permet également de résumez vos demandes d'API en actions ainsi, tout se trouve au même endroit.
On dit que Recoil est assez facile à utiliser. Il vous permet, par exemple, d'effectuer des requêtes asynchrones dans des sélecteurs pour démarrer avec l'état à partir d'une demande d'API.
Si vous souhaitez gérer les états de chargement et d'erreur, vous pourriez avoir besoin d'une implémentation personnalisée. C'est une bonne pratique de suivre une évolution mondiale est en cours de chargement variable dans le réducteur.
Comme Recoil s'intègre au dernier mode de React, il vous permet de gérer les états de chargement avec Suspense et des erreurs avec un Limite d'erreur, vous permettant de créer votre application de manière plus déclarative.
state.js
component.js
Redux a été créé en tant que leader de la gestion de l'État mondial pendant un certain temps, et cela ne va certainement pas disparaître de sitôt. Toutefois, Recoil est en train de devenir un sérieux concurrent pour se fondre dans React.
Un avantage majeur de l'utilisation de Recoil est sa intégration avec React's Suspense, qui permet de gérer facilement les tâches asynchrones et de détecter leur état, vous permettant ainsi de configurez rapidement les écrans de chargement sans nécessiter autant de code logique pour vérifier que l'application charge des données depuis le serveur.
Même si Redux est la meilleure option pour les grands projets et la meilleure pour une application de production, il est juste de dire que Recoil peut être un meilleur choix en ce qui concerne à la fois l'expérience des développeurs et l'expérience utilisateur. Recoil en est encore à un stade expérimental, mais il peut apporter des avantages en termes de performances si votre application est suffisamment complexe.
Plus de 500 000 personnes lisent notre blog chaque année et nous sommes classés en tête de Google pour des sujets tels que React, Recoil et Redux. Si vous avez aimé cet article de blog et que vous aimeriez lire tous nos articles de blog, jetez un œil ici.
Lisez aussi :
Un spécialiste du marketing de croissance polyvalent et axé sur les données, doté d'une connaissance approfondie des affaires et informé des derniers développements dans le paysage du marketing numérique.
Votre développeur web de tous les jours qui aime se cacher dans le backend. Javascript et Ruby sont mes préférés. Je me débrouille toujours avec Docker et mes builds se cassent assez souvent.
Développeur full stack et passionné de JavaScript. Un front-end de premier ordre, c'est mon truc où j'aime expérimenter de nouvelles choses. Pêcheur en kayak, brasseur et buveur de bière !
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
