Utilisez le state manager Redux pour gérer l’état de vos applications

 Vous avez peut-être déjà entendu le terme “State Manager”, mais qu’est-ce que cela veut dire exactement ? Et puis quel est le lien avec le state de React ?

Nous allons voir tout cela ensemble, mais d’abord un petit rappel sur le fonctionnement du state dans React.

Découvrez comment fonctionne le state dans React

Dans React, le state nous permet de contrôler l’affichage et la logique de l’application. Chaque composant peut contenir un ou plusieurs states, grâce au hook  useState  . Dès qu'un des states change, le composant est automatiquement mis à jour.

Voici un petit exemple :

function MonComposant() {
    // on utilise le hook useState de React
    const [count, setCount] = React.useState(0);
 
    return (
        // on affiche un bouton
        <button
            // au clique, on change le state avec setCount
            onClick={() => setCount(count + 1)}
        >
            {/* on utilise le state dans l'affichage */}
            {count}
        </button>
    );
}

Ouvrir l’exemple sur CodePen

Il arrive souvent qu’un composant ait besoin d’un state stocké dans un autre composant. Dans ce cas, on peut utiliser les props pour transmettre les données nécessaires. Mais attention, car les props ne vont que dans un sens : des composants parents vers les composants enfants. Il faut donc bien choisir où l’on met son state. Quand ce choix devient difficile, on peut faire appel aux state managers.

Comprenez ce qu’est un State Manager

Le terme “State Manager” désigne un outil qui permet de manipuler le state d’une application.

Exactement ! Cependant, dans l'écosystème React, lorsque l’on fait référence à la notion de state manager, on désigne en réalité un outil autre que React pour manipuler le state.

Si useState  fonctionne très bien pour les petites et moyennes applications, lorsqu'une application atteint une certaine taille avec plusieurs dizaines, voire centaines de composants, useState  ne suffit plus. Il devient alors intéressant d’utiliser un state manager externe pour gérer les states globaux.

C’est ce que nous allons voir ensemble dans la suite du cours !

Identifiez les states globaux

Dans une application, tous les states ne sont pas égaux, et on distingue deux grandes catégories de state : local et global.

Les states locaux

On parle de state local pour désigner un state utilisé dans une seule et unique partie de l’application (souvent un seul composant). Ce sont souvent des states qui contrôlent des éléments d’interface, par exemple : 

• Un booléen qui détermine si un composant Dropdown  est ouvert ou fermé.

• Une chaîne de caractères qui détermine si un menu est caché, visible ou minifié.

Ce qui est bien avec les states locaux, c’est qu’une fois qu’ils sont en place, on peut oublier qu’ils existent.

Les states globaux

À l’inverse des states locaux, les states globaux sont des states utilisés à de multiples endroits de l'application. Vous connaissez probablement quelques exemples :

• Le thème light/dark sélectionné par l’utilisateur.

• La langue d’affichage de l’interface.

• L’utilisateur actuellement connecté.

Dans une application React, les states globaux sont plus complexes à gérer. Il faut bien choisir dans quel composant on appelle useState  , afin de pouvoir passer le state via les props à tous les composants qui en ont besoin. Dans de petites applications, nous pouvons gérer les states globaux sans besoin d’un state manager ; mais dès qu’une application devient un peu grosse, on se heurte à certains problèmes.

Les problématiques liées aux states globaux

Prenez la structure d’application suivante :

Où faut-il stocker le state correspondant aux informations de l’utilisateur actuellement connecté (le prénom “Paul”) ?

Cela semble fonctionner pour le composant UserMenu  , sauf que le composant Welcome  a lui aussi besoin du prénom de l’utilisateur (“Bonjour Paul”). Là nous avons un problème : comme on ne peut pas passer les props vers le haut, il n’y a aucun moyen pour Welcome  d'accéder au state. Il faut donc déplacer le state dans App  .

Dans cet exemple, on constate deux choses :

• Le composant dans lequel on déclare un state est important car il conditionne quel composant peut avoir accès au state.

• Plus un composant est haut dans la hiérarchie de composants, plus il y a d’intermédiaires. Dans l’exemple ci-dessus, il a fallu passer par le composant NewsFeed  pour que Welcome  ait accès au state déclaré dans App.

L’exemple utilisé ici est très simple, mais plus une application est grosse et plus ces problématiques sont amplifiées.

J’ai rapidement abandonné l’idée, et c’est en cherchant une autre solution que j’ai découvert la star de ce cours : Redux.

Utilisez Redux : le plus populaire des state managers

Redux est donc une librairie de state management, c’est même un des premiers state managers à avoir été massivement utilisé. Nous verrons le fonctionnement de Redux en détail dans le prochain chapitre, mais voici un premier aperçu :

La création de Redux remonte à 2015 (soit l'âge de pierre à l'échelle du Web), et au début c’était surtout pensé comme un outil de développement. On peut d'ailleurs trouver la vidéo de présentation sur YouTube, attention cependant car le code qui y est montré ne correspond pas aux bonnes pratiques actuelles !

Aujourd’hui Redux totalise plus de 5 millions de téléchargements par semaine comme nous pouvons voir sur sa fiche NPM, et 55 000 étoiles sur son projet GitHub, ce qui en fait le state manager le plus populaire. Pourtant, si on regarde le nombre de téléchargements de Redux par rapport à ceux de React, on constate une perte de vitesse ces dernières années. Cela peut s'expliquer par l'évolution de React et l'émergence de nouveaux outils.

Vous vous demandez peut-être si apprendre Redux aujourd’hui, alors qu’il est en perte de vitesse, est pertinent ? Et la réponse est oui, pour plusieurs raisons. Tout d’abord Redux reste très utilisé en entreprise, et donc beaucoup demandé sur le marché du travail. Avoir Redux dans son CV est un avantage certain pour un développeur de nos jours.

De plus, Redux est une très bonne introduction au monde des state managers, et même sans utiliser Redux, les concepts étudiés dans ce cours vous seront très utiles !

En résumé

• Nous utilisons le state pour contrôler l’interface utilisateur et partager des données entre composants.

• Le state local est restreint à un composant, alors que les states globaux sont partagés entre plusieurs composants.

• Partager le state global peut devenir compliqué – pour résoudre ce problème, nous avons des state managers.

• Redux est le plus populaire des state managers et sera la star de ce cours.

Maintenant que nous avons vu les problèmes résolus par les state managers, découvrons le fonctionnement de Redux ! Si vous êtes prêt, suivez-moi au prochain chapitre ! 🚀