Родительские состояния

Состояния могут содержать другие состояния, также известные как дочерние состояния. Эти дочерние состояния активны только тогда, когда активно родительское состояние.

Дочерние состояния вложены в свои родительские состояния. Родительские состояния также известны как составные состояния.

Совет

Посмотрите наше видео "Parent and child states" на YouTube (1m6s).

В видеоплеере выше состояние Opened является родительским для состояний Playing, Paused и Stopped. Эти состояния, их переходы и события вложены внутри состояния Opened.

Корневое состояние

Сама машина состояний является родительским состоянием! Это корневое состояние, и оно всегда активно.

Нормально иметь машину состояний без других состояний. Это полезно для моделирования простой машины состояний, которая только обрабатывает события, выполняя действия в переходах.

Вот пример простой машины подсчёта с событиями increment, decrement и reset, и без состояний, кроме неявного корневого состояния верхнего уровня:

import { createMachine } from 'xstate';

const countingMachine = createMachine({
    id: 'counting',
    on: {
        increment: {
            actions: assign({
                count: ({ context }) => context.count + 1,
            }),
        },
        decrement: {
            actions: assign({
                count: ({ context }) => context.count - 1,
            }),
        },
        reset: {
            actions: assign({ count: 0 }),
        },
    },
    // Нет дочерних состояний!
});

Начальное состояние

Начальное состояние родительского состояния — это состояние, в которое происходит вход при входе в родительское состояние. Родительские состояния должны иметь начальное состояние.

Вы указываете начальное состояние через свойство initial родительского состояния, которое является ключом начального состояния в объекте states:

import { createMachine } from 'xstate';

const feedbackMachine = createMachine({
    initial: 'question',
    states: {
        question: {
            // ...
        },
        form: {
            // ...
        },
        thanks: {
            // ...
        },
    },
});

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

Переходы в родительских состояниях

Переход, нацеленный на родительское состояние, войдёт в родительское состояние и его начальное состояние. Если это начальное состояние является родительским состоянием, то будет введено начальное состояние этого состояния и так далее.

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

Переходы на родительском состоянии могут быть нацелены на дочерние (или потомковые) состояния. Это полезно для моделирования перехода, который должен перейти в определённое дочернее состояние независимо от того, какое дочернее состояние в данный момент активно.

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

Дочерние финальные состояния

Когда достигается дочернее финальное состояние родительского состояния, это родительское состояние считается «завершённым». Переход onDone этого родительского состояния выполняется автоматически.

import { createMachine } from 'xstate';

const coffeeMachine = createMachine({
    initial: 'preparation',
    states: {
        preparation: {
            initial: 'weighing',
            states: {
                weighing: {
                    on: {
                        weighed: {
                            target: 'grinding',
                        },
                    },
                },
                grinding: {
                    on: {
                        ground: 'ready',
                    },
                },
                // Дочернее финальное состояние родительского состояния 'preparation'
                ready: {
                    type: 'final',
                },
            },
            // Переход будет выполнен при достижении дочернего финального состояния
            onDone: {
                target: 'brewing',
            },
        },
        brewing: {
            // ...
        },
    },
});

Моделирование

При проектировании машин состояний с родительскими состояниями следуйте этим лучшим практикам:

Начните с плоской структуры, затем вкладывайте

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

Распространённые паттерны для родительских состояний

• Общие переходы: Когда несколько состояний имеют одинаковые исходящие переходы, рассмотрите их группировку под родительским состоянием
• Подпроцессы: Используйте родительские состояния для моделирования отдельных подпроцессов или фаз вашего приложения
• Общий вход/выход: Если несколько состояний имеют общие действия входа или выхода, они могут принадлежать одному родительскому состоянию
• Группы состояний: Группируйте связанные состояния, которые представляют разные аспекты одной функции или компонента

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

• Держите иерархию как можно более мелкой — глубокая вложенность может сделать машину состояний труднее для понимания
• Каждое родительское состояние должно иметь чёткую, единственную ответственность
• Используйте описательные имена, отражающие назначение родительского состояния
• Рассмотрите использование параллельных состояний для действительно независимых подпроцессов
• Документируйте назначение каждого родительского состояния комментариями

Когда избегать родительских состояний

• Когда состояния не разделяют никакого общего поведения или переходов
• Когда иерархия сделает машину состояний более сложной без добавления ценности
• Когда состояния представляют полностью независимые функции

Пример: Валидация формы

const formMachine = createMachine({
    initial: 'idle',
    states: {
        idle: {
            on: {
                start: { target: 'validating' },
            },
        },
        validating: {
            initial: 'checking',
            states: {
                checking: {
                    on: {
                        valid: { target: 'success' },
                        invalid: { target: 'error' },
                    },
                },
                success: {
                    type: 'final',
                },
                error: {
                    on: {
                        retry: { target: 'checking' },
                    },
                },
            },
            onDone: { target: 'submitted' },
        },
        submitted: {
            type: 'final',
        },
    },
});

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

Шпаргалка по родительским состояниям

Шпаргалка: создание родительских состояний

// Машина — это родительское состояние корневого уровня
const machine = createMachine({
    // Начальное дочернее состояние машины
    initial: 'parent',
    states: {
        parent: {
            // Начальное дочернее состояние родительского состояния
            initial: 'child1',
            states: {
                child1: {
                    on: {
                        // Нацеливание на соседа
                        toSibling: {
                            target: 'child2',
                        },
                    },
                },
                child2: {
                    initial: 'grandchild1',
                    states: {
                        grandchild1: {},
                        grandchild2: {},
                    },
                },
            },
            on: {
                // Нацеливание на потомка
                toChild: {
                    target: '.child1',
                },
                // Нацеливание на внука
                toGrandchild: {
                    target: '.child2.grandchild2',
                },
            },
        },
    },
});

Комментарии