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, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — redux.
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln