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

В целом, это ок подход. Он хорошо работает на прямолинейных сценариях с несложной логикой. В случае системы со сложным поведением, если её спроектировать исходя из действий, то тогда в программе начнут появляться «режимы работы», «флаги» isSomething… и хитроспетения условий с комбинациями значений этих флагов.

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

В этом случае приходит на помощь проектирование системы исходя из её состояний и переходов между ними, а не из выполняемых функций. Такая система и есть конечный автомат, то есть система с конечным числом состояний.

Самый простой автомат состоит из двух состояний: выключено → включено. Чтобы перейти из одного состояний в другое вызывается action. Например, человек «спит» → вызывается action «пробудиться» → человек «бодрствует».

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

На фронте для реализации конечных автоматов есть классная либа xState. Автор либы из Microsoft, и она появилась, чтобы было проще поддерживать редактор workflows в Azure. На самом деле такое случается сплошь и рядом, когда появляется некая развесистая система, в которой могут разобраться только её авторы, так как в неё сложно въехать, объять умом целиком. И если есть общая диаграмма работы, то больше шансов, что человек с улицы сможет её раскурить.

Например, посмотрите на вот эту схему, попробуйте нажать «Simulate» в правом верхнем углу и прогоните программу от начала до конца. Так уже сходу и стало более-менее понятно, что в ней происходит?

А теперь если добавить, что из этой схемы сразу же генерится и код автомата, который можно скопировать в проект, допилить напильником и он будет работать, то получается прям бомба-пушка. Кстати, для VS Code есть визуализация прям внутри редактора, оч удобно прочекать, где куда и что идёт, это «живая документация».

Что ещё интересного есть в xState. Между состояниями могут быть guards, которые в зависимости от результата поведут в одну сторону или в другую. Поддерживается TS и асинхронная логика. Есть интеграция с React, Vue, Svelte. Также авторы стали развивать либу в сторону actor-ов: это такой архитектурный паттерн, когда система представляется неким действующим лицом, актором, которое выполняет действия, может взаимодействовать с другими акторами и тд.

В общем, если у вас уже запутанная система или вы собираетесь заниматься системой с множественными состояниями, советую приглядеться к xState ✌️.