Из документов:
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