Comment utiliser Recoil pour la gestion des états dans vos projets React

Questions courantes

Qu’est-ce que Recoil et comment fonctionne-t-il ?

Recoil est une bibliothèque de gestion d’état pour React qui permet de gérer l’état de manière centralisée et déclarative. Elle utilise un modèle de données basé sur les atomes et les sélecteurs pour gérer l’état de l’application.

Quels sont les avantages de l’utilisation de Recoil par rapport à Redux ?

Recoil est plus léger et plus facile à utiliser que Redux, car il n’a pas besoin de configurer manuellement le magasin de données global. De plus, Recoil est plus flexible et permet de gérer l’état de manière plus déclarative.

Comment intégrer Recoil dans une application React existante ?

Il est possible d’intégrer Recoil dans une application React existante en installant la bibliothèque et en configurant les atomes et les sélecteurs pour gérer l’état de l’application.

Si vous êtes un développeur React, vous avez probablement utilisé une bibliothèque pour gérer l’état dans vos applications React. Et vous avez probablement entendu parler de Redux**, la** bibliothèque de gestion d’état pour React.

Pendant longtemps, Redux a été la seule solution fiable et la plus largement adoptée pour la gestion de l’état dans les applications React. Et Redux a prouvé ses cas d’utilisation dans les grandes applications.

Mais le principal problème auquel les développeurs étaient souvent confrontés avec Redux était l’expérience globale du développeur. Dans les premières versions de Redux, vous deviez configurer manuellement votre magasin de données global et connecter manuellement chaque composant pour le consommer et mettre à jour l’état global. En fait, les développeurs devaient consacrer beaucoup de temps et d’efforts à la mise en place et à l’utilisation de Redux dans leurs applications.

La gestion des états dans les applications React

La gestion des états est un aspect crucial dans les applications React, car elle permet de gérer les données et les interactions de l’utilisateur de manière efficace. Les bibliothèques de gestion d’état comme Recoil et Redux sont conçues pour faciliter la gestion des états dans les applications React.

Recoil est une solution de gestion d’état qui se concentre sur la simplicité et la flexibilité. Elle permet de gérer l’état de manière déclarative et centralisée, ce qui facilite la maintenance et la mise à jour de l’application.

En intégrant Recoil dans votre application React, vous pouvez améliorer la gestion des états et rendre votre application plus efficace et plus scalable. Découvrez comment améliorer la gestion de la relation client avec des formations en ligne.

Dans cet article, nous allons voir [comment](https://reussirsaboutiqueenligne.fr/javascript/comment-creer-une-application-web-de-journalisation-avec-des-evenements-envoyes-par-le-serveur-rxjs-et-express/) configurer et utiliser **Recoil** dans vos applications React en construisant une simple application todo traditionnelle.

## Comment installer Recoil

Commençons par installer la bibliothèque. Si vous travaillez sur votre ordinateur local, vous pouvez installer Recoil en utilisant npm ou yarn.

`npm i recoil

// ou

yarn add recoil`

Comment ajouter le composant racine de Recoil ?

La première chose que vous devez faire est d’envelopper votre application entière avec le composant RecoilRoot fourni par recoil.

Puisque Recoil utilise une approche 100% basée sur les crochets, il est bon d’envelopper toute votre application avec le composant racine fourni par Recoil afin que vous puissiez accéder à l’état de votre application depuis n’importe quel composant.

Vous pouvez simplement faire cela en important et en ajoutant RecoilRoot dans votre index.js (fichier d’entrée). Voici à quoi ressemblera votre index.js une fois que vous l’aurez ajouté :

`import { StrictMode } de “react” ; import ReactDOM de “react-dom” ; import { RecoilRoot } from “recoil” ; import App de ”./App” ;

const rootElement = document.getElementById(“root”) ; ReactDOM.render(

, rootElement ) ;`

Comment créer un atome dans Recoil

Après cela, nous devons créer un **atome.**Un atome dans Recoil est simplement un morceau de mémoire isolé qui contient des données. Vous pouvez créer autant d’atomes que vous le souhaitez.

Par exemple, disons que vous créez une application de médias sociaux où les utilisateurs peuvent mettre en signet un certain message. Pour stocker les messages mis en signet par les utilisateurs, vous pouvez avoir un atome distinct contenant uniquement les données des signets.

Lorsque certaines données changent dans l’atome – par exemple, l’utilisateur met un article en signet – les composants souscrits à cet atome ou l’utilisant sont rendus à nouveau.

C’est ici que la partie performance de recoil entre en jeu. Recoil s’assurera que seuls les composants souscrits à cet atome spécifique sont rendus à nouveau.

La création d’un atome est extrêmement simple. Créez un fichier src/recoil/atom/todoAtom.js et ajoutez le code suivant :

`import { atom } de “recoil” ;

export const todoListAtom = atom({ clé : “todoListState”, default : [], }) ;`

Comment créer votre premier atome

Il vous suffit d’importer la fonction atom de recoil. Cette fonction prend un objet comme argument.

La première entrée de cet objet est key. C’est une chaîne unique qui représentera cet atome spécifique. default est l’état initial de cet atome. Et c’est tout. C’est tout ce que vous devez faire pour le configurer.

Veillez à exporter todoListAtom car nous l’utiliserons pour référencer cet atome.

Comment ajouter des données à un atome

Créons maintenant une entrée où l’utilisateur peut saisir son todo. Créez components/TodoItemCreator.js.

Dans ce composant, nous avons une entrée où l’utilisateur va taper et nous allons voir comment il est simple d’ajouter un nouveau todo dans l’atome. Plus tard, nous verrons comment tous les composants qui utilisent le même atome se mettent à jour pour afficher le nouveau todo ajouté. Vous pouvez être aussi créatif que vous le souhaitez dans le style de l’entrée.

Ici, je vais seulement montrer comment nous pouvons utiliser le hook useRecoilState (fourni par la bibliothèque recoil pour obtenir l’état actuel des données dans l’atome) et une fonction pratique pour mettre à jour l’état.

Si vous avez utilisé useState dans React, cela ressemblera assez à ce que vous avez l’habitude de voir dans l’état de votre composant local. Le hook useRecoilState prend un atome comme argument.

`import { useState } de “react” ; import { useRecoilState } de “recoil” ; import { todoListAtom } de ”../recoil/atoms/todoAtom” ; import { generateUID } de ”../utils/uuid” ;

export const TodoItemCreator = () => { const [inputValue, setInputValue] = useState("") ; const [_, setTodoList] = useRecoilState(todoListAtom) ;

const onChange = (event) => { setInputValue(event.target.value) ; } ;

const addTodoItem = () => { if (inputValue) { setTodoList((oldTodoList) => [ …oldTodoList, { id : generateUID(), text : inputValue, isComplete : false } ]) ; setInputValue("") ; } } ;

retour ( Ajouter une tâche ) ; } ;Lorsque l’utilisateur saisit l’entrée et clique sur le boutonAdd Task, une fonction addTodoItemest appelée. Cette fonction appelle simplement la fonctionsetTodoList` donnée par le crochet.

Puisqu’il est recommandé de ne jamais mettre à jour votre état global directement, créez plutôt une copie superficielle des todos précédents et ajoutez-en un nouveau. Dans l’extrait de code ci-dessus, generateUID n’est qu’une fonction utilitaire qui renvoie un identifiant unique uuidv4 pour obtenir un identifiant unique aléatoire que nous utiliserons plus tard pour mettre à jour un simple todo à partir d’une liste de todos.

Comment consommer les données de l’Atom

Créons maintenant un composant pour afficher un todo dans une liste et permettre à l’utilisateur de mettre à jour, supprimer ou marquer les todos comme terminés. Créez src/components/TodoMain.js.

`import { useRecoilValue } from “recoil” ; import { TodoItemCreator } de ”./TodoItemCreator” ; import { TodoItem } de ”./TodoItem” ; import { todoListAtom } de ”./recoil/atoms/todoAtom” ; importez ”./todo.css” ;

export const TodoMain = () => { const todoList = useRecoilValue(todoListAtom) ;

retour (`

{todoList.length > 0 && (

{todoList.map((todoItem) => ( ))} )}

) ; } ; useRecoilValue est un hook fourni par recoil qui retourne uniquement l’état actuel de la date dans l’atome. Nous allons utiliser ce hook pour récupérer tous les todos et les mapper pour les afficher à l’écran.

Comment mettre à jour les données dans Atom

TodoItem est un composant qui utilise le même hook useRecoilState et quelques fonctions d’aide pour trouver et mettre à jour l’état d’un todo spécifique.

`import { useRecoilState } de “recoil” ; import { todoListAtom } de ”../recoil/atoms/todoAtom” ;

export const TodoItem = ({ item }) => { const [todoList, setTodoList] = useRecoilState(todoListAtom) ; const index = todoList.findIndex((listItem) => listItem === item) ;

const editItemText = (event) => { const newList = replatItemAtIndex(todoList, index, { …item, texte : event.target.value }) ;

setTodoList(newList) ;

} ;

const toggleItemCompletion = () => { const newList = replatItemAtIndex(todoList, index, { …item, isComplete : !item.isComplete }) ;

setTodoList(newList) ;

} ;

const deleteItem = () => { const newList = removeItemAtIndex(todoList, index) ;

setTodoList(newList) ;

} ;

retour ( X ) ; } ;

const replatItemAtIndex = (arr, index, newValue) => { return […arr.slice(0, index), newValue, …arr.slice(index + 1)] ; } ;

const removeItemAtIndex = (arr, index) => { return […arr.slice(0, index), …arr.slice(index + 1)] ; } ;` Et c’est tout. Avec deux hooks et une fonction, vous pouvez gérer tous les besoins de gestion d’état de vos applications React. La puissance de Recoil réside dans son API simple et conviviale pour les débutants et dans ses performances.

FAQ

Quelle est la différence entre Recoil et Zustand ?

Recoil et Zustand sont deux bibliothèques de gestion d’état pour React qui ont des approches différentes. Recoil se concentre sur la simplicité et la flexibilité, tandis que Zustand se concentre sur la performance et la scalabilité.

Comment utiliser Recoil avec d’autres bibliothèques de gestion d’état ?

Il est possible d’utiliser Recoil avec d’autres bibliothèques de gestion d’état comme Redux ou MobX, mais cela nécessite une configuration et une intégration soigneuses pour éviter les conflits et les problèmes de performances.

Quels sont les cas d’utilisation de Recoil ?

Recoil est adapté pour les applications React qui nécessitent une gestion d’état simple et flexible. Il est particulièrement utile pour les applications qui ont besoin de gérer des données en temps réel ou des interactions utilisateur complexes.

Comment déboguer les problèmes de Recoil ?

Il est possible de déboguer les problèmes de Recoil en utilisant les outils de débogage de React et en consultant la documentation de Recoil. Il est également possible de demander de l’aide sur les forums de discussion de la communauté React.

Quelle est la communauté autour de Recoil ?

La communauté autour de Recoil est active et en constante évolution. Il est possible de trouver des ressources et des exemples de code sur le site officiel de Recoil et sur les plateformes de développement comme GitHub.

À lire aussi sur le site

• formations en ligne incontournables pour exceller dans la gestion de la relation client
• Anthropic : vers une expansion fulgurante inédite dans l’univers de la tech ?
• Email, WhatsApp, SMS : Quel canal privilégier en 2026 pour renforcer la fidélité client ?