Editions ENI Livres | Vidéos | e-Formations
Gestion du state
Introduction
La gestion de l’état est l’un des aspects cruciaux de toute application React et front-end en général. Il s’agit de déterminer comment stocker, mettre à jour et partager les données au sein de l’application. Dans ce chapitre, nous explorerons les différentes solutions de gestion de l’état disponibles dans le contexte de React.
Les différentes solutions
Il existe plusieurs approches pour gérer l’état dans une application React, chacune ayant ses avantages et ses cas d’utilisation spécifiques. Une idée qui revient souvent est de regrouper l’ensemble des données dans un état global qui peut lui même être découpé en sous-états.
On parle ici d’un état qui doit être partagé dans toute l’application, à ne pas confondre avec l’état local d’un composant qui reste, lui, spécifique à un composant (avec useState par exemple). React fournit une API appelée Context qui permet de partager un état entre différents composants, mais cette approche rencontre parfois ses limites et on peut avoir besoin d’une librairie de gestion d’état. Là encore, de nombreuses solutions existent, les plus connues sont Redux et MobX.
Faisons d’abord un tour des différentes solutions qui existent et que vous pourrez explorer dans vos différents projets. Puis, nous nous attarderons un peu plus sur Redux et MobX.
1. L’état serveur (server state) et l’état client (client state)
Quand on dispose d’un store ou d’un objet global pour stocker l’état de l’application, on peut être tenté de tout stocker à cet endroit, qu’il...
L’association du contexte et des hooks
Le contexte et les hooks sont des fonctionnalités puissantes de React qui peuvent être utilisées en combinaison pour gérer et partager l’état entre les composants. Dans cette section, nous explorerons comment utiliser Context API en conjonction avec les hooks pour gérer l’état de l’application. Nous allons découper les étapes afin de montrer comment créer un contexte puis l’utiliser partout.
1. Création d’un contexte
React Context API permet de créer un contexte dans lequel vous pouvez stocker des données globales et les rendre accessibles à n’importe quel composant de l’arborescence sans avoir à les transmettre explicite ment via les props. Un contexte peut être créé à l’aide de la fonction createContext().
Tout d’abord, vous devez créer un contexte pour votre application, idéalement dans un fichier à part que l’on peut nommer MyContext.js.
Utilisez la méthode createContext de React :
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext; Ce contexte est doté de deux composants, MyContext.Provider et MyContext.Consumer, dont nous parlerons ci-après.
Pour que les composants de votre application aient accès à l’état et aux fonctions de mise à jour, enveloppez votre application ou la partie concernée avec MyContext.Provider dans un fichier App.js :
import React, { useState } from 'react';
import MyContext from './MyContext'; ...Redux
Redux est une bibliothèque JavaScript qui permet de gérer l’état d’une application de manière prévisible. Inspiré par les principes du langage Elm, Redux fonctionne autour de trois axes fondamentaux : un état unique source de vérité, un état en lecture seule, et des modifications effectuées par des fonctions pures.
Les applications JavaScript modernes peuvent avoir des états complexes, répartis entre de nombreux composants. La gestion de cet état peut devenir déroutante, surtout lorsque des composants non liés doivent partager ou modifier des portions de cet état. Redux offre une solution à ce problème en centralisant l’état de l’application dans un store global.
1. Les éléments-clés de Redux
Nous allons voir trois concepts très importants avec un exemple à chaque fois. À eux seuls, ils représentent la base de Redux, même si, bien entendu, il y a beaucoup à découvrir. Pour expliquer ces éléments, nous imaginerons un exemple bien connu, la todo list.
a. Actions
Les actions décrivent comment l’état doit être modifié. Elles sont généralement envoyées au store à l’aide de la fonction dispatch(). Chaque action est un simple objet JavaScript qui contient au minimum une clé type.
{
type: 'ADD_TODO',
payload: 'Apprendre Redux'
} En plus du champ type, les actions ont souvent un champ payload. La charge utile (payload) est une convention courante pour passer des informations ou des données supplémentaires concernant l’action. C’est comme un conteneur pour toutes les données que vous voulez transmettre au réducteur pour effectuer une mise à jour d’état.
b. Réducteur (reducer)
Un réducteur dans le contexte de Redux est une fonction qui prend en compte l’état actuel et une action, puis renvoie le nouvel état. Les réducteurs sont des fonctions pures, ce qui signifie qu’elles ne modifient pas l’état actuel mais renvoient une nouvelle copie de l’état.
function todosReducer(state = [], action) {
switch (action.type)...MobX
MobX est une bibliothèque de gestion d’état réactive et minimaliste pour les applications JavaScript, y compris celles construites avec React. MobX vise à simplifier la gestion d’état en permettant aux composants de réagir automatiquement aux changements d’état sans avoir à écrire beaucoup de code. Dans cette section, nous explorerons les concepts-clés de MobX et comment les utiliser dans une application React. À travers quelques exemples nous allons tenter de visualiser les différences avec Redux. Nous allons rester sur des exemples de type todo list.
1. Principes de base de MobX
À la base de MobX, on trouve quelques concepts-clés : observables, actions, réactions et computed values.
a. Observables
Les observables sont des variables spéciales que MobX suit. Elles servent à stocker l’état de votre application.
Voici un exemple d’observable :
import { observable } from "mobx";
const todoStore = observable({
todos: [],
get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.completed).length;
}
}); Nous utilisons ici le décorateur observable pour définir un objet todoStore qui contiendra la liste des todos et un calcul pour obtenir le nombre de todos non complétés....
