Gestion d’état complexe dans React

L’état complexe dans React implique la gestion de nombreux changements d’état différents dans de nombreux composants différents. Il y a une bibliothèque pour ça ! Je vais recommander deux, plus vous dire ce qui ne fonctionnera pas.

L’une des vérités les plus difficiles de React, dont nous, en tant que développeurs, devrions toujours être conscients, est qu’il n’existe pas de moyen simple et standard de faire quelque chose dans React.

Nous devrions toujours être ouverts à l’examen d’alternatives. Nous devons chercher des alternatives avant de prendre une décision qui peut avoir un impact sur notre équipe, notre entreprise et notre carrière.

Nous avons de nombreuses bibliothèques de gestion d’état React disponibles. Nous pouvons rechercher le terme « Etat” sur npm et cela nous donnera des milliers de packages disponibles. React bénéficie d’une communauté open source énorme et engagée et les développeurs créent toujours de nouveaux packages pour résoudre les problèmes les plus spécifiques de React. Chaque package qui apparaît a été créé pour résoudre un problème spécifique des développeurs React.

C’est cool d’utiliser la dernière bibliothèque de gestion d’état qui a été lancée la semaine dernière et qui est à la mode parmi la communauté. Ce que nous ne comprenons généralement pas, c’est que chaque bibliothèque, chaque package a été conçu avec un problème spécifique à l’esprit, et nous devrions toujours en être conscients.

État complexe en réaction

Nous pouvons considérer les composants React comme des « blocs ». Nous pouvons construire autant de « blocs » que nous le voulons, et construire plus de blocs nous facilitera la vie pour les connecter plus tard et construire toute notre application.

L’état dans React est ce qui fait que nos composants se comportent et s’affichent de différentes manières, un peu comme assembler nos blocs dans différentes formes et structures. Cela nous permet de créer des composants dynamiques et interactifs, rendant notre application plus perspicace pour l’utilisateur.

Plus il y a de composants, plus l’état est complexe. Nous pouvons définir un état complexe dans React comme la gestion de nombreux changements d’état différents dans de nombreux composants React différents. Lorsque nous avons de nombreux composants différents dans notre arborescence React déclenchant différents changements d’état, cela peut provoquer des effets secondaires et des bugs inattendus. React restitue chaque fois qu’un état change, il est donc très important d’avoir dans l’ordre comment nos composants vont se mettre à jour et quels composants vont changer d’état.

Il existe de nombreuses bibliothèques de gestion d’état disponibles dans React qui gèrent des états complexes et nous aident à organiser notre logique d’état dans nos applications. Nous allons couvrir ici quelques options sur la façon dont nous pouvons gérer notre état dans React et comparer les différences entre chacune d’entre elles.

Redux

La bibliothèque de gestion d’état sans doute la plus populaire pour React est Redux. Cette bibliothèque, sortie en 2015, est l’une des raisons pour lesquelles les développeurs aiment et détestent à la fois les bibliothèques de gestion d’état.

Redux est une bibliothèque de conteneurs d’état prévisible pour gérer l’état dans React. Il dispose d’un magasin centralisé pour l’état qui peut être utilisé et accessible dans toute une application. Il y a deux parties importantes dans Redux : les actions et les réducteurs.

Actions sont des objets de plan qui ont un champ « type » et se comportent comme des événements. Nous pouvons considérer une action comme un événement qui a été déclenché dans notre application.

{ type: 'increment', payload: todoText }

Réducteurs sont des fonctions pures qui prennent notre état et une action et renvoient un nouvel état. Les réducteurs doivent effectuer des mises à jour immuables, ce qui signifie qu’ils ne peuvent pas modifier l’état existant. Les réducteurs ne gèrent pas non plus la logique asynchrone ou d’autres « effets secondaires ».

const reducer = (state = initialState, action) {
  switch (action.type) {
    case 'increment': {
      return [
        ...state,
        {
          counter: action.payload,
        },
      ]
    }
    case 'decrement': {
      return [
        ...state,
        {
          counter: action.payload,
        },
      ]
    }
    default:
      return state
  }
}

L’une des rares raisons pour lesquelles Redux est devenu si populaire dans React est qu’il a résolu le problème du forage d’hélices. Le forage d’accessoires est le processus de transmission de données en tant qu’accessoires à des composants qui n’ont pas besoin des données mais qui aident uniquement à les transmettre à travers l’arborescence.

En regardant le problème du forage d’accessoires dans React et comment Redux le résout, de nombreux développeurs pourraient penser que Redux est comme API de contexte de réactionmais ils partagent de nombreuses différences entre eux auxquelles nous ne prêtons généralement pas attention.

L’API React Context n’est pas un outil de gestion d’état et sert uniquement à rendre l’état disponible pour une arborescence imbriquée de composants. Redux est une bibliothèque de conteneurs d’état prévisible qui nous permet de séparer, gérer et mettre à jour facilement la logique d’état dans React. Nous pouvons voir où, quand et comment notre état a changé.

Redux est une option solide pour gérer et gérer l’état dans React. C’est une bibliothèque open-source avec une communauté très active et qui est toujours mise à jour.

Le documentation de Redux est bien écrit et vous pouvez commencer à apprendre comment fonctionne Redux en le lisant. L’un des points les plus importants pour les bibliothèques de gestion d’état est la documentation, et Redux possède l’un des meilleurs.

État X

Machines à états finis sont partout, sans que vous les remarquiez. Les machines à états finis sont utilisées dans le monde réel dans de nombreux systèmes différents, par exemple les feux de circulation, les distributeurs automatiques, les ascenseurs, etc.

Une machine à états finis est un modèle de calcul consistant en une machine avec un nombre fini d’états. Une machine à états finis peut être dans l’un des nombres finis d’états à un instant donné.

Le processus de passage d’un état à un autre est appelé transition. Une transition attend, lit une entrée et, après avoir été déclenchée, passe à un état spécifique en fonction de l’état actuel et de l’événement.

Voici un exemple de machine à états finis :

Un tourniquet a un nombre fini d’états. L’état initial est verrouillé – si nous essayons de le pousser, il ne fera rien. Si nous mettons une pièce de monnaie, elle passera à l’état déverrouillé. Si nous essayons de mettre une autre pièce de monnaie, cela ne fera rien. Si nous le poussons, il reviendra à l’état verrouillé. Très simple, mais c’est super puissant.

État X est une machine à états finis et une bibliothèque d’états pour React. Il nous aide à créer, interpréter et exécuter des machines à états finis et des diagrammes d’états dans les applications React.

Ce qui rend XState meilleur que les autres bibliothèques de gestion d’état courantes, c’est qu’il est sûr à utiliser car nous pouvons voir notre nombre fini d’états possibles. XState nous oblige à penser à la logique d’état avant d’écrire le code.

import { Machine } from 'xstate';

const toggleMachine = Machine({
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
});

Lorsque nous utilisons XState, nous devons d’abord commencer à penser à l’état et aux transitions. Comment nous allons créer notre machine et comment nous allons passer d’un état à un autre.

La courbe d’apprentissage de XState peut être un peu plus difficile que d’autres bibliothèques de gestion d’état simples, mais cela fonctionne très bien pour les états complexes. Nous devons nous ressaisir à quelques concepts informatiques fondamentaux tels que machines à états finis, diagrammes d’état, modèle d’acteuretc.

Cela vaut vraiment la peine de vérifier.

useState : pas pour la gestion d’état complexe

Il existe deux façons de créer un composant dans React. Nous pouvons construire un composant en utilisant des classes ou en utilisant des fonctions. Les deux façons sont valables et très courantes dans la communauté.

Avant la sortie de Crochets de réaction, nous ne pouvions gérer notre état qu’en utilisant des composants de classe. La sortie de React Hooks a marqué le début d’une nouvelle ère dans la communauté React.

Nous pouvons avoir et gérer notre état dans des composants fonctionnels. Mieux que cela, nous pouvons créer crochets personnalisésqui sont des fonctions simples qui peuvent utiliser les crochets React intégrés et rendre notre logique d’état disponible n’importe où dans notre application.

import { useState } from "react";

Le crochet le plus utilisé dans React est useState. Nous pouvons utiliser le crochet useState à l’intérieur d’un composant fonctionnel et cela rendra notre composant associé à cet état en particulier.

Le crochet useState est une fonction simple à laquelle nous pouvons transmettre une valeur initiale. Il renvoie un tableau, où la première valeur est notre valeur d’état, et la seconde est une fonction que nous utilisons pour modifier notre état.

const [state, setState] = useState(false);

La plupart du temps, le hook useState nous suffit pour gérer notre état. Lorsque nous avons besoin d’états simples de type chaîne ou booléen, par exemple, ce crochet est très utile et intuitif. Cela ne créera pas de code inutile dans notre application et cela ne rendra pas notre code plus difficile à lire ou à déboguer.

import React, { useState } from "react";

const App = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <h1>toggle is {toggle ? "on" : "off}</h1>
      <button onClick={() => setToggle(!toggle)}>toggle</button>
    </div>
  )
};

Le crochet useState brille lorsque nous créons un simple et petit morceau d’état et que nous le gérons à l’intérieur d’un seul composant. Nous ne voulons pas gérer des états complexes, comme des formulaires, par exemple, à l’aide du crochet useState. Cela peut sembler une tâche facile, mais il existe de nombreuses bibliothèques disponibles qui sont mieux adaptées à la gestion d’état complexe – et je recommanderais Redux ou XState.

Conclusion

Les possibilités que nous offre React sont énormes. Nous pouvons construire presque n’importe quoi en l’utilisant. Des cas les plus élémentaires comme les pages de destination ou les blogs aux plus complexes, comme les jeux et les applications de commerce électronique. Nous pouvons construire n’importe quoi en utilisant React.

La gestion des états est et sera toujours l’une des préoccupations les plus importantes pour les développeurs React. C’est ce qui rend les applications React dynamiques et interactives.

Parfois, choisir la bonne bibliothèque de gestion d’état pour le travail peut être une tâche difficile. Mais la bonne bibliothèque pour le travail nous facilitera la mise en œuvre de choses complexes dans React.