Управление состоянием - это шаблон потока данных в веб-приложении, с помощью которого мы можем прогнозировать данные по действиям. В Angular этот паттерн не так популярен, мы используем сервис для хранения или получения данных. Но в среде React и Vue шаблон управления состоянием очень полезен и популярен, поэтому даже Facebook определил архитектуру управления состоянием под названием Flux.

Redux был вдохновлен Flux. Он настолько популярен в сообществе React, потому что мы можем очень легко и предсказуемо управлять данными в нашем приложении. У React есть Redux, у Vue есть VueX. Но что для Angular? Некоторые разработчики используют Angular с redux. Но сегодня мы представляем ngrx, который представляет собой управление состоянием для Angular. И да, это заметно.

Шаблон управления состоянием в @ngrx

Во-первых, вам нужно определить действия в вашем приложении, которые будут выполняться действиями пользователя, HTTP-запросом или чем-то еще. В этой статье будет создано приложение со списком дел с 3 простыми действиями: «Добавить», «Удалить» и «Готово».

Когда действия запускаются из компонентов. @ngrx вызывает действие «Отправка». Он будет отправлять действия и параметры в «Редукторы» для изменения данных в магазине. Логика обработки данных в редукторах. Например, отправить новую задачу в массив или обновить счетчик. Затем данные будут возвращены в «Store» и сохранены здесь, чтобы компонент мог получить данные и отобразить их в представлениях позже.

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

Давайте создадим @ ngrx / store

«@Ngrx» называют себя платформой. Он состоит из 4 частей. Но эта статья будет посвящена вызову части управления состоянием «@ ngrx / store».

Для начала нам понадобится приложение Angular. Вы можете создать простое приложение с Angular CLI, а затем установить @ ngrx / store через npm или yarn.

npm install @ngrx/store --save

Теперь приступим к кодированию. Мы создадим приложение со списком дел, используя @ngrx. Затем мы создадим «Действия», чтобы сообщить нам, что вызовет изменение данных в нашем приложении. В этом приложении. У меня есть 3 действия под названием «Добавить», «Удалить», «Готово», определенные как переменные.

В том же файле мы создаем класс «Action», который расширяется от Action из @ ngrx / store, а затем определяем параметры этого действия. Например, в действии create todo мы передадим текст задачи через параметр «text».

Теперь мы создаем редуктор для изменения данных при вызове действия. Мы определяем его в папках «reducer» и создаем файл «todo.ts».

Первая часть редуктора. Нам нужно определить структуру данных магазина. Какие данные должны быть? Я думаю, что строка для задачи, массив для списка задач и int для счетчика должны работать нормально.

Затем мы создадим вторую часть редуктора, которая будет изменять данные при вызове действия.

Данные, возвращаемые в хранилище, должны быть неизменными. Вернуть новый объект, а не изменить текущий. Почему? Подробнее читайте здесь. Для краткости опишите ответ: мы не можем предсказать изменчивые данные.

Теперь мы создадим index.ts в папке редукторов, чтобы создать группу редукторов. Мы можем определить другие редукторы и сгруппировать их вместе. И этот файл будет определять селектор, который вы можете использовать для получения данных из «Store».

Почти готово к созданию @ ngrx / store. Последнее, что нужно сделать, это импортировать @ngrx с редукторами в модуль Angular.

Призыв к действию

Теперь в нашем компоненте мы вызовем действие, которое мы создаем с помощью @ngrx. Затем @ngrx будет управлять данными и сохранять их в магазине.

Получить данные из магазина

Теперь мы получим данные из «Магазина». У нас есть селектор в редукторах, и мы можем использовать его в нашем компоненте для получения данных через Observable.

Селектор @ngrx возвращает наблюдаемое. Мы можем подписаться на него напрямую в представлении с помощью вызова канала async, предоставленного @ngrx, или с помощью метода подписки через наблюдаемый объект для подписки на данные, измененные из «Store».

Посмотреть полный исходный код с github.

Заключение

Мы создали простое приложение со списком задач, используя @ ngrx / store с Angular, мы определили и «Действия» для отправки. создал «Редукторы» для изменения данных на «Магазин». Подпишитесь и отображайте данные через каналы или Observable. Это очень просто, правда ?.

использованная литература