Сравнение lite-fsm с Redux/Redux Toolkit и XState

В этом разделе мы сравним библиотеку lite-fsm с другими популярными решениями для управления состоянием и конечными автоматами: Redux/Redux Toolkit и XState. Это сравнение поможет вам понять, когда и для каких задач лучше всего подходит lite-fsm.

Общий обзор библиотек

Redux/Redux Toolkit

Redux  — одна из самых популярных библиотек для управления состоянием в React-приложениях.
Redux Toolkit  — официальная надстройка над Redux, которая упрощает работу с Redux и предоставляет утилиты для сокращения шаблонного кода.

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

• Единое централизованное хранилище состояния (Store)
• Состояние изменяется только с помощью чистых функций (Reducers)
• Действия (Actions) описывают намерение изменить состояние
• Middleware для обработки побочных эффектов

XState

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

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

• Машины состояний и statecharts
• Вложенные (иерархические) состояния
• Параллельные состояния
• История состояний
• Действия на входе/выходе (entry/exit actions)
• Охранные условия (guards)
• Вызов сервисов и работа с обещаниями

lite-fsm

lite-fsm — минималистичная библиотека для работы с конечными автоматами, предлагающая простой и понятный API, сфокусированный на легкости использования и минимальном размере.

Основные концепции lite-fsm:

• Декларативное описание состояний и переходов
• Состояния с контекстными данными
• Эффекты, привязанные к состояниям
• Middleware для расширения функциональности
• Поддержка основных концепций statecharts через композицию автоматов
• Универсальное ядро, не зависящее от UI-фреймворка

Сравнительная таблица

Ключевые различия

Философия и дизайн

• Redux/Redux Toolkit: Основывается на принципах Flux-архитектуры с централизованным хранилищем состояния. Фокусируется на предсказуемости и отладке через односторонний поток данных.
• XState: Полная реализация statecharts с акцентом на гибкость и выразительность. Предлагает богатый набор возможностей для моделирования сложных поведений.
• lite-fsm: Минималистичный подход “только то, что нужно”. Фокусируется на простоте API, лёгкости адаптации и минимальном размере без потери основного функционала FSM и statecharts. В отличие от XState, реализует концепции statecharts через композицию автоматов вместо сложных встроенных структур.

Реализация Statecharts

В то время как XState предлагает прямую реализацию всех концепций statecharts в рамках одного автомата, lite-fsm реализует те же концепции через более простые, композиционные механизмы:

• Иерархические состояния реализуются через композицию автоматов и реакцию на общие события
• Параллельные состояния реализуются через независимые автоматы в MachineManager
• Условные переходы реализуются через reducer
• Самопереходы реализуются с помощью null-переходов

Это позволяет lite-fsm сохранять минимальный размер и простоту кода, при этом обеспечивая все основные возможности statecharts для большинства задач.

Код и синтаксис: Сравнение реализации автомата формы обратной связи

Ниже приведены примеры реализации одного и того же автомата формы обратной связи в разных библиотеках:

Redux/Redux Toolkit

// Redux Toolkit пример
import { createSlice, configureStore } from '@reduxjs/toolkit';
 
const feedbackSlice = createSlice({
  name: 'feedback',
  initialState: {
    state: 'prompt',
    feedback: ''
  },
  reducers: {
    feedbackGood: (state) => {
      state.state = 'thanks';
    },
    feedbackBad: (state) => {
      state.state = 'form';
    },
    updateFeedback: (state, action) => {
      state.feedback = action.payload.value;
    },
    submitFeedback: (state) => {
      if (state.feedback.length > 0) {
        state.state = 'thanks';
      }
    },
    goBack: (state) => {
      state.state = 'prompt';
    },
    close: (state) => {
      state.state = 'closed';
    },
    restart: (state) => {
      state.state = 'prompt';
      state.feedback = '';
    }
  }
});
 
const store = configureStore({
  reducer: feedbackSlice.reducer
});
 
export const { 
  feedbackGood, 
  feedbackBad, 
  updateFeedback, 
  submitFeedback, 
  goBack, 
  close, 
  restart 
} = feedbackSlice.actions;

XState

export const feedbackMachine = setup({
  types: {
    context: {} as { feedback: string },
    events: {} as Events
  },
  guards: {
    feedbackValid: ({ context }) => context.feedback.length > 0
  }
}).createMachine({
  id: 'feedback',
  initial: 'prompt',
  context: {
    feedback: ''
  },
  states: {
    prompt: {
      on: {
        'feedback.good': 'thanks',
        'feedback.bad': 'form'
      }
    },
    form: {
      on: {
        'feedback.update': {
          actions: assign({
            feedback: ({ event }) => event.value
          })
        },
        back: { target: 'prompt' },
        submit: {
          guard: 'feedbackValid',
          target: 'thanks'
        }
      }
    },
    thanks: {},
    closed: {
      on: {
        restart: {
          target: 'prompt',
          actions: assign({
            feedback: ''
          })
        }
      }
    }
  },
  on: {
    close: '.closed'
  }
});

lite-fsm

const feedbackMachine = createMachine({
  config: {
    "*": {
      close: "closed",
    },
    prompt: {
      "feedback.good": "thanks",
      "feedback.bad": "form",
    },
    thanks: {},
    form: {
      "feedback.update": null,
      back: "prompt",
      submit: "thanks",
    },
    closed: {
      restart: "prompt",
    }
  },
  initialContext: {
    feedback: "",
  },
  initialState: "prompt",
  reducer: (s, action, { nextState }) => {
    s.state = nextState;
    
    switch (action.type) {
      case "restart":
        s.context.feedback = "";
        break;
      case "feedback.update":
        s.context.feedback = action.payload.value;
        break;
    }
  },
  effects: {},
});

Выводы по сравнению синтаксиса

Рассматривая одинаковый пример во всех трех библиотеках, можно сделать следующие наблюдения:

• Redux Toolkit: Требует явного описания всех действий и переходов, что приводит к большому количеству кода. Состояния и переходы между ними не представлены явно, что может затруднить понимание сложной логики.

• XState: Предлагает мощные возможности, но с избыточно сложным синтаксисом для многих практических задач. Глубоко вложенная структура и специфичный API (guards, actions, assign, entry/exit actions, invoked services) требуют значительного времени на освоение. При масштабировании реального приложения возникают серьезные проблемы: многоуровневая вложенность состояний делает код трудночитаемым, организация коммуникации между независимыми автоматами требует дополнительных абстракций (event bus, actor system), а реализация побочных эффектов через специфичный API усложняет понимание кода. В крупных проектах это часто приводит к необходимости создавать собственные абстракции поверх XState, что противоречит идее использования готовой библиотеки.

• lite-fsm: Использует декларативный подход с плоской структурой конфигурации для состояний и их переходов, что делает код интуитивно понятным даже для сложных автоматов. Заимствует от Redux концепцию reducer для обработки данных, что упрощает работу с контекстом и условной логикой. Четкое разделение между декларативным описанием состояний (в config), обработкой данных (в reducer) и побочными эффектами (в effects) создает более понятную и поддерживаемую структуру кода. Благодаря своему минималистичному подходу и простому API, lite-fsm не требует изучения множества концепций и сохраняет высокую читаемость кода даже при масштабировании проекта.

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

Сравнение систем типизации

При сравнении подходов к типизации в обеих библиотеках можно отметить следующие различия:

• XState: Предлагает несколько подходов к типизации - через types (ранее schema) или API функцию setup(). В XState v5 система typegen больше не поддерживается, вместо этого используется улучшенный встроенный вывод типов. Тем не менее, для сложных случаев требуется дополнительная ручная типизация с применением хелперов вроде assertEvent() для сужения типов событий. Хотя система типов улучшилась по сравнению с v4, она всё ещё может быть сложной в некоторых случаях.

• lite-fsm: Использует минималистичный подход, основанный на TypeScript generics и выводе типов. Библиотека предоставляет готовые типы для всех ключевых функций (TypedCreateMachineFn, TypedCreateReducerFn, и т.д.), что позволяет создать типизированную версию API без внешних инструментов. Система типов lite-fsm позволяет автоматически выводить типы состояний из конфигурации, а FSMEvent используется для типизации событий и их payload. Особое внимание уделено строгой типизации конфига состояний и переходов, что практически исключает ошибки при разработке - компилятор TypeScript не позволит указать несуществующее состояние или неверный переход. В reducer и effects также встроена строгая типизация, в эффектах доступен строго типизированный объект action, который содержит только те события, которые могли привести к текущему состоянию, что значительно упрощает отладку и понимание кода.

Для строготипизированных проектов lite-fsm предлагает более простой и интуитивно понятный подход, так как:

1. Не требует внешних инструментов и генерации дополнительных файлов
2. Использует понятную систему типов, основанную на ключевых функциях с предварительной типизацией
3. Предоставляет более прямолинейный путь типизации всего приложения через единую точку определения типов
4. Автоматически выводит типы состояний из конфигурации автомата

Когда использовать lite-fsm

lite-fsm является отличным выбором в следующих случаях:

1. Когда требуется простая и легковесная реализация конечных автоматов без избыточных возможностей
2. При ограничениях по размеру бандла (как для веб, так и для мобильных приложений)
3. Для быстрой разработки компонентов с чётко определёнными состояниями
4. Для разработчиков, которым нужен понятный API без необходимости изучать сложные концепции
5. Когда важна хорошая типизация TypeScript с минимальными усилиями
6. Для проектов, где нужна концепция statecharts, но в более простой и минималистичной реализации
7. Для проектирования и разработки приложений любого типа и платформы, не ограничиваясь веб-разработкой или React, где бизнес-логика инкапсулирована в автоматах, побочные эффекты - в effects, а через механизм внедрения зависимостей в автоматы можно добавлять сервисный слой
8. Когда требуется возможность чтения состояния всех автоматов, чего не предоставляет XState

Масштабирование и архитектура приложений

При разработке крупных приложений критически важно иметь простой и понятный способ организации логики и взаимодействия между различными частями системы. Это именно та область, где lite-fsm демонстрирует свои ключевые преимущества, причем не только для веб-приложений или приложений на React, но и для систем любой сложности и на любых платформах.

Сравнение подходов к построению крупных приложений

Проблемы разработки крупных приложений и их решение

Проблемы с XState в крупных приложениях:

• Сложная коммуникация между независимыми автоматами: Нет встроенного способа для независимых автоматов общаться без создания иерархических отношений
• Отсутствие прямого доступа к состоянию других автоматов: Нельзя просто получить состояние другого автомата без специальных настроек
• Необходимость в дополнительных абстракциях: Для крупных приложений требуется создавать сервисные слои, Event Bus системы и другие абстракции
• Сложное управление жизненным циклом: Необходимо тщательно управлять ссылками и зависимостями между автоматами

lite-fsm решает эти проблемы из коробки:

• MachineManager предоставляет централизованную точку доступа ко всем автоматам и их состояниям
• Отсутствие необходимости в дополнительных абстракциях: Все необходимые инструменты доступны из коробки
• Прямая коммуникация между автоматами без необходимости создания сложных структур связи
• Упрощенное управление состоянием всего приложения благодаря единому API

Разработка крупного приложения с lite-fsm

С lite-fsm вы можете начать разработку крупного приложения сразу, без необходимости предварительного планирования сложных архитектурных решений:

1. Создание автоматов по доменам: Создайте независимые автоматы для разных частей приложения
2. Регистрация в MachineManager: Зарегистрируйте автоматы в MachineManager
3. Прямое использование: Получайте доступ к состоянию любого автомата и отправляйте события между ними

// Простая регистрация всех автоматов
const manager = MachineManager({
  user: userMachine,
  cart: cartMachine,
  products: productsMachine,
  checkout: checkoutMachine
});
 
// Пример автомата с доступом к состоянию других автоматов через эффекты
const checkoutMachine = createMachine({
  config: {
    idle: {
      CHECKOUT: "processing"
    },
    processing: {
      PAYMENT_SUCCESS: "success",
      PAYMENT_ERROR: "error"
    },
    success: {},
    error: {
      RETRY: "idle"
    }
  },
  initialState: "idle",
  initialContext: {},
  effects: {
    // В эффектах доступна функция getState() для чтения любого автомата
    processing: async ({ transition, services, getState }) => {
      try {
        // Получаем актуальные данные корзины из другого автомата
        const { items, total } = getState().cart.context;
        
        // Получаем адрес доставки из профиля пользователя из другого автомата
        const { address, paymentMethods } = getState().user.context;
        
        // Используем данные из других автоматов для оформления заказа
        const payment = await services.paymentService.processPayment({
          items,
          total,
          address,
          paymentMethod: paymentMethods[0]
        });
        
        transition({ 
          type: "PAYMENT_SUCCESS", 
          payload: { orderId: payment.orderId } 
        });
      } catch (error) {
        transition({ 
          type: "PAYMENT_ERROR", 
          payload: { errorCode: error.code } 
        });
      }
    }
  }
});
 
// Доступ к состоянию любого автомата где угодно
const cartItems = manager.getState('cart').context.items;
 
// Отправка событий между автоматами
manager.transition({ type: 'ADD_ITEM', payload: { productId: 123 } });
 
manager.transition({ type: 'CHECKOUT' });
 

В отличие от XState, где бы вам потребовалось разработать дополнительные слои абстракции для такого взаимодействия, lite-fsm позволяет сосредоточиться на бизнес-логике, а не на инфраструктурном коде.

Заключение

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

Хотя библиотека имеет интеграцию с React, её универсальное ядро позволяет использовать тот же паттерн проектирования в любых JavaScript/TypeScript приложениях: серверных, мобильных, десктопных, и даже в системах без пользовательского интерфейса. Это делает lite-fsm не просто инструментом для управления состоянием UI, а полноценным архитектурным решением для проектирования надежных систем с чётко определенными состояниями.

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