Управление состоянием через конечные автоматы: от хаоса к порядку с XState

Категория: Статьи • 1 July 2025 • 5 мин чтения

Современные фронтенд-приложения давно перестали быть простыми шаблонизаторами данных. Сложные взаимодействия, мультишаговые процессы, асинхронные операции – всё это создаёт лавину возможных состояний интерфейса. Традиционные подходы вроде использования хуков состояния или Redux часто приводят к хрупкому коду, где неожиданные комбинации флагов порождают баги вида "кнопка активна, но нажимать нельзя". В таких условиях концепция конечных автоматов переходит из разряда академических курсов в практический арсенал разработчика.

Конечные автоматы: не просто переключатель

В основе конечного автомата (state machine) лежит простая идея: система может находиться в одном конкретном состоянии из конечного набора возможных. Переходы между состояниями строго определены и запускаются событиями. Например, состояние авторизации пользователя:

mermaid
graph LR
    UNAUTHENTICATED -- LOGIN_SUCCESS --> AUTHENTICATED
    UNAUTHENTICATED -- LOGIN_FAIL --> ERROR
    AUTHENTICATED -- LOGOUT --> UNAUTHENTICATED
    ERROR -- RETRY --> UNAUTHENTICATED

Но настоящую силу даёт расширенная версия – statecharts. Они добавляют иерархию, паралелльные состояния, защитные условия (guards) и действия (actions), превращая автомат в полноценный движок поведения.

Практика: Реализация покупки в интернет-магазине

Представим процесс оформления заказа:

  1. Выбор товара
  2. Проверка доступности
  3. Оплата
  4. Подтверждение

Наивная реализация на React-хуках быстро превратится в котел из флагов:

javascript
const [isChecking, setIsChecking] = useState(false);
const [isAvailable, setIsAvailable] = useState(null);
const [isPaying, setIsPaying] = useState(false);
const [paymentError, setPaymentError] = useState(null);
// ... и т.д.

Попробуйте добавить обработку повторной оплаты или отмены в этом хаосе. Теперь опишем процесс как statechart с помощью XState:

javascript
import { createMachine, assign } from 'xstate';

const purchaseMachine = createMachine({
  id: 'purchase',
  initial: 'selecting',
  context: {
    items: [],
    error: null
  },
  states: {
    selecting: {
      on: {
        ADD_ITEM: {
          actions: assign({
            items: (ctx, e) => [...ctx.items, e.item]
          })
        },
        CHECKOUT: 'checkingAvailability'
      }
    },
    checkingAvailability: {
      invoke: {
        src: 'checkAvailability',
        onDone: { target: 'payment' },
        onError: { 
          target: 'failed', 
          actions: assign({ error: (_, e) => e.data })
        }
      }
    },
    payment: {
      on: {
        PROCESS_PAYMENT: 'processingPayment',
        CANCEL: 'cancelled'
      }
    },
    processingPayment: {
      invoke: {
        src: 'processPayment',
        onDone: 'confirmed',
        onError: { 
          target: 'failed', 
          actions: assign({ error: (_, e) => e.data })
        }
      }
    },
    confirmed: { type: 'final' },
    failed: {},
    cancelled: { type: 'final' }
  }
});

Ключевые компоненты:

  • states определяет все возможные состояния
  • on описывает возможные переходы по событиям
  • invoke запускает асинхронные сервисы
  • assign обновляет контекст (дополнительные данные)
  • Чёткие реакции на ошибки

Интегрируем с React компонентом:

javascript
import { useMachine } from '@xstate/react';

function PurchaseFlow() {
  const [state, send] = useMachine(purchaseMachine, {
    services: {
      checkAvailability: (ctx) => api.checkStock(ctx.items),
      processPayment: (ctx) => api.processPayment()
    }
  });

  return (
    <div>
      {state.matches('selecting') && (
        <ProductList 
          onSelect={(item) => send({ type: 'ADD_ITEM', item })}
          onCheckout={() => send('CHECKOUT')}
        />
      )}
      {state.matches('checkingAvailability') && <Spinner />}
      {state.value.payment && (
        <PaymentForm 
          onSubmit={() => send('PROCESS_PAYMENT')}
          onCancel={() => send('CANCEL')}
        />
      )}
      {state.matches('confirmed') && <Confirmation />}
    </div>
  );
}

Чем этот подход сильнее традиционного:

  1. В любой момент времени невозможно очутиться в нелегальном состоянии (например, "оплата идёт", но "товар недоступен")
  2. Реакция на события чётко определена для каждого состояния
  3. UI строго синхронизирован с состоянием системы через state.matches()
  4. Логика полностью отделена от представления

Инженерные преимущества в реальных приложениях

Предотвращение скрытых состояний В классической Redux-архитектуре со множеством флагов возможны композиции вида { isLoading: true, isSuccess: true, error: 'Timeout' }. В автомате такое исключено структурой – состояния и переходы явно декларируются.

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

mermaid
stateDiagram-v2
  [*] --> selecting
  selecting --> checkingAvailability: CHECKOUT
  checkingAvailability --> payment: availabilityConfirmed
  checkingAvailability --> failed: error
  payment --> processingPayment: PROCESS_PAYMENT
  payment --> cancelled: CANCEL
  processingPayment --> confirmed: paymentDone
  processingPayment --> failed: error

Тестирование как первоклассный гражданин Поскольку процесс чистый (без side-эффектов), тестирование сводится к простым сценариям:

javascript
import { interpret } from 'xstate';

test('should handle payment failure', async () => {
  const service = interpret(purchaseMachine.withConfig({
    services: {
      processPayment: () => Promise.reject(new Error('Card declined'))
    }
  })).start();

  service.send('CHECKOUT');
  await waitFor(service, state => state.matches('payment'));
  
  service.send('PROCESS_PAYMENT');
  await waitFor(service, state => state.matches('failed'));
  
  expect(service.state.context.error).toBe('Card declined');
});

Эволюция сложных сценариев Добавим повторную попытку оплаты с минимальными изменениями:

diff
processingPayment: {
  invoke: {
    src: 'processPayment',
    onDone: 'confirmed',
-   onError: 'failed'
+   onError: { 
+     target: 'payment',
+     actions: assign({ error: (_, e) => e.data })
+   }
  }
}

В классической реализации пришлось бы вручную сбрасывать кучу флагов и статусов.

Когда автомат ощутимо выигрывает

  • Мультишаговые процессы (анкеты, оплата, настройки)
  • Устройства с сложным жизненным циклом (видеоплееры, чаты)
  • Приложения с критичной логикой (финансовые системы, медоборудование)
  • Проекты с частыми изменениями бизнес-процессов

Итоговые рекомендации

Автоматы кентавтом не поедет. Для простых компонентов с парой состояний пожалуй, избыточны. Но когда видите комбинаторику условий – это чёткий сигнал:

javascript
if (isLoading && !error && !isSuccess) { ... }
else if (!isLoading && error && !isSubmitted) { ... }
// ... и другие чудовищные условия

XState – не серебрянная пуля, но мощный инструмент для конкретных классов проблем. Начните с малого:

  1. Выделите процесс с явными этапами
  2. Опишите состояния и события на бумаге
  3. Реализуйте через useMachine
  4. Почувствуйте контроль над поведением

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

При грамотном применении вы получите систему, где:

  • Невозможные состояния становятся невозможными
  • Бизнес-логика визуализируется в диаграммах
  • Регрессии отлавливаются на уровне архитектуры
  • Сложное поведение масштабируется предсказуемо

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