Explorer la gestion des états dans React en utilisant Jotai: un guide pratique

La gestion de l'état dans les projets à petite échelle est généralement simple à l'aide des crochets et des accessoires React. Cependant, à mesure que l'application se développe et que le besoin de partager et d'accéder aux données entre différents composants se fait sentir, cela conduit souvent au forage d'hélices. Malheureusement, le forage d'accessoires peut rapidement encombrer la base de code et introduire des problèmes d'évolutivité.

Alors que Redux offre une excellente solution de gestion d'état, son API peut être écrasante pour des projets relativement petits. En revanche, Jotai, une bibliothèque de gestion d'état minimale qui exploite des unités d'états indépendantes appelées atomes pour gérer état, élimine les défis tels que le forage d'hélice et permet une gestion de l'état plus simple et évolutive approche.

Qu'est-ce que Jotai et comment ça marche?

Jotaï est une bibliothèque de gestion d'état qui offre une solution de gestion d'état simple contrairement à des alternatives plus complexes comme Redux. Il utilise des unités d'état indépendantes appelées atomes pour gérer l'état dans l'application React.

Idéalement, différents composants de l'application accèdent et mettent à jour ces atomes à l'aide d'un crochet fourni par Jotai appelé le utiliserAtom. Voici un exemple simple de création d'un atome Jotai :

importer { atome } depuis'jotaï';
constante countAtom = atome(1);

Pour accéder et travailler avec des atomes dans Jotai, vous pouvez simplement utiliser utiliserAtom crochet qui, comme d'autres Crochets de réaction, vous permet d'accéder et de mettre à jour la valeur d'un état dans un composant fonctionnel.

Voici un exemple pour illustrer son utilisation :

importer { useAtom } depuis'jotaï';
constante countAtom = atome(1);
fonctionMonComposant() {
constante [count, setCount] = useAtom (countAtom);
constante incrément = () => setCount((prevCount) => prevCount + 1);
retour (


Compte: {count}</p>
Incrément</button>
 </div>
 );
}

Dans cet exemple, le utiliserAtom crochet est utilisé pour accéder au compteAtom atome et sa valeur associée. Le setCount La fonction est utilisée pour mettre à jour la valeur de l'atome et tous les composants associés seront automatiquement restitués avec la valeur mise à jour.

En ne déclenchant que les composants concernés, cela réduit les re-rendus inutiles dans l'application. Cette approche ciblée du re-rendu améliore les performances globales de l'application.

Avec les bases à l'écart, créons une application To-do React simple pour mieux comprendre les capacités de gestion d'état de Jotai.

Gestion des états dans React avec Jotai

Pour commencer, créer une application React. Alternativement, vous pouvez utiliser Vite pour mettre en place un projet React. Une fois que vous avez échafaudé une application React de base, continuez et installez Jotai dans votre application.

npm installer jotai

Ensuite, pour utiliser Jotai dans votre application, vous devez envelopper votre application entière avec le Fournisseur composant. Ce composant contient le magasin qui sert de hub central pour fournir des valeurs atomiques dans l'ensemble de l'application.

De plus, il vous permet de déclarer l'état initial des atomes. En enveloppant votre application avec le Fournisseur, tous les composants de l'application ont accès aux atomes que vous avez définis, et ils peuvent ensuite interagir avec et mettre à jour l'état via le utiliserAtom accrocher.

importer { Fournisseur } depuis"jotaï";

Enveloppez maintenant l'application dans le index.js ou main.jsx comme indiqué ci-dessous.

importer Réagir depuis'réagir'
importer RéagirDOM depuis'réagir-dom/client'
importer Application depuis'./App.jsx'
importer'./index.css'
importer { Fournisseur } depuis"jotaï";
ReactDOM.createRoot(document.getElementById('racine')).rendre(



 </Provider>
 </React.StrictMode>,
)

Configurer un magasin de données

Le magasin agit comme un référentiel central pour l'état de l'application. Il contient généralement la définition des atomes, des sélecteurs et de toute autre fonction connexe requise pour la gestion de l'état à l'aide de Jotai.

Dans ce cas, il gère les atomes de gestion de la liste des éléments de l'application To-do. Dans le src répertoire, créer TodoStore.jsx fichier et ajoutez le code ci-dessous.

importer { atome } depuis"jotaï";
exporterconstante TodosAtom = atome([]);

En créant et en exportant le TodosAtom, vous pouvez confortablement interagir et mettre à jour l'état des tâches sur différents composants de l'application.

Implémenter la fonctionnalité de l'application To-Do

Maintenant que vous avez configuré Jotai dans l'application React et créé un atome pour gérer l'état de l'application, allez à venir et créez un composant de tâche simple qui gérera les fonctionnalités d'ajout, de suppression et de modification de la tâche articles.

Créer un nouveau composants/Todo.jsx dossier dans le src annuaire. Dans ce fichier, ajoutez le code ci-dessous :

1. Importez le magasin de données et le utiliserAtom accrocher.

   importer Réagissez, { useState } depuis'réagir';
   importer { TodosAtom } depuis'../TodoStore';
   importer { useAtom } depuis'jotaï';

2. Créez le composant fonctionnel et ajoutez les éléments JSX.

   constante À faire = () => {
   
   retour (
   
   
    espace réservé="Nouvelle tâche"
    valeur={valeur}
    onChange={event => setValue (event.target.value)}
    />
   Ajouter une tâche</button>
   
   
    {todos.map(faire => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Supprimer</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };