Pourquoi Jotai avec React : guide complet ?
Dans ce monde rapide et dynamique, la gestion efficace des états dans les applications React est essentielle. Les bibliothèques comme Redux ou MobX offrent des solutions robustes pour gérer l'état global de l'application. Cependant, ces bibliothèques peuvent parfois être complexes à configurer et à utiliser, ce qui peut ralentir le développement et introduire des erreurs potentielles.
Jotai est une bibliothèque React moderne conçue pour simplifier la gestion des états. Elle est basée sur les concepts de React, ce qui signifie qu'elle est plus intuitive et moins intrusive que d'autres solutions. Jotai permet aux développeurs de gérer l'état global de leurs applications de manière simple et efficace.
Un cas d'usage concret de Jotai pourrait être un application de gestion de projet où plusieurs composants doivent partager des données en temps réel, comme la liste des tâches à accomplir ou le statut de chaque tâche.
Prerequis
Avant de commencer ce tutoriel, il est important d'avoir les connaissances suivantes :
- Connaissance avancée de React (version 16.8+)
- Familiarité avec les Hooks React
- Expérience avec la gestion des états locaux dans React
Vous devrez également installer Node.js et npm sur votre machine. Les versions recommandées sont :
- Node.js : v12.0.0 ou ultérieure
- npm : v6.0.0 ou ultérieure
Pour installer Node.js, vous pouvez le faire à partir du site officiel. npm est généralement installé avec Node.js.
Concepts fondamentaux
1. Atoms
Un atom est la plus petite unité d'état dans Jotai. C'est un objet qui contient une valeur et des fonctions pour modifier cette valeur. Les atoms sont les composants de base de Jotai.
// Importer useAtom de jotai
import { useAtom } from 'jotai';
// Créer un atom avec une valeur initiale
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
2. Selectors
Un selector est une fonction qui prend un ou plusieurs atoms et retourne une valeur dérivée de ces atoms. Les selectors sont utilisés pour lire l'état de manière optimisée.
// Importer useAtom et useSelectors de jotai
import { useAtom, useSelectors } from 'jotai';
// Créer un atom avec une valeur initiale
const countAtom = atom(0);
// Créer un selector qui double la valeur de l'atom
const doubledCountSelector = (count) => count * 2;
function Counter() {
const [count, setCount] = useAtom(countAtom);
const doubledCount = useSelectors(doubledCountSelector);
return (
<div>
<p>Count: {count}</p>
<p>Doubled Count: {doubledCount}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
3. Provider
Le provider est un composant React qui fournit le contexte Jotai à l'application. Tous les composants enfants du provider peuvent accéder aux atoms et selectors.
// Importer jotai
import { atom, Provider } from 'jotai';
// Créer un atom avec une valeur initiale
const countAtom = atom(0);
function App() {
return (
<Provider>
<Counter />
</Provider>
);
}
function Counter() {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Mise en pratique : projet fil rouge
Pour montrer comment utiliser Jotai pour gérer l'état d'une application réelle, nous allons construire un simple gestionnaire de tâches. Ce projet comprendra une liste de tâches et le bouton "Ajouter une tâche".
Étape 1 : Création du projet
Tout d'abord, créez un nouveau projet React :
npx create-react-app jotai-todo
cd jotai-todo
Étape 2 : Installation de Jotai
Installez Jotai dans votre projet :
npm install jotai
Étape 3 : Création des atoms
Créez un fichier atoms.js pour définir les atoms nécessaires pour le gestionnaire de tâches.
// src/atoms.js
import { atom } from 'jotai';
export const tasksAtom = atom([]);
export const newTaskAtom = atom('');
Étape 4 : Création des composants
Créez un fichier TasksList.js pour afficher la liste de tâches et le bouton "Ajouter une tâche".
// src/TasksList.js
import { useAtom, useAtoms } from 'jotai';
import { tasksAtom, newTaskAtom } from './atoms';
function TasksList() {
const [tasks, setTasks] = useAtom(tasksAtom);
const [, setNewTask] = useAtom(newTaskAtom);
const handleAddTask = () => {
if (newTask.trim()) {
setTasks([...tasks, { id: Date.now(), text: newTask, completed: false }]);
setNewTask('');
}
};
return (
<div>
<h2>Tasks</h2>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button onClick={handleAddTask}>Add Task</button>
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.text} - {task.completed ? 'Completed' : 'Pending'}
</li>
))}
</ul>
</div>
);
}
export default TasksList;
Étape 5 : Utilisation du provider
Utilisez le provider pour fournir les atoms à l'application.
// src/App.js
import React from 'react';
import { Provider } from 'jotai';
import TasksList from './TasksList';
function App() {
return (
<Provider>
<TasksList />
</Provider>
);
}
export default App;
Étape 6 : Exécution du projet
Exécutez le projet pour voir les résultats :
npm start
Erreurs frequentes et debugging
Voici quelques erreurs courantes lors de l'utilisation de Jotai et comment les corriger :
1. useAtom n'est pas défini
Si vous rencontrez cette erreur, assurez-vous d'avoir correctement importé useAtom depuis jotai.
// ❌ Mauvais
import { useAtom } from 'react';
// ✅ Correct
import { useAtom } from 'jotai';
2. atom is not a function
Si vous recevez cette erreur, vérifiez que vous avez correctement installé Jotai et que vous importez les atoms comme indiqué dans l'exemple.
// ❌ Mauvais
import { atom } from 'jotai';
// ✅ Correct
import { atom } from 'jotai';
3. Provider n'est pas défini
Si cette erreur apparaît, assurez-vous d'avoir correctement installé Jotai et que vous importez le provider comme indiqué.
// ❌ Mauvais
import { Provider } from 'react';
// ✅ Correct
import { Provider } from 'jotai';
Pour aller plus loin
1. Comprendre les atoms avec middleware
Jotai prend en charge le middleware, ce qui vous permet d'ajouter des fonctionnalités supplémentaires aux atoms.
2. Utiliser les selectors pour optimiser la lecture de l'état
Les selectors sont essentiels pour lire l'état de manière optimisée. Apprenez à créer des selectors complexes et réutilisables.
3. Gérer les effets asynchrones avec useEffect
Bien que Jotai ne gère pas directement les effets asynchrones, vous pouvez utiliser useEffect pour récupérer des données et mettre à jour l'état.
Défi pratique
Essayez d'ajouter une fonctionnalité supplémentaire au gestionnaire de tâches, par exemple la possibilité de marquer une tâche comme terminée. Implémentez cette fonctionnalité en utilisant un atom pour stocker le statut de chaque tâche et un selector pour filtrer les tâches complétées.