L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comprendre le recul dans React
Découvrez la nouvelle bibliothèque introduite par Facebook appelée Recoil, qui vise à résoudre quelques problèmes tels que l'état partagé, les données et requêtes dérivées, l'observation à l'échelle de l'application et bien d'autres.
Un développeur ne cesse d'apprendre, en particulier à cette époque où de nouvelles bibliothèques et concepts sont créés presque tous les jours. Une partie du travail d'un développeur est de toujours être au courant de ce qui se passe, de ce qui a été publié et de savoir s'il y a quelque chose de nouveau dont on parle dans la communauté.
React est connu pour être la meilleure et la plus utilisée des bibliothèques d'interface utilisateur JavaScript actuellement , et il y a de nombreuses raisons à cela. L'une des principales raisons pour lesquelles React est si populaire est la communauté – elle crée et publie toujours quelque chose de nouveau qui peut améliorer le travail des développeurs React.
Cette année, à la conférence React Europe 2020, la communauté React a été présentée à un nouvel état bibliothèque de gestion créée par Facebook appelée Recoil. Une autre bibliothèque de gestion d'état pour React? Quels sont les avantages d'utiliser cette nouvelle bibliothèque et pas quelque chose de plus familier et robuste, avec plus d'exemples et de cas d'utilisation, comme Redux?
Donc, dans cet article, nous en apprendrons plus sur cette bibliothèque de gestion d'état appelée Recoil et comprendrons ses cas d'utilisation, les différences par rapport aux autres bibliothèques de gestion d'état, et comment nous pouvons commencer à l'utiliser dans nos projets.
Pourquoi Recoil?
La plupart des bibliothèques de gestion d'état servent très bien les applications simples – les applications qui n'ont pas de nombreuses fonctionnalités complexes et nécessitent que le travail soit effectué rapidement. Dans certains cas, nous pourrions avoir besoin d’utiliser quelque chose de plus complexe pour résoudre un problème spécifique, et c’est à ce moment que les bibliothèques conventionnelles pourraient ne plus nous aider.
Il n’y a rien de mal avec Redux ou MobX, les bibliothèques les plus populaires pour les applications React. Ces bibliothèques sont utiles et, dans la majorité des cas, elles suffisent pour garder vos données d'état en ordre et permettre à votre application de très bien évoluer. Le seul problème avec ces bibliothèques est qu'elles nécessitent beaucoup de configuration et nous devons mettre en place un tas de choses avant de commencer, en particulier avec Redux.
Pour travailler avec Redux, par exemple, il y a beaucoup de travail à faire à faire pour mettre en place un magasin simple avant de commencer à gérer l'état de votre application. La plupart du temps, nous utilisons des bibliothèques tierces pour des choses telles que la mémorisation, les valeurs de sélecteur calculées, etc. Dans ces cas spécifiques, Redux ne peut pas nous aider. Il y a donc une limite à ce que nous pouvons faire et réaliser avec Redux seul.
L'équipe de Facebook qui a créé Recoil a rencontré des problèmes en travaillant dans le développement d'applications internes. Pour la plupart des fonctionnalités dont ils avaient besoin, une bibliothèque de gestion d'état conventionnelle ne pouvait pas les aider, ou ils perdraient beaucoup de temps dessus. Des choses comme la synchronisation d'état entre les composants, l'état dérivé, l'observation à l'échelle de l'application, etc.
Quelques points de Recoil qui rendent cette nouvelle bibliothèque de gestion d'état très puissante:
- État partagé – Partager le même état dans différents composants de l'arborescence React d'une manière vraiment performante et cohérente.
- Données et requêtes dérivées – Calculez efficacement les choses en fonction du changement d'état d'une manière très robuste et sans bogue. Les données dérivées sont des choses qui sont calculées ou liées à l'état d'une manière ou d'une autre.
- Observation de l'état à l'échelle de l'application – Observez les changements, le débogage du voyage dans le temps, la persistance, la journalisation – observez tout ce qui se passe dans l'application à partir d'un composant
Voici les deux concepts de base que nous devrions apprendre avant de commencer à utiliser Recoil:
Atoms
Un atome est une unité modifiable et abonnable de l'état. Imaginez les atomes comme un état React local auquel n'importe quel composant peut souscrire. Les atomes peuvent être mis à jour et souscrits, et la modification de la valeur d’un atome restituera le rendu de chaque composant abonné à cet atome spécifique. Tous les composants souscrits à un atome partagent le même état.
Voici comment créer un atome en utilisant Recoil:
const loadingState = atom ([19659021] {
clé : 'loadingState'
default : false
} ) ;
Pour créer un atome, nous devons fournir une clé qui doit être une valeur unique. Cette clé est utilisée pour la persistance, le débogage, etc. De plus, nous devons fournir la valeur default de notre atome, il peut s'agir de n'importe quoi comme des tableaux, des objets, des chaînes, des fonctions, etc.
Pour qu'un composant s'abonne à un atome, nous devons utiliser le hook useRecoilState . C'est un hook similaire au useState de React, mais à l'intérieur de ce hook, nous passons l'atome auquel nous voulons nous abonner.
import { atom } [19659035] de 'recoil' ;
const loadingState = atome ( {
clé : 'loadingState'
default : false
} ) ;
const App = () => {
const [ loading setLoading ] = useRecoilState ( loadingState ) ;
...
}
Parfois, nous voulons simplement renvoyer la valeur d'un état spécifique. C'est très possible et simple à faire avec Recoil. On ne peut renvoyer que la valeur d'un atome, sans la fonction setter, en utilisant le crochet useRecoilValue .
import { atom } from ' recoil ';
const loadingState = atome ( {
clé : 'loadingState'
default : false
} ) ;
const App = () => {
const loading = useRecoilValue ( loadingState ) ;
...
}
Sélecteurs
Un sélecteur est une fonction pure qui peut recevoir un atome ou un sélecteur en entrée. Étant donné une entrée, le sélecteur renvoie un état modifié à chaque fois que les atomes ou sélecteurs en amont sont mis à jour. Les sélecteurs peuvent également être abonnés à, et encore une fois, lorsque le sélecteur change, chaque composant qui est abonné à ce sélecteur spécifique sera de nouveau rendu.
Pour créer un sélecteur, nous devons fournir une clé, qui doit être unique value et une fonction get . Cette fonction get renvoie une partie modifiée d'un atome.
import { selector } from 'recoil' ;
const checkLoadingState = sélecteur ( {
clé : 'loadingState'
get : ( { get } ) => [19659034] {
const loading = get ( loadingState )
return `Le chargement est $ { chargement ? "vrai" : " faux } "
} ) ;
Recoil a un API assez simple et puissante, pour que tout le monde puisse démarrer facilement et rapidement avec cette nouvelle bibliothèque de gestion d'état. Maintenant que nous en savons un peu plus sur Recoil, construisons quelque chose pour que nous puissions voir comment cela fonctionne dans la pratique.
## Mise en route
Maintenant que nous connaissons les bases de Recoil, la meilleure façon de le comprendre est de créer quelque chose. Créons un exemple où nous pouvons partager l'état de notre utilisateur connecté entre les composants. [19659003] Commençons par créer un nouveau create- react-app :
create-react-app recoil-example
Maintenant, installons Recoil:
yarn add recoil
Dans l'ordre pour utiliser l'état Recoil, nous devons envelopper nos composants désirés avec un composant racine appelé RecoilRoot . Maintenant, nous pouvons utiliser l'état Recoil dans les composants qui se trouvent à l'intérieur RecoilRoot .
Dans notre composant App, nous allons importer le RecoilRoot et mettre tous nos composants à l'intérieur:
import { RecoilRoot } from 'recoil' ;
const App = ( ) => {
return (
< _RecoilRoot_ >
...
< / _RecoilRoot_ >
) ;
}
Maintenant, avant de créer nos composants pour montrer notre état, nous allons créer un atome et un sélecteur. Créons un fichier appelé helpers . Dans ce fichier, nous importerons les fonctions atom et selector de Recoil.
import {atom, selector} from "recoil";
Voici ce que nous voulons faire, pour que les choses deviennent claires. Nous voulons créer un atome où nous pouvons obtenir l'utilisateur actuellement connecté. Nous allons créer un atome appelé LogInUserState et, comme valeur par défaut, nous pouvons passer le nom que nous voulons.
export const LogInUserState = atome ( {
clé : 'LogInUserState'
par défaut : {
name : "John"
}
} )
Maintenant, nous allons créer notre sélecteur. Notre sélecteur retournera simplement un message en obtenant le nom de l'utilisateur actuellement connecté. Nous allons créer un sélecteur appelé LogInUserSelector et voici à quoi il ressemblera:
export const LogInUserSelector = selector ([19659021] {
clé : 'LogInUserSelector'
get : ( { _get_ } ) => [19659034] {
const user = get ( LogInUserState )
return `Bonjour $ { user ]. nom } vous êtes connecté! `
}
} )
Dans notre sélecteur logInUserSelector nous utilisons la fonction get pour que l'utilisateur actuellement connecté passe notre logsInUserState atome et renvoie un message.
Nous allons créer deux composants: ] En-tête et Tableau de bord . Dans notre composant Header nous afficherons simplement l'utilisateur actuellement connecté. Créons notre composant Header comme ceci:
import React from "react" ;
const Header = [19659034] () => {
return (
< header >
< h3 > Enregistré dans < / h3 >
< / header >
)
} ;
export default Header ;
Dans notre composant Header nous allons importer notre atome logInUserState et un hook de Recoil . Nous allons utiliser le useRecoilValue puisque dans ce composant Header nous allons simplement montrer l'utilisateur actuellement connecté.
Importons notre logInUserState et constante appelée LogInUser et affiche le nom de l'utilisateur actuellement connecté dans notre élément h3 . Dans notre useRecoilValue nous allons passer notre logsInUserState atome, ce qui signifie que maintenant ce composant est souscrit à cet atome, donc chaque fois que cet atome change, ce composant sera ré rendu.
import React from "react" ;
import { useRecoilValue } from 'recoil' ;
import { logInUserState } from "./ helpers" ;
const Header = ] () => {
const LogInUser = useRecoilValue ( LogInUserState ) ;
return (
< header >
< h3 > Logged in : { LogInUser . nom } < / h3 >
< / header >
)
} ;
export default Header ;
Nous avons maintenant notre composant Header fonctionnant correctement. Créons maintenant notre composant Dashboard . À l'intérieur de ce composant, nous pourrons afficher et modifier le nom de l'utilisateur actuellement connecté.
Voici à quoi ressemblera notre composant Dashboard :
import React de "react" ;
const Dashboard = () => {
return (
< main >
< h3 > Bonjour . Vous êtes connecté dans < / h3 >
< h3 > "" < / h3 >
< input _type_ = "text" _value_ = "" _onChange_ = { () => [19659034] {} } / >
< button > Submit < / button >
< / main >
)
} ;
export default Dashboard ;
Importons maintenant quelques éléments. Nous allons importer le hook useState de React pour obtenir la valeur de notre entrée, le useRecoilValue et useRecoilState de Recoil, et notre logInUserState atom et LogInUserSelector sélecteur.
Nous allons utiliser le useRecoilState pour obtenir notre utilisateur actuellement connecté et une fonction setter pour définir un nouvel utilisateur. useRecoilValue renverra simplement l'utilisateur actuellement connecté.
const [ user setUser ] = useState [19659021] ( '' ) ;
const [ LogInUser setLoggedInUser ] = useRecoilState [19659021] ( LogInUserState ) ;
const userLoggedIn = useRecoilValue ( LogInUserSelector )
Now; , nous allons créer une fonction appelée onChange pour obtenir la valeur réelle de l'entrée, et une fonction appelée loginUser que nous utiliserons pour définir le nouveau nom du journal -in user.
const [ user setUser ] = useState ( '' ) [19659021];
const [ logInUs euh setLoggedInUser ] = useRecoilState ( LogInUserState ) ;
const userLoggedIn userLoggedIn 19659020] useRecoilValue ( logInUserSelector ) ;
const onChange = ( { target : { _value_ } } : _any_ ) => {
setUser ( _value_ ) ;
} ;
const loginUser = () => {
setLoggedInUser ([19659021] { nom : utilisateur } )
} ;
Voici à quoi devrait ressembler notre dernier composant Dashboard :
import React { useState } from " react ";
import { useRecoilState useRecoilValue } from 'recoil' ;
import ] { LogInUserState LogInUserSelector } from "./ helpers" ;
const Dashboard = ( ) => {
const [ user setUser ] = useState ([19659289] '' ) ;
const [ LogInUser setLoggedInUser ] = useRecoilState ( ] LogInUserState ) ;
const userLoggedIn = useRecoilValue ( LogInUserSelector ) ; [1965905125] const ; [1965905125] const ; [1965905125] const = ( { cible : {[1945900] 4] _value_ } } : _any_ ) => {
setUser ( _value_ ) [19659021];
} ;
const loginUser = () => {
setLoggedInUser ( { nom : utilisateur } )
} ;
return (
< main > [19659063] < h3 > Bonjour { LogInUser . name } . Vous êtes connecté dans < / h3 >
< h3 > { userLoggedIn } <[19659158] / h3 >
< input _type_ = "text" _value_ = { user } _onChange_ = { onChange } / >
< button _onClick_ = { loginUser } > Submit <[19659158] / bouton >
< / main >
)
} ;
export default Tableau de bord ;
Nous pouvons désormais modifier le nom de l'utilisateur actuellement connecté. Recoil est, en fait, vraiment génial. Dans une application qui a beaucoup de contextes, Recoil peut faire de la magie et remplacer beaucoup de code par des atomes et sélecteurs simples et puissants.
Dois-je l'utiliser?
C'est une question que beaucoup de développeurs posent eux-mêmes chaque fois qu'ils voient une nouvelle bibliothèque publiée. Tout d'abord, vous devez comprendre ce qu'il résout avant de commencer à migrer l'ensemble de votre projet vers Recoil.
Voici quelques points qui pourraient vous aider à décider si vous devez l'utiliser ou non:
Votre application en aura-t-elle besoin? pour partager l'état entre les composants, et vous ne voulez pas vous fier à quelque chose comme React Context? Recoil pourrait être une bonne solution pour cela.
Votre application doit-elle conserver la synchronisation de l'état entre les composants, a besoin de persistance entre les URL et observer tout ce qui se passe dans votre arborescence React? Le recul pourrait être une bonne solution pour cela.
Conclusion
Dans cet article, nous en avons appris davantage sur une nouvelle bibliothèque de gestion d'état introduite par Facebook appelée Recoil. Recoil apporte les concepts d'atomes et de sélecteurs. Les atomes sont des éléments de l'état React auxquels peuvent souscrire n'importe quel composant à l'intérieur du composant racine. Les sélecteurs sont des fonctions pures qui peuvent recevoir des atomes et des sélecteurs et renvoyer un état dérivé.
Source link