Создайте простой конечный автомат в React

Моя цель на этот день - познакомить вас с библиотекой XState. XState поможет нам построить конечные автоматы. Сначала мы создадим конечный автомат, а затем интегрируем его в приложение для реагирования.

Уже взволнованы? Давайте начнем.

Мы начнем с очень простого конечного автомата под названием toggleStateMachine machine, который будет переключаться между двумя состояниями active и inactive.
Вот отличный визуализатор для конечного автомата и того, как он переходит из одного состояния в другое. Ссылка на XState Visualizer.

Перейдя на страницу визуализатора, очистите вкладку definitions, потому что мы собираемся создать ее с нуля.

  • Определите переменную. Эта переменная будет экземпляром Machine().
const toggleStateMachine = new Machine({})
  • Теперь давайте присвоим этой переменной id. Мы даже можем использовать для этого имя переменной.

Теперь нам нужно дать конечному автомату начальное значение, поскольку из названия следует, что это начальное состояние машины, когда мы его раскручиваем. Поскольку мы создаем машину с переключением, будет два состояния active и inactive. Естественно, начальное состояние будет inactive.

const toggleStateMachine = new Machine({
id:'toggleStateMachine',
initial:'inactive'
})

Затем мы определим все состояния, которые есть у этой машины. states - это объект. Мы можем добавить к нему свойства, которые все разные states, которые может иметь эта машина.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {},
    active: {}
  }
});
  • Нажмите кнопку update. Вуаля!

Как вы теперь видите, при запуске машина будет в состоянии inactive. Поэтому, когда происходит событие, состояние inactive должно измениться на состояние active. Вот как вы это делаете.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {}
  }
});

Свойство on сообщает начальному состоянию, какие события следует отслеживать. Здесь свойство on сообщает состоянию inactive, что оно должно прослушивать событие TOGGLE.

Точно так же свойство active должно прослушивать событие TOGGLE. Поэтому, когда переключатель срабатывает в состоянии active, он должен переключиться обратно в состояние inactive.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

Вот и все, ребята !. Наш конечный автомат готов к интеграции в приложение React.

  • Простая реализация с использованием React Hooks.
import { useMachine } from '@xstate/react';

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

function Toggle() {
  const [current, send] = useMachine(toggleStateMachine);
  return (
    <button onClick={() => send('TOGGLE')}>
      {current.matches('inactive') ? 'Off' : 'On'}
    </button>
  );

}

Читать далее

Ну вот и все, ребята !. Спасибо за чтение. Я рекомендую вам прочитать дополнительную информацию в официальной документации XState.