Из документов:

XState — это библиотека для создания, интерпретации и выполнения конечных автоматов и диаграмм состояний, а также управления вызовами этих автоматов в качестве акторов.

uh?! 🤔

Что такое конечный автомат?

Конечный автомат описывает поведение системы, которая может находиться только в одном состоянии в любой момент времени (т.е. awake или asleep ).

Формально конечные автоматы состоят из пяти частей:

  • Конечное число состояний
  • Конечное количество событий
  • Исходное состояние
  • Функция перехода, которая определяет следующее состояние с учетом текущего состояния и события.
  • Набор (возможно, пустой) конечных состояний

Если вы хотите больше узнать о конечных автоматах, я нашел эту статью самой простой для описания конечных автоматов.

Что такое диаграммы состояний/переходов состояний?

Диаграмма состояний или диаграмма перехода состояний — это диаграмма, объясняющая переход между состояниями.

Что означает «управление вызовами этих машин как акторов»?

Актер в XState — это просто машина, которая взаимодействует с другими машинами, что означает, что вы вызываете сообщение между двумя или более машинами.

Из этой статьи:

Когда актор получает сообщение, он может сделать одну из следующих трех вещей:

- Создать больше актеров

- Отправка сообщений другим актерам

- Назначить, что делать со следующим сообщением

Код Xstate

Давайте посмотрим на пример кода, который представляет состояние нашей собаки (бодрствует, спит) путем создания машины:

import { createMachine } from 'xstate';

const promiseMachine = createMachine({
  id: 'dog',
  initial: 'awake',
  states: {
    awake: {
      on: {
        FALLS_ASLEEP: { target: 'asleep' },
      }
    },
    asleep: {
      on: {
        WAKES_UP: { target: 'awake' }
      }
    },
  }
});

Наша диаграмма состояний с использованием инструмента XState Visualizer:

Код + визуализатор можно найти здесь.

Рекомендуемые ресурсы:

https://statecharts.dev/benefit-easy-to-understand.html