Большинство функций, которые мы создаем в наших приложениях, можно описать в конечных автоматах. Когда мы думаем о веб-приложениях, мы думаем о состоянии, в котором находится наше приложение. Затем у нас есть способы изменить состояние приложения.
Страница входа в систему - отличный пример. Когда вы вводите действительные учетные данные, вы переходили из состояния «не вошли в систему» в состояние «вошли в систему». Давайте посмотрим, как знание этого может помочь нам создавать более предсказуемые и менее подверженные ошибкам приложения.
Что такое конечные автоматы?
Определение этого вы можете прочитать на странице Википедии. Там вы можете найти больше информации о том, как они определены и что они собой представляют. Но короче. Ваше приложение имеет текущее состояние. Вы можете перейти в другие состояния, доступные в текущем состоянии. При переходе вы сохраняете метаданные, почему этот переход происходит, например. запрос отклонен или решен.
Давайте посмотрим на это в действии:
Что такое 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 о том, как использовать конечные автоматы.