Перейти к содержанию

Inspect API

Inspect API — это способ инспектировать переходы состояний ваших конечных автоматов и каждый аспект акторов в системе акторов. Включая:

  • Жизненный цикл актора
  • Коммуникацию событий актора
  • Обновления снимков актора
  • Микрошаги переходов состояний

Inspect API позволяет прикрепить «инспектор», наблюдателя, который наблюдает за событиями инспектирования, к корню системы акторов:

1
2
3
4
5
6
7
8
9
const actor = createActor(machine, {
    inspect: (inspectionEvent) => {
        // type: '@xstate.actor' или
        // type: '@xstate.snapshot' или
        // type: '@xstate.event' или
        // type: '@xstate.microstep'
        console.log(inspectionEvent);
    },
});

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

События инспектирования

События инспектирования — это объекты событий, которые имеют свойство type, указывающее тип события инспектирования. Существует четыре типа событий инспектирования:

События инспектирования актора

Событие инспектирования актора (@xstate.actor) генерируется при создании актора в системе. Оно содержит следующие свойства:

  • type — тип события инспектирования, всегда '@xstate.actor'
  • actorRef — ссылка на актора
  • rootId — ID сессии корневого актора системы

Пример события инспектирования актора:

1
2
3
4
5
{
  type: '@xstate.actor',
  actorRef: {/* Ссылка на актора */},
  rootId: 'x:0',
}

События инспектирования событий

Событие инспектирования события (@xstate.event) генерируется при отправке события актору. Оно содержит следующие свойства:

  • type — тип события инспектирования, всегда '@xstate.event'
  • actorRef — ссылка на целевого актора события
  • rootId — ID сессии корневого актора системы
  • event — объект события, который был отправлен
  • sourceRef — ссылка на актора-источник, который отправил событие, или undefined, если источник неизвестен или событие было отправлено напрямую актору

Пример события инспектирования события:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  type: '@xstate.event',
  actorRef: {/* Ссылка на актора */},
  rootId: 'x:0',
  event: {
    type: 'someEvent',
    message: 'hello'
  },
  sourceRef: {/* Ссылка на актора */},
}

События инспектирования снимков

Событие инспектирования снимка (@xstate.snapshot) генерируется при обновлении снимка актора. Оно содержит следующие свойства:

  • type — тип события инспектирования, всегда '@xstate.snapshot'
  • actorRef — ссылка на актора
  • rootId — ID сессии корневого актора системы
  • snapshot — последний снимок актора
  • event — событие, которое вызвало обновление снимка

Пример события инспектирования снимка:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  type: '@xstate.snapshot',
  actorRef: {/* Ссылка на актора */},
  rootId: 'x:0',
  snapshot: {
    status: 'active',
    context: { count: 31 },
    // ...
  },
  event: {
    type: 'increment'
  }
}

События инспектирования микрошагов

Событие инспектирования микрошага (@xstate.microstep) генерируется для каждого отдельного перехода состояния, включая промежуточные «микрошаги», которые происходят во время обработки события. Это особенно полезно для наблюдения за безусловными переходами (например, переходами always) и понимания пошагового продвижения через несколько состояний.

Оно содержит следующие свойства:

  • type: '@xstate.microstep'
  • value — текущее значение состояния после этого микрошага
  • event — событие, которое вызвало этот микрошаг
  • transitions — массив объектов переходов, которые произошли в этом микрошаге

Каждый объект перехода в массиве transitions содержит:

  • eventType — тип события, которое вызвало переход (пустая строка для безусловных переходов)
  • target — массив путей целевых состояний

Пример события инспектирования микрошага:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  type: '@xstate.microstep',
  value: 'c',
  event: {
    type: 'EV',
  },
  transitions: [
    {
      eventType: 'EV',
      target: ['(machine).b'],
    },
    {
      eventType: '',
      target: ['(machine).c'],
    },
  ],
}

Пример событий микрошагов

Вот пример событий микрошагов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
const machine = createMachine({
    initial: 'a',
    states: {
        a: {
            on: {
                EV: 'b',
            },
        },
        b: {
            always: 'c', // Это сработает автоматически после входа в состояние 'b'
        },
        c: {},
    },
});

const events = [];
const actorRef = createActor(machine, {
    inspect: (ev) => events.push(ev),
}).start();

actorRef.send({ type: 'EV' });

События микрошагов будут выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Первый микрошаг: переход EV в состояние 'b'
{
  type: '@xstate.microstep',
  value: 'b',
  event: {
    type: 'EV'
  },
  transitions: [
    {
      eventType: 'EV',
      target: ['(machine).b']
    }
  ]
},

// Второй микрошаг: always-переход в состояние 'c'
{
  type: '@xstate.microstep',
  value: 'c',
  event: {
    type: 'EV'
  },
  transitions: [
    {
      eventType: '',  // Пустая строка означает безусловный переход
      target: ['(machine).c']
    }
  ]
}

Комментарии