Machine d'état avec Hook personnalisé React : Maîtriser l'abstraction de la logique d'état complexe

À mesure que la complexité des applications React augmente, la gestion de l'état peut devenir un défi majeur. Les approches traditionnelles utilisant `useState` et `useEffect` peuvent rapidement conduire à une logique enchevêtrée et à un code difficile à maintenir, surtout lorsqu'il s'agit de transitions d'état et d'effets de bord complexes. C'est là que les machines d'état, et plus particulièrement les hooks personnalisés React les implémentant, viennent à la rescousse. Cet article vous guidera à travers le concept des machines d'état, vous montrera comment les implémenter en tant que hooks personnalisés dans React, et illustrera les avantages qu'elles offrent pour créer des applications évolutives et maintenables pour un public mondial.

Qu'est-ce qu'une machine d'état ?

Une machine d'état (ou machine à états finis, FSM) est un modèle mathématique de calcul qui décrit le comportement d'un système en définissant un nombre fini d'états et les transitions entre ces états. Pensez-y comme un organigramme, mais avec des règles plus strictes et une définition plus formelle. Les concepts clés incluent :

• États : Représentent différentes conditions ou phases du système.
• Transitions : Définissent comment le système passe d'un état à un autre en fonction d'événements ou de conditions spécifiques.
• Événements : Déclencheurs qui provoquent les transitions d'état.
• État initial : L'état dans lequel le système démarre.

Les machines d'état excellent dans la modélisation de systèmes avec des états bien définis et des transitions claires. Les exemples abondent dans les scénarios du monde réel :

• Feux de circulation : Passent par des états comme Rouge, Jaune, Vert, avec des transitions déclenchées par des minuteries. C'est un exemple reconnaissable dans le monde entier.
• Traitement des commandes : Une commande de e-commerce peut passer par des états comme "En attente", "En traitement", "Expédiée" et "Livrée". Cela s'applique universellement à la vente en ligne.
• Flux d'authentification : Un processus d'authentification utilisateur pourrait impliquer des états comme "Déconnecté", "Connexion en cours", "Connecté" et "Erreur". Les protocoles de sécurité sont généralement cohérents d'un pays à l'autre.

Pourquoi utiliser des machines d'état dans React ?

L'intégration de machines d'état dans vos composants React offre plusieurs avantages convaincants :

• Meilleure organisation du code : Les machines d'état imposent une approche structurée de la gestion de l'état, rendant votre code plus prévisible et plus facile à comprendre. Fini le code spaghetti !
• Complexité réduite : En définissant explicitement les états et les transitions, vous pouvez simplifier la logique complexe et éviter les effets de bord involontaires.
• Testabilité améliorée : Les machines d'état sont intrinsèquement testables. Vous pouvez facilement vérifier que votre système se comporte correctement en testant chaque état et chaque transition.
• Maintenabilité accrue : La nature déclarative des machines d'état facilite la modification et l'extension de votre code à mesure que votre application évolue.
• Meilleures visualisations : Il existe des outils qui peuvent visualiser les machines d'état, offrant un aperçu clair du comportement de votre système, ce qui facilite la collaboration et la compréhension au sein d'équipes aux compétences diverses.

Implémenter une machine d'état en tant que Hook personnalisé React

Illustrons comment implémenter une machine d'état à l'aide d'un hook personnalisé React. Nous allons créer un exemple simple d'un bouton qui peut être dans trois états : `idle` (inactif), `loading` (chargement) et `success` (succès). Le bouton démarre dans l'état `idle`. Lorsqu'on clique dessus, il passe à l'état `loading`, simule un processus de chargement (en utilisant `setTimeout`), puis passe à l'état `success`.

1. Définir la machine d'état

D'abord, nous définissons les états et les transitions de la machine d'état de notre bouton :

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Après 2 secondes, transition vers l'état success
      },
    },
    success: {},
  },
};

Cette configuration utilise une approche agnostique de toute bibliothèque (bien qu'inspirée par XState) pour définir la machine d'état. Nous implémenterons nous-mêmes la logique pour interpréter cette définition dans le hook personnalisé. La propriété `initial` définit l'état initial à `idle`. La propriété `states` définit les états possibles (`idle`, `loading` et `success`) et leurs transitions. L'état `idle` a une propriété `on` qui définit une transition vers l'état `loading` lorsqu'un événement `CLICK` se produit. L'état `loading` utilise la propriété `after` pour passer automatiquement à l'état `success` après 2000 millisecondes (2 secondes). L'état `success` est un état terminal dans cet exemple.

2. Créer le Hook personnalisé

Maintenant, créons le hook personnalisé qui implémente la logique de la machine d'état :

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Nettoyage au démontage ou au changement d'état
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Ce hook `useStateMachine` prend la définition de la machine d'état en argument. Il utilise `useState` pour gérer l'état actuel et le contexte (nous expliquerons le contexte plus tard). La fonction `transition` prend un événement en argument et met à jour l'état actuel en fonction des transitions définies dans la machine d'état. Le hook `useEffect` gère la propriété `after`, en définissant des minuteries pour passer automatiquement à l'état suivant après une durée spécifiée. Le hook retourne l'état actuel, le contexte et la fonction `transition`.

3. Utiliser le Hook personnalisé dans un composant

Enfin, utilisons le hook personnalisé dans un composant React :

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Après 2 secondes, transition vers l'état success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Cliquez-moi';
  if (currentState === 'loading') {
    buttonText = 'Chargement...';
  } else if (currentState === 'success') {
    buttonText = 'Succès !';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Ce composant utilise le hook `useStateMachine` pour gérer l'état du bouton. La fonction `handleClick` envoie l'événement `CLICK` lorsque l'on clique sur le bouton (et seulement s'il est dans l'état `idle`). Le composant affiche un texte différent en fonction de l'état actuel. Le bouton est désactivé pendant le chargement pour éviter les clics multiples.

Gérer le contexte dans les machines d'état

Dans de nombreux scénarios réels, les machines d'état doivent gérer des données qui persistent à travers les transitions d'état. Ces données sont appelées contexte. Le contexte vous permet de stocker et de mettre à jour des informations pertinentes au fur et à mesure que la machine d'état progresse.

Étendons notre exemple de bouton pour inclure un compteur qui s'incrémente à chaque fois que le bouton se charge avec succès. Nous allons modifier la définition de la machine d'état et le hook personnalisé pour gérer le contexte.

1. Mettre à jour la définition de la machine d'état

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Nous avons ajouté une propriété `context` à la définition de la machine d'état avec une valeur initiale de `count` à 0. Nous avons également ajouté une action `entry` (d'entrée) à l'état `success`. L'action `entry` est exécutée lorsque la machine d'état entre dans l'état `success`. Elle prend le contexte actuel en argument et retourne un nouveau contexte avec le `count` incrémenté. L'action `entry` ici montre un exemple de modification du contexte. Comme les objets Javascript sont passés par référence, il est important de retourner un *nouvel* objet plutôt que de muter l'original.

2. Mettre à jour le Hook personnalisé

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Nettoyage au démontage ou au changement d'état
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Nous avons mis à jour le hook `useStateMachine` pour initialiser l'état `context` avec le `stateMachineDefinition.context` ou un objet vide si aucun contexte n'est fourni. Nous avons également ajouté un `useEffect` pour gérer l'action `entry`. Lorsque l'état actuel a une action `entry`, nous l'exécutons et mettons à jour le contexte avec la valeur retournée.

3. Utiliser le Hook mis à jour dans un composant

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Cliquez-moi';
  if (currentState === 'loading') {
    buttonText = 'Chargement...';
  } else if (currentState === 'success') {
    buttonText = 'Succès !';
  }

  return (
    

      
        {buttonText}
      
      
Compteur : {context.count}
    
  );
};

export default MyButton;

Nous accédons maintenant au `context.count` dans le composant et l'affichons. Chaque fois que le bouton se charge avec succès, le compteur s'incrémente.

Concepts avancés des machines d'état

Bien que notre exemple soit relativement simple, les machines d'état peuvent gérer des scénarios beaucoup plus complexes. Voici quelques concepts avancés à considérer :

• Gardes (Guards) : Conditions qui doivent être remplies pour qu'une transition ait lieu. Par exemple, une transition pourrait n'être autorisée que si un utilisateur est authentifié ou si une certaine valeur de données dépasse un seuil.
• Actions : Effets de bord qui sont exécutés en entrant ou en sortant d'un état. Celles-ci pourraient inclure des appels API, la mise à jour du DOM ou l'envoi d'événements à d'autres composants.
• États parallèles : Vous permettent de modéliser des systèmes avec plusieurs activités simultanées. Par exemple, un lecteur vidéo pourrait avoir une machine d'état pour les contrôles de lecture (play, pause, stop) et une autre pour la gestion de la qualité vidéo (basse, moyenne, haute).
• États hiérarchiques : Vous permettent d'imbriquer des états dans d'autres états, créant ainsi une hiérarchie d'états. Cela peut être utile pour modéliser des systèmes complexes avec de nombreux états connexes.

Bibliothèques alternatives : XState et autres

Bien que notre hook personnalisé fournisse une implémentation de base d'une machine d'état, plusieurs excellentes bibliothèques peuvent simplifier le processus et offrir des fonctionnalités plus avancées.

XState

XState est une bibliothèque JavaScript populaire pour créer, interpréter et exécuter des machines d'état et des statecharts. Elle fournit une API puissante et flexible pour définir des machines d'état complexes, y compris le support des gardes, des actions, des états parallèles et des états hiérarchiques. XState offre également d'excellents outils pour visualiser et déboguer les machines d'état.

Autres bibliothèques

D'autres options incluent :

• Robot : Une bibliothèque de gestion d'état légère axée sur la simplicité et la performance.
• react-automata : Une bibliothèque spécialement conçue pour intégrer des machines d'état dans les composants React.

Le choix de la bibliothèque dépend des besoins spécifiques de votre projet. XState est un bon choix pour les machines d'état complexes, tandis que Robot et react-automata conviennent à des scénarios plus simples.

Bonnes pratiques pour l'utilisation des machines d'état

Pour exploiter efficacement les machines d'état dans vos applications React, considérez les bonnes pratiques suivantes :

• Commencez petit : Débutez avec des machines d'état simples et augmentez progressivement la complexité selon les besoins.
• Visualisez votre machine d'état : Utilisez des outils de visualisation pour obtenir une compréhension claire du comportement de votre machine d'état.
• Rédigez des tests complets : Testez minutieusement chaque état et chaque transition pour vous assurer que votre système se comporte correctement.
• Documentez votre machine d'état : Documentez clairement les états, les transitions, les gardes et les actions de votre machine d'état.
• Pensez à l'internationalisation (i18n) : Si votre application cible un public mondial, assurez-vous que la logique de votre machine d'état et votre interface utilisateur sont correctement internationalisées. Par exemple, utilisez des machines d'état ou des contextes distincts pour gérer différents formats de date ou symboles monétaires en fonction des paramètres régionaux de l'utilisateur.
• Accessibilité (a11y) : Assurez-vous que vos transitions d'état et vos mises à jour de l'interface utilisateur sont accessibles aux utilisateurs handicapés. Utilisez les attributs ARIA et le HTML sémantique pour fournir un contexte et un retour d'information appropriés aux technologies d'assistance.

Conclusion

Les hooks personnalisés React combinés aux machines d'état offrent une approche puissante et efficace pour gérer la logique d'état complexe dans les applications React. En abstrayant les transitions d'état et les effets de bord dans un modèle bien défini, vous pouvez améliorer l'organisation du code, réduire la complexité, améliorer la testabilité et accroître la maintenabilité. Que vous implémentiez votre propre hook personnalisé ou que vous utilisiez une bibliothèque comme XState, l'intégration de machines d'état dans votre flux de travail React peut améliorer considérablement la qualité et l'évolutivité de vos applications pour les utilisateurs du monde entier.