React API

@lite-fsm/react помечен "use client". Модуль можно импортировать из SSR/RSC, но provider и hooks должны выполняться в клиентском дереве React.

Импорт


import {
  FSMContext,
  FSMContextProvider,
  FSMHydrationBoundary,
  defineMachine,
  useHydrateSnapshot,
  useManager,
  useSelector,
  useTransition,
} from "@lite-fsm/react";

Компоненты

`FSMContextProvider`


<FSMContextProvider machineManager={manager}>
  <App />
</FSMContextProvider>

Prop	Назначение
`machineManager`	Экземпляр `MachineManager`
`persist?`	Массив `FSMPersistLifecycle`; провайдер запускает элементы после монтирования
`children`	React-поддерево

persist — массив объектов со структурным контрактом { start(): () => void }, поэтому @lite-fsm/react не зависит от @lite-fsm/persist. Элементы с getStatus() и subscribeStatus() доступны хукам @lite-fsm/persist/react в том же порядке; элементы только с контрактом жизненного цикла представлены как null. Если persist не передан или равен [], usePersistStatuses() возвращает [].

`FSMHydrationBoundary`


<FSMHydrationBoundary snapshot={snapshot} strategy="merge">
  <Page />
</FSMHydrationBoundary>

FSMHydrationBoundary даёт useSelector() состояние, рассчитанное из снимка, уже во время отрисовки. После монтирования менеджер применяет тот же снимок в useLayoutEffect.

Prop	Назначение
`snapshot`	`MachineManagerSnapshot`
`strategy?`	Режим `hydrate`: частичное наложение или полный набор записей акторов
`transitionAfterHydrate?`	Событие или массив событий после hydrate
`children`	React-поддерево

strategy имеет ту же семантику, что и в core hydrate(): это не глубокое объединение поля context и не глобальная замена состояния менеджера.

Хуки

Hook	Что возвращает
`useSelector(selector, equalityFn?)`	Выбранную часть состояния менеджера
`useTransition()`	Функцию `manager.transition`
`useManager()`	Текущий `MachineManager`
`useHydrateSnapshot(snapshot, opts?)`	Применяет снимок в `useLayoutEffect`


function Counter() {
  const count = useSelector((state) => state.counter.context.count);
  const transition = useTransition();
 
  return <button onClick={() => transition({ type: "INC" })}>{count}</button>;
}

`defineMachine`

React-пакет экспортирует defineMachine для сценариев без общего MachineManager:


import { defineMachine } from "@lite-fsm/react";

Используйте его, когда машине не нужен общий MachineManager в контексте React. Для приложения с несколькими машинами используйте MachineManager + FSMContextProvider.

Типы

Тип	Назначение
`FSMContextType`	Форма контекста React
`FSMContextProviderProps`	Props провайдера
`FSMPersistLifecycle`	Lifecycle-контракт persist-провайдера
`FSMHydrationBoundaryProps`	Props границы гидратации
`TypedUseSelectorHook`	Alias типизированного selector hook
`TypedUseTransitionHook`	Alias типизированного transition hook
`TypedUseManagerHook`	Типизированный manager hook alias

Подробное руководство: @lite-fsm/react.