Machines à états légères dans React

Nous examinerons useStateMachine, un hook de machine d’état très léger mais puissant pour les applications React. Combinant essentiellement useReducer et useEffect, il est livré avec de nombreuses fonctionnalités avancées telles que les rappels d’entrée et de sortie, les transitions gardées, l’état étendu, etc.

La gestion de l’état est l’un des points les plus importants d’une application React. C’est ce qui rend notre application utilisable, et toutes les informations dont nous avons besoin sont là. C’est le cœur de chaque application React – il détermine comment chaque composant va se comporter et s’afficher pour l’utilisateur final.

La communauté React est très impliquée et s’engage à toujours trouver de nouvelles façons de gérer l’état plus efficacement, et il existe des milliers de bibliothèques disponibles pour résoudre la gestion de l’état dans les applications React. Beaucoup d’entre eux utilisent des approches différentes et sont recommandés pour résoudre un problème spécifique.

Dernièrement, la communauté React fait un usage intensif des machines à états finis. Les machines à états finis sont un concept informatique qui nous aide à gérer efficacement nos données d’état, nous aidant à visualiser notre machine à états et rendant notre application exempte d’effets secondaires inattendus.

Machines d’état

Les humains utilisent depuis longtemps des machines à états finis – un feu de circulation est une machine à états finis, un ascenseur est une machine à états finis, une horloge est une machine à états finis, etc.

L’utilisation de machines à états finis est tout à fait logique pour les applications modernes. Les applications modernes gèrent de nombreux états et transitions différents, ce qui rend l’ensemble de l’application complexe à fonctionner après un certain temps.

Une machine à états finis est un modèle conceptuel mathématique qui peut contenir un ou plusieurs états. Il contient un nombre fini d’états et ne peut être que dans un seul état à la fois. Cela nous aide également à mieux visualiser le fonctionnement de l’ensemble de notre machine à états, à améliorer notre expérience de débogage, à éviter les effets secondaires inutiles et à disposer d’une couverture de test solide.

Les machines à états finis nous aident à développer un système sans bogue et à réduire le risque de créer des états inattendus. Il correspond parfaitement aux modèles React et résout de nombreux problèmes de gestion d’état que nous rencontrons dans React.

Machines à états finis légères

Cela fait partie du travail d’un développeur d’essayer parfois de créer votre solution à l’aide d’un outil ou d’une bibliothèque différents. Nous y faisons face comme une sorte de défi, en faisant un objectif, et à la fin du chemin, nous le prenons comme une leçon d’apprentissage.

De nombreux développeurs ont essayé de créer leurs propres machines à états finis en utilisant différentes bibliothèques et approches. Il est courant de voir de nombreux développeurs utiliser le crochet useReducer, un crochet intégré pour React, comme une machine à états finis. useReducer est un crochet intégré très simple mais puissant que nous pouvons utiliser pour gérer notre état dans les applications React, mais nous n’allons pas le couvrir aujourd’hui.

Au lieu de cela, nous allons regarder useStateMachine– un crochet de machine d’état très léger mais puissant pour les applications React. Il s’agit « en fait d’une mince enveloppe autour de useReducer et useEffect de React », selon la documentation.

La bibliothèque useStateMachine se concentre sur le fait d’être une machine d’état simple mais puissante pour un développement rapide et simple. Il a été conçu spécifiquement pour les applications React, en suivant les modèles, et il est livré avec de nombreuses fonctionnalités avancées telles que les rappels d’entrée et de sortie, les transitions protégées, l’état étendu, etc.

Pour commencer avec la bibliothèque useStateMachine, installez-la d’abord :

yarn add @cassiozen/usestatemachine

Ensuite, tout ce que vous avez à faire est d’importer le hook useStateMachine dans le fichier que vous souhaitez utiliser :

import useStateMachine from "@cassiozen/usestatemachine";

Le crochet useStateMachine prend un objet comme une définition de machine à états finis. A l’intérieur de l’objet, les deux propriétés requises sont states et initial.

Le initial propriété est le nœud d’état que la machine doit démarrer. Le states La propriété est l’endroit où vous définissez tous les états finis possibles dans lesquels la machine d’état peut se trouver.

Imaginez que nous voulions créer une simple machine à états finis pour gérer un état ouvert/fermé pour un menu. Nous pourrions le créer en utilisant une autre alternative, mais une machine à états finis nous aide à avoir plus de sécurité, réduisant le risque d’avoir des effets secondaires inattendus et offrant une grande couverture de test.

Le states La propriété peut avoir de nombreux objets, et chaque objet à l’intérieur est un état dans lequel notre machine à états finis peut se trouver. Elle doit être définie avec le nom de l’état comme clé et un objet avec deux clés possibles : on (à quels événements cet état répond) et effect (exécuter du code arbitraire lors de l’entrée ou de la sortie de cet état).

Pour créer une simple machine à états finis ouverte/fermée, nous ne pouvons avoir que deux états possibles : open et close. Nous allons les créer à l’intérieur de notre machine à états finis, et nous passons également close comme notre nœud d’état initial.

const [state, send] = useStateMachine({
  initial: "close",
  states: {
    open: {
      on: { 
        TOGGLE: {
          target: 'close',
        }
      }
    },
    close: {
      on: { 
        TOGGLE: {
          target: 'open',
        }
      }
    }
  }
});

Une autre fonctionnalité intéressante que la bibliothèque useStateMachine nous fournit est les gardes. Les gardes sont des fonctions qui s’exécutent avant d’effectuer réellement la transition d’état : si la garde renvoie faux, la transition sera refusée.

const [state, send] = useStateMachine({
  initial: "close",
  states: {
    open: {
      on: { 
        TOGGLE: {
          target: 'close',
          guard: ({ context, event }) => {
            
          },
        }
      }
    },
    close: {
      on: { 
        TOGGLE: {
          target: 'open',
        }
      }
    }
  }
});

Les effets peuvent être déclenchés lorsque la machine d’état entre dans un état donné. Il fonctionne de la même manière que le crochet intégré useEffect. Un effet peut également être déclenché lorsque vous quittez l’état – tout ce que vous avez à faire est de renvoyer une fonction à partir de votre effet.

const [state, send] = useStateMachine({
  initial: "close",
  states: {
    open: {
      on: { 
        TOGGLE: {
          target: 'close',
        }
      },
      effect({ send, setContext, event, context }) {
        console.log('Menu is open!');
        return () => console.log('We left the "open" state');
      },
    },
    close: {
      on: { 
        TOGGLE: {
          target: 'open',
        }
      }
    }
  }
});

Le hook useStateMachine prend également en charge les états étendus. Un état étendu, souvent appelé contexte, est un objet où nous pouvons représenter des données quantitatives (par exemple, des chaînes arbitraires, des nombres, des objets).

Nous pouvons utiliser le contexte pour stocker toutes les données que nous voulons, et c’est ce qui en fait une excellente solution pour les applications modernes. Nous pouvons afficher combien de fois notre menu a été ouvert/fermé, par exemple.

const [state, send] = useStateMachine({
  initial: "close",
  context: {
    count: 0,
  },
  states: {
    open: {
      on: { 
        TOGGLE: {
          target: 'close',
        }
      },
      effect({ setContext }) {
        setContext(context => ({ count: context.count + 1 }));
      },
    },
    close: {
      on: { 
        TOGGLE: {
          target: 'open',
        }
      },
      effect({ setContext }) {
        setContext(context => ({ count: context.count + 1 }));
      },
    }
  }
});

Les machines à états finis légères peuvent être de simples machines à états finis qui nous aident à visualiser notre état, à déboguer facilement notre code et à avoir une grande couverture de test. Ce sont les grands avantages des machines à états finis.

Bien que useStateMachine soit une excellente bibliothèque de machines à états finis, d’autres options peuvent être un bon choix dans certains cas.

La bibliothèque de machines à états finis la plus populaire pour les applications React est État X— non seulement pour les applications React en particulier, mais pour toute application JavaScript ou TypeScript. Nous avons un sujet sur le blog couvrant comment fonctionnent les machines à états finis dans React-vérifier si vous êtes intéressé.

Conclusion

Les développeurs tombent amoureux des machines à états finis pour les applications modernes. De nombreuses applications contiennent une sorte de gestion d’état complexe et une machine à états finis peut aider à la simplifier et à faciliter la mise en œuvre de nouvelles fonctionnalités.

L’utilisation de machines à états finis n’a pas toujours besoin d’être pour quelque chose de complexe. Nous pouvons utiliser une machine à états finis pour presque tout et ce serait toujours un excellent choix. Nous pouvons l’utiliser pour des états simples ou complexes – les avantages apportés par les machines à états finis seront toujours les mêmes.