Узнайте, как использовать XState и конечный автомат для разработки своего приложения.

Недавно моя команда начала задаваться вопросом, есть ли лучшие способы управления рабочим процессом в наших приложениях. Нам нужен лучший способ определить, в каком «состоянии» находится приложение и какой следующий шаг оно должно предпринять.

XState

XState — это реализация конечного автомата. Конечный автомат (FSM) — это вычислительная модель, используемая для представления и управления поведением системы. Он состоит из конечного числа состояний, переходов между этими состояниями и действий, которые запускаются во время переходов.

Основные концепции

состояния

Не путать с состоянием в React. Состояние описывает состояние машины, а конечная машина может находиться только в одном состоянии за раз.

Переходы и события

Машина переходит из одного состояния в другое посредством переходов, которые вызываются событиями. Переходы детерминированы в том смысле, что такой переход может происходить только между назначенными состояниями, и вы всегда будете знать, какое следующее состояние соответствует состоянию и переходу.

Охранники

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

Действия

Пока машина работает, мы можем запускать другие побочные эффекты, называемые действиями. Это чистые функции, которые мы можем вызвать и забыть о них. Мы могли бы использовать их для регистрации или обновления данных.

Контекст

В то время как состояния содержат ваши конечные состояния, контекст содержит ваши бесконечные состояния. Это могут быть ваши счетчики, ввод текста, данные, которые вы получаете от API.

Актеры

Это асинхронные функции, которые ваша машина может вызывать в любых состояниях. Вы можете использовать его для отправки вызовов API, которые впоследствии обновляют контекст и отправляют событие.

В итоге у вас может получиться такой конечный автомат:

За и против

Плюсы:

  • Конечный автомат работает в очень детерминированном и предсказуемом потоке
  • Логика, связанная с машиной, находится в одном месте
  • Визуализатор действительно помогает ясно видеть вещи и показать, как должна работать эта машина.
  • Хорошая интеграция с популярными фреймворками, а также может использоваться с ванильным JavaScript.

Минусы:

  • Это очень сложно и заставляет людей задуматься, нужно ли это
  • Крутая кривая обучения, так как есть много новых терминов для изучения, особенно концепция конечного автомата.
  • Для новичков большая часть времени будет потрачена на определение того, что должно быть состоянием и что мы должны хранить в контексте.
  • Документация на момент написания смешивает текущую и альфа-версию XState, в то время как визуализатор иногда не понимает более новый синтаксис.
  • Преимущество явности в том, что она очень многословна. Это не может быть мошенничеством с точки зрения ясности.

Заключение

На момент написания у нас не было четкого рабочего процесса для нашего приложения, что немного усложняло составление диаграммы состояний. До XState мы использовали комбинацию Zustand и пользовательских хуков для аналогичного варианта использования, и сейчас это не проблема. Хотя XState определенно может сделать все детерминированным и сохранить все вместе, с его крутой кривой обучения, он больше похож на замену, чем на обновление для нашей текущей реализации. Инструмент в порядке, просто он, вероятно, не подходит нам в нашем нынешнем состоянии.

Если вы найдете это полезным, поделитесь им в Твиттере и дайте мне знать в Твиттере.

Первоначально опубликовано на https://sdust.dev.