Угловой: управление государством с помощью акиты

Akita - это, по сути, решение для управления состоянием для Angular. В своих предыдущих сообщениях я обсуждал другие библиотеки управления состоянием для Angular, такие как NgRx и NGXS.

• Angular: начало работы с NgRx
• Angular: создайте приложение CRUD с NgRx
• Ангулат: Государственное управление с NGXS

В этой статье я намерен затронуть следующие темы.

• В двух словах о государственном управлении
• Что такое акита?
• Создание образца CRUD-приложения с помощью Akita

Государственное управление в двух словах?

Теоретически состояние приложения - это вся память приложения. Проще говоря, состояние приложения состоит из данных, полученных в результате вызовов API, пользовательского ввода, состояния пользовательского интерфейса представления, предпочтений приложения и т. Д. Простым конкретным примером состояния приложения может быть список клиентов, поддерживаемый в приложении CRM.

Давайте попробуем понять состояние приложения в контексте приложения Angular. Как вам хорошо известно, приложение Angular обычно состоит из множества компонентов. Каждый из этих компонентов имеет собственное состояние и не знает о состоянии других компонентов. Для обмена информацией между родительско-дочерними компонентами мы используем декораторы @Input и@Output. Однако этот подход применим только в том случае, если ваше приложение состоит из нескольких компонентов, как показано ниже.

Когда количество компонентов растет, становится кошмаром передавать информацию между компонентами только через @Input и @Output декораторы. Давайте рассмотрим следующий рисунок, чтобы пояснить это.

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

Согласно этой архитектуре данные передаются между хранилищем и компонентами, а не от компонента к компоненту.

Что такое акита?

Akita - это простое и эффективное решение для управления состоянием приложений Angular. Он построен на основе RxJS и вдохновлен такими моделями, как Flux и Redux. По сравнению с другими системами государственного управления, наиболее привлекательной особенностью Akita является ее простота. Это избавляет вас от необходимости писать шаблонный код для управления состоянием приложения.

Акита в основном состоит из двух основных модулей.

• Магазин
• Запрос

Магазин

Хранилище - это единый объект, который содержит состояние хранилища и служит «единственным источником истины». Вы можете определить магазин, как показано ниже. Он просто позволяет вам сохранять любой тип данных внутри состояния хранилища.

EntityStore: в реальных приложениях вы обычно работаете с такими сущностями, как продукты, курсы, пользователи и т. д. Чтобы упростить процесс работы с сущностями, Akita представила более конкретный магазин, а именно EntityStore. По большей части хранилища, которые вам потребуются в ваших приложениях, будут хранилищами сущностей. Вы можете думать о хранилище сущностей как о таблице в базе данных, где каждая таблица представляет собой плоскую коллекцию сущностей. Следующий код указывает, как вы будете использовать EntityStore для управления ToDo объектами.

Приложение может иметь несколько хранилищ сущностей для управления разными сущностями. Каждое из этих хранилищ сущностей представляет собой выделенный фрагмент в общем состоянии приложения. Обратите внимание, что декоратор @StoreConfig({ name: 'todos' }) используется для указания имени соответствующего среза состояния. Например, срез состояния todos содержит все данные, относящиеся к ToDoStore.

Хранилища сущностей предоставляют набор методов, которые вы можете использовать для обновления состояния. Эти методы обычно вызываются из сервисов Angular. Ниже приведены некоторые из наиболее часто используемых методов модификатора состояния.

• set (): заменяет текущую коллекцию предоставленной коллекцией и сбрасывает активную сущность.
• add (): добавить объект или объекты в магазин.
• update (): обновление объекта или объектов в магазине.
• remove (): удаление одного или нескольких объектов из магазина.
• upsert (): вставка или обновление объекта. Создает новую сущность, если ни одна сущность не соответствует id; в противном случае он выполняет обновление

Запрос

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

QueryEntity: Entity Query похож на общий Query, но с дополнительными функциями, адаптированными для EntityStore. Следующий код указывает, как QueryEntity можно использовать для запроса ToDo хранилища сущностей.

QueryEntity набор методов для получения данных из магазина. Ниже приведены некоторые из этих методов.

• selectAll (): выберите всю коллекцию объектов магазина.
• selectMany (): выберите несколько объектов из магазина.
• selectEntity (): выберите объект или фрагмент объекта.

Создание образца приложения CRUD

В оставшейся части этой статьи мы будем строить простую систему управления курсом с помощью Akita. Как показано ниже, вы сможете выполнять все операции CRUD над объектом курса с помощью этого простого веб-приложения.

Структура проекта

Как показано на следующем рисунке, наше приложение будет состоять из двух основных модулей, а именно App и Course. Модуль курса, в свою очередь, будет иметь два настраиваемых компонента, а именно Course List и Create Course.

REST API

Как правило, приложение Angular взаимодействует с REST API для выполнения операций CRUD с данными.

Поэтому я реализовал простой REST API в Spring Boot, который предоставляет следующие конечные точки. Мы будем использовать этот API для подключения из приложения Angular и выполнения операций с данными.

// Retrieve all courses
GET     http://localhost:8080/api/courses
// Create a course
POST    http://localhost:8080/api/courses
// Delete a course
DELETE  http://localhost:8080/api/courses/{courseId}
// Update a course
PUT     http://localhost:8080/api/courses/{courseId}

Полный исходный код

Вы можете найти полный исходный код этого примера приложения на GitHub. Обратите внимание, что я также добавил исполняемый файл JAR (course-1.0.0-SNAPSHOT.jar) приложения Spring Boot (REST API) в тот же репозиторий.

Настройка проекта

Используемые версии программного обеспечения

• Угловой интерфейс командной строки: 8.0.1
• Узел: 11.6.0
• Угловой: 8.0.2
• Акита: 4,23,0
• Загрузочный: 4.4.1

Инициализация проекта

Шаг 1: Выполните приведенную ниже команду и создайте новый проект.

ng new akita-crud-app

Шаг 2: Мы будем использовать Bootstrap для добавления стилей в наше приложение. Вы можете установить Bootstrap с помощью команды ниже.

npm install bootstrap --save

Шаг 3. Импортируйте Bootstrap, обновив файл angular.json, как показано ниже.

Шаг 4: Установите зависимости Akita.

npm install @datorama/akita --save

Создание и настройка функционального модуля «Курс»

Создание модуля «курс»

Как указывалось ранее, наше приложение состоит из двух основных модулей, App и Course. Пришло время создать модуль Course с помощью приведенной ниже команды.

ng generate module course

Команда создаст подпапку с именем course прямо под папкой app. Кроме того, новый файл с именем course.module.ts будет создан и помещен в папку app/course.

Ниже приводится начальная версия course.module.ts файла. Обратите внимание, что этот файл будет изменен ниже по течению, чтобы объявлять компоненты и объявлять поставщиков услуг.

Определение «курсовой» модели

На следующем шаге вы должны определить интерфейс модели, представляющий сущность Course. Создайте файл с именем course.model.ts и поместите его в папку app/course/model. Содержимое этого файла должно быть следующим.

Добавление артефактов из акиты в модуль «Курс»

На следующем этапе вы должны определить артефакты Akita, такие как хранилище сущностей и сущность запроса. Эти артефакты будут созданы в каталоге с именем store, который, в свою очередь, находится в каталоге app/course.

Определение магазина сущностей Akita (course.store.ts)

Особые примечания:

• Как видите, мы переопределили состояние сущности по умолчанию и определили дополнительный атрибут с именем areCoursesLoaded. Это логический флаг, который используется для проверки того, были ли объекты курса уже сохранены в состоянии.
• Мы определили нижеприведенную настраиваемую операцию, чтобы сохранить объекты курса в состоянии, а также отметить флаг areCoursesLoaded как true.

loadCourses(courses: Course[], areCoursesLoaded: boolean) {
    this.set(courses);
    this.update(state => ({
        ...state,
        areCoursesLoaded
    }));
}

Определение запроса сущности Akita (course.query.ts)

Определение класса обслуживания

Сервис используется для взаимодействия с REST API и выполнения операций с данными. Чтобы определить класс обслуживания, создайте файл с именем course.service.ts и поместите его в папку app/course/services. Этот класс обслуживания будет отвечать за две основные задачи.

• Вызов серверного API и выполнение операций с данными.
• Обновление состояния приложения с помощью функций, предоставляемых хранилищем сущностей Akita.

После определения класса обслуживания вы должны зарегистрировать его в файле course.module.ts, как показано ниже.

Создание компонентов и определение маршрутов

Как мы обсуждали ранее, наше приложение состоит из двух основных модулей, а именно App и Course. Модуль курса состоит из двух компонентов, а именно courses-list и create-course.

Наш следующий шаг - создать эти два компонента и определить соответствующие маршруты. Обратите внимание, что каталоги courses-list и create-course будут созданы в каталоге app/course/component.

Определение компонента «список курсов»

Шаблон: courses-list.component.html

Компонент: courses-list.component.ts

Особые примечания:

• Этот компонент отвечает за упрощение операций по списку, обновлению и удалению.

Определение компонента «создание курса»

Шаблон: create-course.component.html

Компонент: create-course.component.ts

Объявление компонентов в модуле курса

Вы должны объявить указанные выше компоненты в файле course.module.ts, который уже создан. Кроме того, эти компоненты будут использоваться в файле app.module.ts для определения маршрутов. Чтобы предоставить эти компоненты файлу app.module.ts, вы должны определить эти компоненты в массиве exports. Обратите внимание, что я также импортировал FormsModule и HttpClientModule, которые будут использоваться шаблонами и службой соответственно.

Настройка маршрутов

Пришло время определить маршруты и связать соответствующие компоненты с этими маршрутами. Это должно быть сделано в app.module.ts, как показано ниже.

Определение розетки роутера

В качестве последнего шага вы должны определить выход маршрутизатора в app.component.html.

Настройка прокси для доступа к REST API

Как упоминалось в начале этой статьи, мы используем простой REST API, написанный на Spring Boot, для подключения из приложения Angular.

Приложение Spring Boot работает на localhost:8080, а приложение Angular - на localhost:4200. Это несоответствие вызовет ошибку совместного использования ресурсов между источниками (CORS), когда приложение Angular пытается получить доступ к REST API. Чтобы решить эту проблему, нам нужно создать прокси.

Создание прокси-файла

Создайте файл с именем proxy.conf.json в корневой папке проекта (на том же уровне, где существует файл package.json) и добавьте в него содержимое, указанное ниже.

Регистрация прокси-файла

В файле конфигурации интерфейса командной строки angular.json добавьте параметр proxyConfig к цели serve:

Запуск приложения

Приложение должно быть запущено как двухэтапный процесс. Сначала вам нужно запустить приложение Spring Boot (REST API), а затем приложение Angular.

Запуск приложения Spring Boot (REST API)

Приложение Spring Boot упаковано в исполняемый файл JAR с именем course-1.0.0-SNAPSHOT.jar и размещено здесь (GitHub).

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

java -jar {path_to_the_jar_file}/course-1.0.0-SNAPSHOT.jar

Запуск приложения Angular

Приложение Angular можно запустить, выполнив следующую команду.

ng serve

После успешного запуска приложения перейдите к http://localhost:4200/courses в браузере, и вы увидите экран, показанный ниже.

Заключение

Основная цель этой истории - предоставить пошаговое руководство по созданию приложения Angular на основе Akita. Если вы читали мои предыдущие сообщения о NgRx и NGXS, вы бы поняли, что Akita избавляет вас от необходимости писать шаблонный код.