Une plongée profonde dans la gestion de l’État atomique

La gestion de l’État est l’un des COG les plus importants d’une application React. Les développeurs peuvent choisir de travailler avec des solutions intégrées, telles que UseContext ou des bibliothèques de gestion d’État comme Jotai ou Redux. Cette décision a un impact significatif sur les performances et la maintenabilité de l’application.

J’ai décidé d’examiner Quelque choseune bibliothèque de gestion de l’État atomique moderne. Jetons un coup d’œil à l’alternative intégrée de React aux bibliothèques de gestion de l’État.

UseContext est une fonctionnalité disponible depuis React version 16.8. Il vise à résoudre le problème du forage des accessoires dans React, car il faut transmettre des données par plusieurs composants, où il pourrait ne pas être nécessaire.

Semblable aux bibliothèques de gestion de l’État, nous définissons un contexte qui contient les données dont nous avons besoin à l’échelle mondiale et enveloppez les composants à l’intérieur de son fournisseur. Aussi facile que cela puisse paraître, il a ses limites:

Pièges de UseContext

1. Re-Rendeurs inutiles: Disons que le contexte contient un objet {name:'John Doe', company:'Google'}. Si nous avons un composant enfant en utilisant uniquement le nom de ce contexte devra renvoyer même s’il y a un changement dans la clé de l’entreprise, qu’il n’utilise même pas.
2. Performance lente: Les applications UseContext éprouvent 75 ms de temps de mise à jour moyens pour les petits changements, ce qui est nettement plus lent que les bibliothèques de gestion de l’État.

Où il doit être utilisé

1. Pour stocker des données globales qui n’ont pas besoin d’être mises à jour fréquemment ou de données statiques. Exemple: données de théâtre, données d’authentification, etc.

Redux est le modèle de gestion de l’État le plus populaire. Il s’agit d’une architecture définie qui a un flux défini pour que toutes les modifications soient apportées à l’état, c’est-à-dire l’utilisation des actions et des réducteurs. Ce modèle défini devient l’une de ses principales forces ainsi que certains de ses inconvénients.

Avantages de l’utilisation de Redux

1. Le schéma défini empêche les mutations accidentelles de l’état.
2. L’une de ses plus grandes forces est le Redux Devtools; Cet outil rend l’expérience de débogage beaucoup plus simple pour les développeurs.
3. Comme c’est la bibliothèque la plus populaire, il y a un soutien communautaire abondant.
4. Excellentes performances. (65 ms Avg. Temps de mise à jour)

Inconvénients de l’utilisation de redux

1. Une courbe d’apprentissage abrupte.
2. De vastes exigences de chauffeur pour la tâche la plus simple, ce qui ralentit le développement.
3. Taille du faisceau de 15 Ko.
4. Les frais généraux pour les applications simples sont excessifs.

Quand utiliser redux

1. Il doit être utilisé dans des projets à grande échelle comme les plates-formes de commerce électronique et les tableaux de bord d’entreprise.
2. Lorsque le nombre de développeurs travaillant sur un projet est élevé.
3. Lorsqu’un projet a besoin d’une surveillance et d’une journalisation complètes.

Jotai s’éloigne de l’architecture monolithique et favorise un changement vers la gestion de l’État atomique. Au lieu d’un grand magasin, il existe des atomes individuels qui peuvent être créés, consommés et mis à jour séparément. Il supprime la complexité qui est généralement associée aux outils traditionnels de gestion de l’État.

J’ai créé un référentiel dans lequel j’ai exploré à quel point il est facile de travailler avec Jotai. Permettez-moi de montrer quelques extraits de code pour le démontrer. Voici le lien à mon référentiel de test si nécessaire.

1. Ajouter un fournisseur

import { Provider } from 'jotai'
    
    export default function App({ Component, pageProps }) {  
    return (  
    <provider>  
    <Component {...pageProps} />
    </provider>  
    ) 

2. Créez des atomes. Dans ma démonstration, j’ai créé un seul fichier avec plusieurs atomes. Vous êtes libre de créer des atomes dans différents dossiers et fichiers. C’est à quel point il est simple de créer un atome et de commencer à travailler avec.

import { atom } from "jotai";
import { atomWithReducer, loadable } from "jotai/utils";

export const counterAtom = atom(0);

export const DoubleCounterAtom = atom((get) => {
  return get(counterAtom) * 2;
});

const userApiAtom = atom(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
  return res.json();
});

export const loadableUserAtom = loadable(userApiAtom);

export const counterReducerAtom = atomWithReducer(0, (value, action) => {
  console.log(value, action);
  if (action === "increment") {
    return value + 1;
  }
  if (action === "decrement") {
    return value - 1;
  }
  throw new Error("Invalid action type");
});

3. Consommant et mutilant les atomes, j’ai ici créé un compteur simple en utilisant des atomes. Il est utilisé de manière identique à un USESTATE, il n’y a donc presque pas de courbe d’apprentissage. Il a également le modèle de réducteur d’action standard si nécessaire pour les normes de code.

import { useAtom } from "jotai";
import { counterAtom, counterReducerAtom } from "../atoms";
import { useReducerAtom } from "jotai/utils";

const CounterButtons = () => {
  const [counter, setCounter] = useAtom(counterAtom);
  const [count, dispatch] = useAtom(counterReducerAtom);
  return (
    <div>
      <button onClick={() => setCounter((count) => count - 1)}>Decrease</button>
      <button onClick={() => setCounter((count) => count + 1)}>Increase</button>
      <button onClick={() => dispatch("increment")}>IncreaseReducer</button>
      <button onClick={() => dispatch("decrement")}>DecreaseReducer</button>
    </div>
  );
};

export default CounterButtons;

4. Voici un autre exemple de l’utilisation avec une API

import React from 'react'
import { loadableUserAtom } from '../atoms'
import { useAtom } from 'jotai';

const DisplayUser = () => {
    const [user] = useAtom(loadableUserAtom);
    if(user.state === 'loading'|| user.state === 'hasError') {
        return <div>Loading...</div>
    }
  return (
    <div>
        <p>User</p>
        <p>{user.data.name}</p>
        <p>{user.data.email}</p>
    </div>

  )
}

export default DisplayUser

1. Les atomes sont automatiquement collectés aux ordures, ce qui empêche les problèmes de fuite de mémoire.
2. Les atomes peuvent être combinés et dérivés sans l’utilisation de logiques complexes excessives, ce qui facilite la gestion d’un référentiel croissant.
3. Excellente performance !! (25 ms Avg. Temps de mise à jour), UseContext a pris 75 ms et Redux a pris 65 ms.
4. Une très petite taille de faisceau de seulement 4 Ko! Redux était de 15 Ko de taille.
5. La structure atomique assure les performances même avec une complexité accrue.

1. Il a des outils de débogage limités. Il a tous les outils de base, mais il ne peut pas rivaliser avec les outils de test comme ReduxDevTools.
2. Ce n’est pas aussi populaire que Redux, il y a donc beaucoup moins de soutien communautaire.
3. Non adopté à plus grande échelle car il s’agit d’une nouvelle entrée.

1. Il doit être utilisé dans des projets où les données changent fréquemment.
2. Si les performances sont une priorité, Jotai est un meilleur choix.
3. Applications de taille moyenne avec des interactions de composants complexes.
4. Il doit être utilisé dans des projets où il y a des sprints de développement rapide et du code de passe-partout devient une limitation.

En fin de compte, la «meilleure» bibliothèque de gestion de l’État est celle qui répond le mieux aux besoins de votre projet. Cependant, j’ai trouvé que Jotai était particulièrement adapté aux développeurs et faciles à adopter pour les nouveaux arrivants. Ce fut une expérience rafraîchissante pour démarrer un projet sans le passe-partout important souvent requis par d’autres bibliothèques.