Gestion d’état dans React with Recoil / Blogs / Perficient

Avez-vous déjà créé une application React et vous êtes retrouvé aux prises avec des mises à jour d’état enchevêtrées, un perçage excessif des accessoires ou des configurations de contexte trop complexes ? Vous n’êtes certainement pas seul ! À mesure que votre application évolue, la gestion de l’état dans React peut devenir assez délicate. C’est là que Recoil vient à la rescousse, une nouvelle bibliothèque puissante conçue pour rationaliser la gestion des états d’une manière qui ressemble presque à de la magie.

Ne vous inquiétez pas, cependant ; vous n’avez pas besoin d’être un pro de React pour le comprendre. Dans ce blog, nous explorerons ce qu’est Recoil et pourquoi il pourrait être la solution parfaite pour vous aider à maintenir une application propre, efficace et facile à gérer.

Dans mon message précédentj’ai commencé une exploration détaillée de « L’excellence de la gestion de l’État dans React » où nous avons discuté de certaines des bibliothèques de gestion d’état les plus utilisées dans l’écosystème React.

Introduction au recul –

Dans mon blog précédent, nous avons exploré Reculune bibliothèque de gestion d’état créée par Facebook qui offre une solution fluide pour gérer l’état dans les applications React. Il est particulièrement efficace pour les projets de petite et moyenne taille, améliorant les fonctionnalités intégrées de React avec des outils puissants qui simplifient les tâches complexes. Recoil permet aux développeurs de gérer l’État de manière flexible, adaptée aux besoins spécifiques de leurs projets.

Dans cet article, nous aborderons les principales fonctionnalités de Recoil : atomes et sélecteursqui servent de base à une gestion étatique simple et efficace.

Configuration du recul dans votre application React

Pour commencer, la première étape consiste à installer Recoil dans votre projet :

npm install recoil

Regarder le package.json déposer, Le recul a été installé dans notre projet.

Après la configuration, Recoil nécessite le ReculRacine composant au niveau supérieur de votre application, comme la façon dont Redux nécessite le Fournisseur pour envelopper l’application.

Recul –

import { RecoilRoot } from 'recoil';                                                      
ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

Redux –

import { Provider } from 'react-redux';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Plonger dans les concepts fondamentaux du recul –

Atomes :

• Conteneurs de données: Les atomes agissent comme des mini unités de stockage dans lesquelles vous conservez les données de votre application (comme des nombres, des chaînes ou des objets).

• Accessible partout: n’importe quel composant de votre application peut récupérer ou modifier le contenu d’un atome, peu importe où il se trouve.

• Mises à jour instantanées: Chaque fois que la valeur à l’intérieur d’un atome change, tous les composants utilisant cet atome s’actualisent automatiquement pour refléter les nouvelles données.

• Évitez le passage d’accessoires: Les atomes vous permettent d’éviter le perçage d’accessoires, vous n’avez donc pas besoin de transmettre des données à travers plusieurs couches de composants.

• Léger et puissant: Les atomes sont rapides à configurer et rendent la gestion de l’état dans votre application beaucoup plus facile et plus efficace.

Créer un atome en recul –

import { atom } from 'recoil';
export const nameState = atom({
  key: 'nameState',  
  default: 'Muskan',  
});

Ici, nous créons un atome nommé nomÉtat en recul. Il utilise l’identifiant unique ‘nomÉtat’ et définit la valeur par défaut sur ‘Muskan.’ Cet atome contient des données accessibles et modifiables sur divers composants de votre application.

Passons maintenant à un autre concept clé : les sélecteurs.

Sélecteurs-

• Calcul d’état dynamique : Les sélecteurs vous permettent de calculer ou de transformer des données à partir d’atomes ou d’autres sélecteurs, générant des valeurs dynamiques.

• Mise à jour automatique : Lorsque l’état d’un atome change, le sélecteur met automatiquement à jour la valeur dérivée.

• Rendu efficace : Les sélecteurs déclenchent un nouveau rendu uniquement lorsque leur valeur dérivée change, améliorant ainsi les performances de l’application.

• Aucun suivi supplémentaire : Oubliez le suivi manuel : les sélecteurs gèrent automatiquement les modifications apportées aux données dynamiques.

• Logique simplifiée : Utilisez des sélecteurs pour simplifier la logique d’état complexe et garder votre code plus organisé et maintenable.

Création d’un sélecteur en recul

import { selector } from 'recoil';
import { nameState } from './state'; // Importing the atom that holds the name
export const nameLengthSelector = selector({
  key: 'nameLengthSelector',  
  get: ({ get }) => {
    const name = get(nameState); // Retrieving the value of nameState atom
    return name.length;  
  },
});

Le nomLongueurSélecteur est un sélecteur qui calcule dynamiquement la longueur de la chaîne stockée dans le nomÉtat atome. En utilisant la fonction get, il récupère la valeur actuelle du nomÉtat et calcule sa longueur. Cette approche permet le calcul automatique de la longueur du nom, éliminant ainsi le besoin de mises à jour manuelles ou de calculs redondants dans l’ensemble de l’application.

En plus de atomes et sélecteursRecoil offre plusieurs fonctionnalités remarquables :

• Rendus efficaces : Seuls les composants qui utilisent l’état modifié seront restitués, améliorant ainsi la vitesse de l’application.

• État global et local : Recoil facilite la gestion de l’état global et local dans votre application.

• Pas de perçage d’accessoires : Vous n’avez pas besoin de transmettre les données à travers de nombreuses couches de composants, car les atomes et les sélecteurs donnent aux composants un accès direct à l’état.

Ces fonctionnalités font de Recoil un choix simple et puissant pour gérer l’état dans les applications React.

Conclusion –

Recoil rend la gestion de l’état dans React simple et efficace. Il simplifie la gestion de l’état global et local, supprime le besoin de forage d’accessoires et améliore les performances en effectuant un nouveau rendu uniquement lorsque cela est nécessaire. Avec son API facile à comprendre et ses concepts clairs comme les atomes et les sélecteurs, Recoil est un choix idéal pour les développeurs à la recherche d’un moyen rapide et simple de gérer l’état dans React !

C’est terminé pour aujourd’hui ! Mais n’allez pas trop loin ; J’approfondirai davantage les bibliothèques de gestion d’état dans les prochains articles, découvrant comment elles peuvent améliorer vos projets. En attendant, continuez à expérimenter et bon codage !