State Machine (XState)

Advanced Ecosystem 🟡 Mid

Definition

Bibliothèque JavaScript pour modéliser la logique applicative comme des machines à états finis. Garantit que seules les transitions valides sont possibles.

Analogie

Un distributeur automatique qui ne peut être que dans un état à la fois : en attente, en paiement, en distribution.

Exemple de code

import { createMachine } from 'xstate';
const orderMachine = createMachine({
  initial: 'pending',
  states: {
    pending: { on: { PAY: 'processing' } },
    processing: { on: { SUCCESS: 'shipped', FAIL: 'pending' } },
    shipped: { on: { DELIVER: 'delivered' } },
    delivered: { type: 'final' },
  },
});

Cas d'usage

Modéliser des workflows complexes (commande, formulaire multi-étapes, lecteur vidéo) sans bugs d'état.

Anti-pattern

Gérer des états complexes avec des booléens multiples (isLoading && !isError && isSubmitted).
#architecture#state-management