Шон Маккей
Статехартс и штатные машины предлагают многообещающий путь для проектирования и управления сложным состоянием в приложениях. Подробнее о том, почему Statecharts Rock, посмотреть Первая статья этой серии.
Но если StateCharts – это отличное решение для управления пользовательским интерфейсом и состоянием в JavaScript (JS), почему не будет больше импульса за ними?
Одной из главных причин, по которым «Статехартты» не выросли по популярности в рамках в первом мире, является то, что лучшие практики еще не установлены. Необоснованно ясно, как использовать штатные машины с популярными библиотеками пользовательских интерфейсов на основе компонентов, таких как React, Vue, или угловые.
Хотя может быть слишком рано, чтобы объявить лучшие практики для StatechArts в JS, мы можем исследовать некоторые модели, используемые существующими библиотеками интеграции состояния машин.
Статухарт машина
Statecharts работают как для визуального дизайна, так и в качестве базового кода для шин на основе графов.
Имейте в виду, что мы в первые дни использования statecharts с js, и стоит экспериментировать с различными библиотеками или даже развивать свой собственный. Что говорится, Xstate В настоящее время ведет пакет для станков Statechart в JS.
Вышеуказанный штатный машинный код может генерировать гораздо более читаемую диаграмму StateChart при прохождении json к XState Visualizer Отказ
Вы можете даже работать другим путем, начиная с визуального проектирования, а затем экспортировать в конфигурацию XState, используя Sketch.systems Отказ У нас еще нет всех предметов в одном месте, но нет серьезных технических барьеров для решения с открытым исходным кодом.
Теперь, когда у нас есть идея о том, что делает XState, давайте посмотрим на то, что это не делает.
Так что это означает для государственного машины, чтобы быть без гражданства ?
Стационарные машины
Стационарные машины предлагают неопитуемые План Для государственного управления – своего рода «свернуть свое собственное» решение, которое не дикторит, где хранятся состояние в вашем приложении.
Подобно презентационному компоненту, машина нестандартная машина изготовлена из чистых функций, неизменна и не поддерживает состояние. Это не отслеживает прошлого, тока или будущего – но его можно использовать, чтобы помочь вам рассчитать каждый.
Управление вашим состоянием может быть так же легким, как хранить его в локальной переменной состоянии.
Стационарные машины не дают вам сильно из коробки. Чтобы вызвать переход, мы всегда должны проходить в текущем состоянии состояния в поисках следующего. XState может сообщить вам, какие действия должны быть уволены на каждое изменение состояния, но вам придется найти способ управлять действиями самостоятельно.
Если вы заинтересованы в более полном решении, рассмотрите возможность сделать вашу государственную машину государство.
Условные машины
Условная машина отслеживает положение вашего узла на графике состояния и управляет огнем действий. Нет необходимости проходить в текущем состоянии на переходах – он отслеживает ваш текущий государственный узел.
Как резюме, экземпляр штабальной машины выше:
- Определяет зеленую государственную позицию в «звонкости»
- ограничивает возможные пурпурные события перехода на
ОтменаилиВЗДРЕМНУТЬ - пожаровал
StartringДействие на въезд - пожаровал
остановкадействие по выходу из государства
Конечно, есть более одного способа создания состоятельной машины. Мы вернемся к вопросу о том, где управлять государством:
- В пределах состояния существующего компонента?
- В подключенном состоянии состояния?
Давайте рассмотрим некоторые шаблоны дизайна с примерами, начиная с Государственные компоненты .
Государственные компоненты
Государственный компонент, как вы можете себе представить, управляет состоянием в компоненте или в упаковке компонента более высокого порядка. В реакции это было бы как Государство Отказ Сохранение состояния в библиотеке пользовательской интерфейсы гарантирует, что изменения не будут пропущены, и будет триггер повторной рендеры.
Это подход библиотеки под названием React-Automata что использует компонент более высокого порядка сstateChart. .
React-Automata предлагает несколько шаблонов для использования statecharts с компонентами:
- состояние из реквизита
- Условный рендеринг из контекста
- Состояние от действий
Мы пойдем за каждую модель и рассмотрим плюсы и минусы.
Состояние из реквизита
Проходящее состояние непосредственно в компоненты кажутся наиболее очевидным решением.
В React-Automata State можно пропустить, доступая к нему на Ухаживание Опора – ссылка на фактический государственный автомат.
Но будьте осторожны, Это ни в коем случае не лучшая практика Отказ В приведенном выше примере интеграция имеет Соединенный Статухарт к компоненту, что приводит к плохому разделению проблем.
Считайте, что StateChart и компоненты могут позволить чистоту разделить, поскольку они решают различные проблемы:
- statecharts: Когда Вещи случаются, например, введите состояние, Действия обстреляли
- Компоненты: Как и что бывает, например, вид, взаимодействия пользователя
В качестве альтернативы, вы можете отделить компонент из состояния машины, условно рендурирующим по умолчанию без рендеринга.
Конечно, должен быть более естественный способ настроить условный рендеринг без необходимости превращать все ваши рендеры в Если/else и Переключатель заявления.
Условный рендеринг из контекста
Состояние, доступ к контексту, не нужно передавать напрямую.
React-Automata предоставляет шаблон условного рендеринга дочерних компонентов с использованием контекста Rection и A T the Свойство Value может совпадать со строкой, массивом строк или даже на основе шаблона шаблона.
Если государственная стоимость соответствует Звонит , дети внутри Государство Компонент будет представлять. В противном случае ничего.
Состояние из контекста может помочь уточнить количество возможных комбинаций конечных состояний. Как и в случае выше, ясно, что есть только две возможные конфигурации.
Если просмотр конфигураций начнут выходить из-под контроля, ract-automata предлагает рендеринг Prop Pattern, который проходит в логике на основе значения.
Аналогичным образом, можно условное представление на основе контекстных действий.
Условно рендеринг на основе состояния или действий поддерживает муфту между statechart и компонентами, но менее явно в контексте. Как вы можете дать компонентам их изолированное состояние отдельно от Statecharts?
Состояние от действий
Можно использовать statecharts для обновления внутреннего состояния связанного компонента, используя действия как триггеры.
React-Automata проверяет методы на компонент и вызывают функции, если имена совпадают с увольными действиями.
В качестве примера, наносящее действие Startring уволен, поскольку государственная машина входит Звонит , вызывая AlareClock Состояние перейти на звонит Отказ При выходе из Звонит Государство, остановка уволен, а звонит установлен на ложь Отказ
Обратите внимание, что, хотя из этих методов называются с параматами, методы уже имеют доступ к тому, что им нужно от Ухаживание через реквизиты.
Использование состояния внутреннего компонента, управляемое через действия, приводит к сильной развязке компонентов из государственных графиков. Однако он также может создать степень беспорядка или путаницы в компонентах. Это не ясно понятно, как или когда методы будут вызываться, не изучав названия действий в StateChart. По этой причине я часто называю своими действиями и методами Enterx или exitx Для того, чтобы сделать это явно понятно, почему и где они уволяются.
Внешние состоятельные машины
Еще один вариант, который стоит рассмотреть вопрос о состоянии хранения государства за пределами вашей системы UI. Как и в случае с другими библиотеками государственного управления, такими как redux, компоненты могут быть подключены к внешнему состоянию и обновляются с помощью событий состояния “и” на действии “.
В качестве примера Xstateful Это обертка вокруг xstate, которая обрабатывает состояние, переходы, излучающие события, запускающие действия и многое другое.
Xstateful работает хорошо с разъемом React Connector XStateful-Rect Отказ
XStateful-React имеет много общего с реагированными автоматами. Но есть хотя бы одна значительная разница – в каком компонентах не управляется состоятельный аппарат.
Итак, как внешнее состояние от редукторов работает в XStateful?
Состояние и данные
Приложения часто требуют больше, чем просто узел состояния в графике состояния – они также требуют данные. Часто эти данные должны быть синхронизированы между компонентами, таким образом, что может быть расстроено, если оно должно быть передано из самого верхнего общего родителя.
Существуют существующие популярные решения для синхронизации данных, таких как Redux, или Мой государственный борт для Redux Отказ К сожалению, они хорошо не играют хорошо со многими государственными оболочками, такими как React-Automate из-за открытой проблемы с прохождением Refs в React Redux (см. Это «|» открыть вопрос с Connect () и Rect.Forwardref ).
Полное решение должно управлять как состояние, так и данные.
XStateful предлагает простое состояние и решение для данных, используя Картина редуктора состояния , похоже на redux.
Современные автомашины Слушайте и обновляют изменения на основе действий, излучаемых из штата. Обратите внимание, что XState относится к данным как Расширенное состояние или ExtState Отказ
Этот конкретный шаблон редуктора может показаться незнакомым, однако он сильно используется в таких проектах, как Разумность Отказ
Данные также могут быть доступны в условных рендерах на свойстве конденс Отказ
Будьте осторожны с использованием состояния в условно визуализацию компонентов, поскольку он создает нетерминированный набор возможных состояний. Вы больше не ограничены количеством государств, но теперь на количество комбинаций состояния и данных. Вы теряете детерминированные функции, обсуждаемые позже в разделе тестирования.
Эти данные могут быть переданы в ваш компонент, используя рисунок REP ROP.
Необходимо меньше необходимости в государственных инструментах управления, таких как redux, если данные могут быть сохранены в комплексном состоянии State Machine, как zstateful.
Тестирование
Штатные машины также предлагают лучший путь для интерфейсных испытаний.
Детерминированная природа государственных машин создает возможность упрощенного интерфейсного тестирования.
В React-Automata вы можете автогенеративные моментальные тесты с использованием teststatechart , метод, который принимает конфигурацию XState и компонент.
teststatechart проходит через график состояния и создает Test Test Snapshot Для каждой возможной конфигурации компонента. Он переключается и выключает ваш разные <Государство / >, < Действие/> компоненты, приводящие к записи всех возможных комбинаций условного рендеринга.
Devtools.
Devtools играет активную роль в том, что делает библиотечный разработчик – для отладки может быть самой тяжелой или наиболее простой частью вашей работы.
В этом отношении React-Automata предлагает полезную интеграцию через redux devtools. Каждый подключенный компонент становится названным экземпляром в devtools, и каждый переход и действие отображаются хронологически, когда действия представлены в redux devtools.
XState предлагает совершенно новый набор переменных для отслеживания. Рассмотрим следующее Пример Эрика Могенсена На видах информации отладчик XState может отслеживать.
Это не значит, что государственные машины devtools должны выглядеть как наши существующие devtools. Государственная машина Devtools представляет возможность для более визуального отладки.
Заключение
Хотя мы все еще в первые дни Statecharts в JS, доступны достаточно вариантов для начала разработки приложений на вершине xstate. Мы можем узнать из этих шаблонов разработки, чтобы улучшить доступные библиотеки, так и для создания инструментов для поддержки огромного потенциала программирования на визуальном уровне.
За последние три месяца разработав приложения с StateCharts, я лично нашел эти новые шаблоны, чтобы быть дыхом свежего воздуха. Сотрудничество стало намного удобнее, поскольку члены команды могут визуально понять базовую логику значительной и растущей системы.
Моя надежда заключается в том, что эта статья поможет другим найти разработку, основанную на статухарте более доступным. Если вы нашли это полезным, дайте хлопок и пропустите его:)
Оригинал: “https://www.freecodecamp.org/news/patterns-for-using-react-with-statechart-based-state-machines-33e6ab754605/”