AngularInDepth уходит от Medium. Более свежие статьи размещаются на новой платформе inDepth.dev. Спасибо за то, что участвуете в глубоком движении!
В этой статье мы объясним концепцию управления состоянием и то, как Akita помогает нам упростить поток данных в приложении, управляя им.
Конечный автомат - это любое устройство, которое хранит состояние чего-либо в данный момент времени и может работать с вводом, чтобы изменить состояние и / или вызвать действие или вывод для любого данного изменения. - Государственный автомат
Проще говоря, он хранит состояние любой формы данных и управляет переходом состояния на основе текущего состояния и действия.
Почему так важно государственное управление?
Веб-приложения становятся богаче и сложнее. Управлять государством в геометрической прогрессии сложнее, чем раньше.
У разных частей приложения разные обязанности, и они (компоненты, директивы и т. Д.) Разделены по множеству разных файлов, но все они должны отражать одно и то же базовое состояние.
Библиотека управления состоянием дает вам удобный способ:
- Смоделируйте состояние вашего приложения
- Получите из него вычисленные значения
- Следите за изменениями
Это дает нам много преимуществ, таких как обработка нормализованных данных (можно избежать избыточных моделей), неизменяемость и организованный переход между состояниями, возможность путешествовать во времени и т. Д.
Знакомство с акитами
Akita - это шаблон управления состоянием, построенный на основе RxJS и основанный на принципах объектно-ориентированного проектирования.
Акита поощряет простоту. Он избавляет вас от хлопот по созданию шаблонного кода и предлагает мощные инструменты с умеренной кривой обучения, подходящие как для опытных, так и для неопытных разработчиков.
Прежде чем мы углубимся, давайте рассмотрим строительные блоки Акиты:
Модель
Общее представление о модели данных, которой будет управлять магазин.
Магазин
Магазин похож на склад, где будет храниться модель данных. Вы можете выполнить весь DML (язык манипулирования данными) с помощью встроенных методов магазина Akita, таких как add(), update(), delete(), setActive(), setError() и т. Д.
Запрос
Просто запросы к базе данных, которые помогают делать запросы в магазине. Результаты запроса доступны в двух формах - реактивные запросы и запросы синхронизации.
Вы можете запустить весь DDL (язык определения данных) с помощью встроенных методов запроса Akita, таких как select(), selectAll(), selectEntity(), selectCount(), selectActive() и т. Д.
Два типа магазинов
Базовое хранилище - когда наша модель не представляет собой набор сущностей, например, сеанс, состояния пользовательского интерфейса и т. Д.
Магазин сущностей - когда нам нужно поддерживать коллекцию сущностей, например, модель предметной области, например, сотрудник, студент и т. Д.
Время писать код
Мы создадим приложение для студенческой панели с помощью Akita и узнаем, как создавать и использовать как простое хранилище, так и хранилище сущностей.
Структура папки
Вот как Акита рекомендует структурировать проект, чтобы сохранить модульность и порядок.
Дополнительная служба данных рекомендуется только для корпоративных приложений.
Обратите внимание, что Akita предлагает инструмент или схемы CLI, позволяющие быстро создавать магазины на основе спецификаций.
Давайте продолжим и создадим состояние сеанса:
Магазин сеансов
Чтобы поддерживать активного пользователя, нам нужно создать session таблицу, т.е. store.
Обычно модель данных и функции создания фабрики являются частью объявления файла модели (например, session.model.ts), поскольку мы используем базовое хранилище, вместо этого нам не нужен отдельный файл модели, мы сохраняем нашу модель вместе с файлом хранилища.
Как упоминалось ранее, вы можете увидеть некоторые операции DML, которые выполняются как часть хранилища.
Создадим запрос сеанса:
select() методы выбирают срез из магазина. Мы можем увидеть, как мы можем инкапсулировать более сложные запросы внутри класса Query, оставив наш компонент в неведении об источнике данных.
Класс Query обрабатывает операции DDL. В приведенном выше коде мы видим пример реактивного запроса, такого как isLoggedIn$, и запроса синхронизации, такого как isLoggedIn().
Давайте визуализируем текущее состояние с помощью инструментов разработки Акиты:
Студенческий магазин
Поскольку Student - это модель предметной области, мы знаем, что нам необходимо поддерживать коллекцию сущностей, поэтому в качестве хранилища можно выбрать EntityStore.
Начнем с определения Student интерфейса и фабричной функции, которая знает, как создать ученика. Мы используем guid() метод Акиты для создания глобального уникального идентификатора.
Чтобы создать EntityStore, нам нужно определить интерфейс магазина. В нашем случае мы можем обойтись расширением EntityState от Akita, предоставив ему тип Student Entity.
Создадим студенческий запрос:
Создадим студенческий сервис:
Асинхронная логика и вызовы обновления должны быть инкапсулированы в сервисах.
Компоненты могут использовать StudentService и StudentQuery для обработки всех действий DML и DDL, необходимых для модели.
Вот окончательное состояние приложения:
Заключение
Короче говоря, Akita поможет управлять всеми вашими данными одновременно и даст вам сильную абстракцию при обработке каждой операции, будь то операции DML или DDL, которые мы думали выполнять с данными.
Используйте Акиту, это облегчит вам жизнь.
Если вам понравилась статья, похлопайте в ладоши, чтобы мотивировать ✋✋✋
Спасибо за прочтение! С Днем Акита !!!
