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

XState

XState — это решение для управления состоянием и оркестрации для JavaScript и TypeScript приложений.

Он использует событийно-ориентированное программирование, конечные автоматы, диаграммы состояний и модель акторов для обработки сложной логики предсказуемым, надёжным и визуальным способом. XState предоставляет мощный и гибкий способ управления состоянием приложений и рабочих процессов, позволяя разработчикам моделировать логику как акторы и конечные автоматы. Он хорошо интегрируется с React, Vue, Svelte и другими фреймворками и может использоваться на фронтенде, бэкенде или везде, где работает JavaScript.

Совет

Хотите узнать больше о конечных автоматах? Читайте наше введение.

Установка

XState доступен на npm:

1
npm install xstate

1
pnpm install xstate

1
yarn add xstate

Создание простого автомата

 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
30
31
32
33
34
35
36
37
import { createMachine, assign, createActor } from 'xstate';

const countMachine = createMachine({
    context: {
        count: 0,
    },
    on: {
        INC: {
            actions: assign({
                count: ({ context }) => context.count + 1,
            }),
        },
        DEC: {
            actions: assign({
                count: ({ context }) => context.count - 1,
            }),
        },
        SET: {
            actions: assign({
                count: ({ event }) => event.value,
            }),
        },
    },
});

const countActor = createActor(countMachine).start();

countActor.subscribe((state) => {
    console.log(state.context.count);
});

countActor.send({ type: 'INC' });
// выводит 1
countActor.send({ type: 'DEC' });
// выводит 0
countActor.send({ type: 'SET', value: 10 });
// выводит 10

Больше примеров в шпаргалке.

Создание более сложного автомата

 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { createMachine, assign, createActor } from 'xstate';

const textMachine = createMachine({
    context: {
        committedValue: '',
        value: '',
    },
    initial: 'reading',
    states: {
        reading: {
            on: {
                'text.edit': { target: 'editing' },
            },
        },
        editing: {
            on: {
                'text.change': {
                    actions: assign({
                        value: ({ event }) => event.value,
                    }),
                },
                'text.commit': {
                    actions: assign({
                        committedValue: ({ context }) =>
                            context.value,
                    }),
                    target: 'reading',
                },
                'text.cancel': {
                    actions: assign({
                        value: ({ context }) =>
                            context.committedValue,
                    }),
                    target: 'reading',
                },
            },
        },
    },
});

const textActor = createActor(textMachine).start();

textActor.subscribe((state) => {
    console.log(state.context.value);
});

textActor.send({ type: 'text.edit' });
// выводит ''
textActor.send({ type: 'text.change', value: 'Hello' });
// выводит 'Hello'
textActor.send({ type: 'text.commit' });
// выводит 'Hello'
textActor.send({ type: 'text.edit' });
// выводит 'Hello'
textActor.send({
    type: 'text.change',
    value: 'Hello world',
});
// выводит 'Hello world'
textActor.send({ type: 'text.cancel' });
// выводит 'Hello'

Скачать расширение XState для VS Code

Внимание

Расширение XState для VS Code пока не полностью поддерживает XState v5.

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

Пакеты

  • 🤖 xstate: Основная библиотека конечных автоматов и диаграмм состояний + акторы
  • 📉 @xstate/graph: Утилиты для обхода графов в XState
  • ⚛️ @xstate/react: React-хуки и утилиты для использования XState в React-приложениях
  • 💚 @xstate/vue: Vue composition-функции и утилиты для использования XState в Vue-приложениях
  • 🎷 @xstate/svelte: Утилиты Svelte для использования XState в Svelte-приложениях
  • ✅ @xstate/test: Утилиты для тестирования на основе моделей (с использованием XState) для тестирования любого программного обеспечения

Комментарии