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

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.

Au fil du temps, Redux s’est amélioré et fournit maintenant des solutions simples de plugins comme redux-toolkit. Mais maintenant, il existe des solutions de gestion d’état encore plus simples pour React, comme zustand, recoil et react-query, pour n’en citer que quelques-unes.

Dans cet article, nous allons voir comment configurer et utiliser Recoil dans vos applications React en construisant une simple application todo traditionnelle.

Avant de commencer, je veux juste mentionner que tout le code de l’exemple de l’application todo est dans ce bac à sable. N’hésitez pas à le référencer et à le modifier.

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 (

  ) ;
} ;

Lorsque l’utilisateur saisit l’entrée et clique sur le bouton Add Task, une fonction addTodoItem est appelée. Cette fonction appelle simplement la fonction setTodoList 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 (

  ) ;
} ;

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 (

  ) ;
} ;

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.

Sur ce, je vous remercie beaucoup d’avoir pris le temps de lire cet article. Si vous l’avez trouvé intéressant, rejoignez-moi sur Twitter abdadeel_ où je partage du contenu intéressant sur le développement web.