Redux в Angular. Создание базовых классов.

В данной статье будет приведено создание базовых сущностей, в частности описана сущность новости и класс фасада, который будет скрывать в себе всю логику работы конкретной реализации redux.

Главная страница будет включать три основных виджета:

• Виджет с промо новостями, который будет представлять собой карусель новостей, в которой будут отображаться новости имеющие свойство promo со значением истина.
• Виджет популярных новостей, который будет выводить список новостей, упорядоченных по количеству просмотров.
• Виджет последних новостей, который будет отображать список новостей, отсортированных по убыванию даты создания новости.

При клике на превью новости будет открываться страница с полным описанием новости.

Новость будет включать в себя следующие поля: заголовок, описание, изображение новости, количество просмотров, количество лайков, дату создания и дату изменения новости. Также у новости будет признак, который будет обозначать промо новость.

Интерфейс для сущности поста/новости/публикации будет выглядеть следующим образом:

Поля сущности имеют следующее назначение:

• uuid — уникальный идентификатор новости;
• title — заголовок новости;
• body — содержимое новости;
• created — дата создания новости;
• updated — дата обновления новости;
• views — количество просмотров новости;
• promo — флаг, является ли публикация промо новостью;
• likes — количество лайков новости;
• image — изображение новости.

Также для создания и изменения новости требуются свои интерфейсы, чтобы была более строгая типизация.

Интерфейс PostCreate содержит только необходимые поля, которые нельзя создать автоматически. Соответственно новая новость содержит поля: uuid, title, body, promo и image. А поля created, updated, likes и views будут создаваться автоматически, где для каунтеров будет присвоено значение 0, а для даты использована текущая дата.

Также вводиться отдельный тип для измененной сущности:

export type PostChange = Partial<Post> & { uuid: string };

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

Абстрактный сервис PostFacade позволит скрыть внутреннюю реализацию различных state management и предоставит возможность использовать одни и те же компоненты в приложениях с разными реализациями redux.

Так как приложение подразумевает выполнение CRUD операций, то тогда необходим следующий функционал:

• загрузка списка новостей, а также события успеха/провала загрузки;
• добавление новой новости, а также события успеха/провала создания новости;
• изменение новой новости, а также события успеха/провала изменение новости;
• удаление новости, а также события успеха/провала изменение новости;
• доступ к списку новостей, а также получение конкретной новости по uuid.

Согласно требованиям, класс PostFacade примет вид:

Свойства фасада имеют следующее назначение:

• loaded$ — свойство, которое возвращает признак загружен список новостей или нет;
• posts$ — свойство, которое возвращает полный список новостей;
• postsPromo$ — свойство, которое возвращает список промо новостей;
• postsPopular$ — свойство, которое возвращает список популярных новостей;
• postsLast$ — свойство, которое возвращает список последних новостей;
• post$ — метод получения новости по uuid.

События связанные с новостями, на которые можно подписаться:

• loadSuccess$— событие успешной загрузки новостей;
• loadFailure$ — событие не успешной загрузки новостей;
• createSuccess$ — событие успешного создания новости;
• createFailure$ — событие не успешного создания новости;
• changeSuccess$ — событие успешного изменения новости;
• changeFailure$ — событие не успешного изменения новости;
• removeSuccess$ — событие успешного удаления новости;
• removeFailure$ — событие не успешного удаления новости;
• clearSuccess$ — событие успешного удаления всех новостей;
• clearFailure$ — событие не успешного удаления всех новостей;

Методы фасада:

• load() — метод, который инициирует загрузку новостей;
• loadOne() — метод, который позволяет загрузить новость по uuid;
• create() — метод, который позволяет создать новую новость;
• change() — метод, который позволяет изменить новость;
• remove() — метод, который позволяет удалить новость;
• clear() — метод, который позволяет удалить все новости.

Это все общие интерфейсы, которые будут использованы в приложении.

Ссылки

Оглавление

Предыдущая статья — Генерация приложения с микрофронтендами.

Следующая статья — Создание фейкового API для новостей.

Все исходники находятся на github, в репозитории:

GitHub — Fafnur/angular-samples: Samples of using different solutions in Angular

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — redux.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln