Большинство функций, которые мы создаем в наших приложениях, можно описать в конечных автоматах. Когда мы думаем о веб-приложениях, мы думаем о состоянии, в котором находится наше приложение. Затем у нас есть способы изменить состояние приложения.

Страница входа в систему - отличный пример. Когда вы вводите действительные учетные данные, вы переходили из состояния «не вошли в систему» ​​ в состояние «вошли в систему». Давайте посмотрим, как знание этого может помочь нам создавать более предсказуемые и менее подверженные ошибкам приложения.

Что такое конечные автоматы?

Определение этого вы можете прочитать на странице Википедии. Там вы можете найти больше информации о том, как они определены и что они собой представляют. Но короче. Ваше приложение имеет текущее состояние. Вы можете перейти в другие состояния, доступные в текущем состоянии. При переходе вы сохраняете метаданные, почему этот переход происходит, например. запрос отклонен или решен.

Давайте посмотрим на это в действии:

Что такое XState?

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

Почему XState?

Это может помочь вам описать поведение вашего приложения. Вы можете ограничить доступ к событиям в определенном состоянии. Он прост в использовании и понятен.

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

import { createMachine } from 'xstate';
createMachine({
  id: 'popover-toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
})

Нам нужно определить как минимум 3 поля:

  • id - идентификатор конечного автомата среди прочих, должен быть уникальным
  • initial - начальное состояние, которое будет вашим конечным автоматом, должно быть одним из определенных состояний
  • states - доступные состояния, в которых ваша машина может быть вашей машиной

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

Резюме

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