Состояния истории

Состояние истории — это особый тип состояния (псевдосостояние), который запоминает последнее дочернее состояние, которое было активно до выхода из родительского состояния. Когда переход извне родительского состояния нацелен на состояние истории, входит запомненное дочернее состояние.

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

Если ни одно дочернее состояние не запомнено, история переходит в состояние .target, если оно указано
В противном случае переход в начальное состояние

Состояние истории возвращает родительское состояние к его последнему активному дочернему состоянию. Блок с H внутри представляет состояние истории.

Состояние истории может быть глубоким или поверхностным:

Поверхностное состояние истории запоминает непосредственное дочернее состояние.
Глубокое состояние истории запоминает самое глубокое активное состояние или состояния внутри своих дочерних состояний.

const checkoutMachine = createMachine({
    // ...
    states: {
        payment: {
            initial: 'card',
            states: {
                card: {},
                paypal: {},
                hist: { type: 'history' },
            },
        },
        address: {
            on: {
                back: {
                    target: 'payment.hist',
                },
            },
        },
    },
});

Поверхностная vs глубокая история¶

Поверхностные состояния истории запоминают только последнее активное непосредственное дочернее состояние.
Глубокие состояния истории запоминают все активные состояния-потомки.

Цель истории¶

Обычно состояния истории нацелены на последнее дочернее состояние родительского состояния
Если состояние истории входит, но родительское состояние никогда не посещалось, входит начальное состояние родителя.
Однако вы можете добавить target: 'childKey', чтобы указать дочернее состояние по умолчанию, в которое следует войти

Шпаргалка по состояниям истории¶

Шпаргалка: создание состояния истории (поверхностное по умолчанию)¶

const machine = createMachine({
    // ...
    states: {
        hist: { type: 'history' },
        firstState: {},
        someState: {},
        anotherState: {},
    },
});

Шпаргалка: создание глубокого состояния истории¶

const machine = createMachine({
    // ...
    states: {
        hist: {
            type: 'history',
            history: 'deep',
        },
        firstState: {},
        someState: {},
        anotherState: {},
    },
});

Шпаргалка: создание состояния истории с целью¶

const machine = createMachine({
    // ...
    initialState: 'firstState',
    states: {
        hist: {
            type: 'history',
            target: 'someState',
        },
        firstState: {},
        someState: {},
        anotherState: {},
    },
});