Создание автомата

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

Примеры reducer-ов на этой странице написаны в стиле Immer: они мутируют draft state и предполагают, что MachineManager создан с immerMiddleware. Без middleware reducer должен вернуть новый объект { state, context }.

Разбиение автомата на части

Разбивайте определение автомата на config, initialState, initialContext, reducer и effects, когда единый файл уже мешает чтению. Для небольших машин храните описание рядом, чтобы модель была видна целиком.

Пример использования

Вместо того чтобы определять весь автомат в одном месте, вы можете выделить отдельные части:

import { createConfig, createMachine } from "@lite-fsm/core";
 
const config = createConfig({
IDLE: {
CHANGE_TRACK: "LOAD_TRACK_META_PENDING",
},
LOAD_TRACK_META_PENDING: {
LOAD_TRACK_META_RESOLVE: "LOAD_STREAMS_PENDING",
},
LOAD_STREAMS_PENDING: {
LOAD_STREAMS_RESOLVE: "SELECT_STREAM_PENDING",
},
SELECT_STREAM_PENDING: {
SELECT_STREAM_RESOLVE: "SET_STREAM_PENDING",
},
SET_STREAM_PENDING: {},
});
 
const initialState = "IDLE";
const initialContext = {
trackId: null,
};
 
const reducer = (state, action, { nextState }) => {
state.state = nextState;
 
if (action.type === "CHANGE_TRACK") {
state.context.trackId = action.payload.trackId;
}
};
 
const effects = {
// эффекты для разных состояний
};
 
export const player = createMachine({
  config,
  initialState,
  initialContext,
  reducer,
  effects,
});

import type { FSMEvent } from "@lite-fsm/core";
 
import { createConfig, createEffect, createMachine, createReducer } from "../create-machine";
 
export type AuthEvent =
  | FSMEvent<"DO_INIT", { sessionId: string }>
  | FSMEvent<"DO_READY">;
 
type AuthContext = {
sessionId: string;
};
 
const initialContext: AuthContext = {
sessionId: "",
};
 
const config = createConfig({
IDLE: {
DO_INIT: "PENDING",
},
PENDING: {
DO_READY: "READY",
},
READY: {},
});
 
const reducer = createReducer<typeof config, AuthContext>((state, action, { nextState }) => {
state.state = nextState;
 
if (action.type === "DO_INIT") {
state.context.sessionId = action.payload.sessionId;
}
});
 
const PENDING = createEffect<typeof config, "PENDING">({
type: "latest",
effect: async ({ transition }) => {
await new Promise((resolve) => setTimeout(resolve, 200));
transition({ type: "DO_READY" });
},
});
 
export const auth = createMachine({
  config,
  initialState: "IDLE",
  initialContext,
  reducer,
  effects: {
    PENDING,
  },
});

Здесь createMachine, createConfig, createReducer, createEffect — это типизированные обёртки из ../create-machine, которые фиксируют union событий и зависимостей всего приложения. Подробнее — в разделе Работа с TypeScript.

Преимущества композиции

1. Читаемость — config, reducer и effects можно читать как отдельные части модели.
2. Изолированные тесты — reducer и effects можно проверять без полного UI-сценария.
3. Чёткая ответственность — config описывает переходы, reducer обновляет данные, effects выполняют побочные действия.
4. Переиспользование — используйте общие config-фрагменты или effects в нескольких машинах, если у них совпадает контракт.

Структура файлов для сложных случаев

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

Чаще эффективнее разделять бизнес-логику по разным автоматам с чёткими зонами ответственности. При таком подходе отдельные автоматы растут медленнее, и необходимость дробить их на файлы возникает реже.

Если автомат всё же стал слишком сложным, используйте такую структуру:

/machines
  /player
    index.ts        // Экспорт автомата
    types.ts        // Типы и интерфейсы
    config.ts       // Конфигурация состояний
    reducer.ts      // Логика обновления состояния
    effects.ts      // Эффекты для состояний
    constants.ts    // Константы (имена состояний, событий)
    selectors.ts    // Селекторы для получения данных из состояния
  /auth
    // аналогичная структура
  /cart
    // аналогичная структура

Такой подход полезен для сложных автоматов, но не должен применяться преждевременно.