Comment construire des machines à états finis en utilisant XState et React?

Apr 21, 2020 4 min Follow me on Twitter

Subscribe to receive the free weekly article

XState est une bibliothèque pour créer, interpréter et exécuter des machines à états finis et des diagrammes d'état. C'est un package vraiment puissant qui peut être utilisé pour gérer l'état dans les applications React.

Dans ce guide, nous allons construire une machine à états finis en utilisant XState et React

Allons y!

Qu'est-ce qu'une machine à états finis?

Une machine à états finis est un modèle mathématique de calcul qui décrit le comportement d'un système qui ne peut se trouver que dans un seul état à un instant donné. Par exemple, disons que nous avons un bouton de commutation, l'état ne peut être que activé ou désactivé, il n'est pas possible d'avoir activé et désactivé en même temps et ceci est une représentation d'une machine à états finis.

Je suis d'accord que la théorie seule est toujours source de confusion

C'est un peu cryptique, mais une fois que nous aurons commencé à implémenter la machine d'état, ce sera beaucoup plus clair. Créons donc une nouvelle application React et ajoutons les dépendances nécessaires.

Configuration

Pour ce faire, exécutons la commande suivante sur le terminal pour créer une nouvelle application React.

npx create-react-app react-xstate-example

Ensuite, nous devons ajouter les bibliothèques xstate et @xstate/react en exécutant la commande ci-dessous:

yarn add xstate@latest @xstate/react

Une fois l'installation terminée, nous pouvons maintenant commencer à construire notre machine d'état dans la section suivante.

Construire une machine d'état

Dans ce guide, nous allons créer un sélecteur de thème simple, commençons donc par construire en premier la machine d'état.

Il existe un excellent outil fourni par XState, The Xstate Visualizer qui nous permet de construire et de visualiser la machine à états dans le navigateur.

état

Maintenant, jetons un œil à notre machine d'état dans App.js

  • Appjs
import React from "react"
import { Machine } from "xstate"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

Comme vous pouvez le voir ici, nous utilisons la même machine d'état construite avec le visualiseur. Et bien sûr, nous devons importer Machine à partir de la bibliothèque xstate pour construire la machine d'état sinon cela ne fonctionnera pas.

Maintenant, décomposons l'objet passé en argument à la méthode Machine().

  • id : c'est l'identifiant ou le nom de la machine d'état
  • initial : c'est comme son nom le suppose, l'état initial de la machine.
  • states : c'est là que nous mettons notre état, ici nous avons deux états: sombre et clair
  • on : il est utilisé pour déclencher une action. Ici, nous avons un événement pour changer le thème.

Une machine d'état seule ne fait pas grand-chose, utilisons-la dans la section suivante.

  • App.js
import React from "react"
import { Machine } from "xstate"
import { useMachine } from "@xstate/react"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

function App() {
  const [current, send] = useMachine(changeTheme)

  return (
    <div className="App">
      <h1>{current.matches("dark") ? "Dark Theme" : "Light Theme"}</h1>
      <button onClick={() => send("CHANGE")}>Change Theme</button>
    </div>
  )
}

export default App

Ici, nous commençons par importer le hook useMachine qui prend comme argument la machine d'état et retourne l'état courant et une fonction pour le mettre à jour. Si vous connaissez le hook useState, il fonctionne de la même manière.

L'état actuel a un tas de propriétés, mais ici nous avons juste besoin de la méthode matches() qui vérifie si l'état actuel est égal ou non à l'argument passé en paramètre et le gère en conséquence. Et maintenant, si le bouton est cliqué, il changera le thème de manière appropriée.

Génial! nous avons maintenant terminé la construction d'une machine à états finis en utilisant XState et React.

Merci d'avoir lu!

Vous pouvez trouver le code source ici

Photo de Solé Bicycles sur Unsplash

Ressources

XState Documentation

XState Visualiseur

Tutoriels XState

#react#xstate

Support my work

Get articles in your inbox