@ngrx - это управление состоянием вашего приложения Angular. Это как Redux. Вы можете найти более подробную информацию в Управление состоянием в Angular с @ngrx. В этой статье мы покажем вам, как управлять состоянием в приложении с помощью @ ngrx / store, но большинство приложений сложнее, чем изменение состояния путем запуска только одного действия и завершения потока действий, некоторые из которых Действие имеет поток для запуска другого действия позже. Например, когда вы запрашиваете HTTP-запрос для вызова API, у вас должно быть 3 состояния в приложении под названием Загрузка, Успех и Неудача. После запуска действия загрузки дождитесь ответа http, а затем активируйте успешное или неудачное действие позже. Вы можете управлять этим потоком с помощью @ ngrx / effects.

В Redux мы используем промежуточное ПО для управления потоком действий. Например, мы хотим запустить какое-то действие при вызове этого действия или потока HTTP-запроса, мы вызываем промежуточное ПО, и оно будет обрабатывать поток за нас. Но в @ngrx, не определен шаблон промежуточного программного обеспечения, @ngrx предоставил побочный эффект действия, подписавшись на действие, и когда это действие было вызвано, эта функция также будет запущена. Назовите эту библиотеку @ ngrx / effects.

@ ngrx / эффекты

В потоке управления состоянием @ ngrx / store, когда действие было инициировано, редукторы обрабатывают данные и помещают в «Store». «Просмотр» будет подписывать данные из магазина и получать данные для отображения в приложении.

@ ngrx / effects - побочная модель магазина. Эффекты подписываются на действие, когда действие было запущено, функция эффекта также срабатывает. Отсюда вы можете выполнить асинхронную задачу, HTTP-запрос, подключить API для запроса данных из базы данных, а затем запустить другое действие для сохранения ответа в «Store».

Когда вы получаете HTTP-ответ от HTTP-запроса и вам необходимо обновить эти данные в «Store». Единственный способ сделать это из эффекта - запустить другое «Действие». Мы не можем напрямую попасть в редукторы или магазин. Итак, вам нужно определить действие для этого события. Например, при инициализации приложения мы вызвали действие по загрузке списка задач, вызов «getTodo», и обновили состояние переменной загрузки. Затем был вызван эффект, мы делаем HTTP-запрос для получения списка дел, и после получения HTTP-ответа запускаем действие под названием «getTodoSuccess» или «getTodoFailed. »На основе полученного кода состояния HTTP. Это действие должно преобразовать список дел в «Магазин».

Начать кодирование

Мы начинаем с существующего кода в предыдущей статье, вы можете просмотреть исходный код по адресу https://github.com/tui2tone/ngrx-example.

Установите @ ngrx / effect через npm или yarn

npm install @ngrx/effects --save

Во-первых, нам нужно определить действие получения потока списка дел из HTTP-запроса в папках действий с тремя действиями, называемыми «getTodo», «getTodoSuccess» и «getTodoFailed».

Затем создайте редукторы для обработки данных из этих действий. Измените «isLoading» на true в состоянии getTodo, и когда триггер getTodoSuccess вернет данные списка задач в «Store».

В эффектах мы создаем эффект с действием подписки getTodo и задержкой на 2 секунды, затем вызываем действие getTodoSuccess и с данными списка задач.

В реальном примере мы будем использовать HTTP-запрос для получения списка дел, вот небольшой пример, как сделать это с HttpClient из Angular.

Действие, возвращаемое из «mergeMap», представляет собой массив. Таким образом, вы можете вернуть несколько действий, которые хотите, вот так.

Наконец, инициализируйте EffectsModule в модуле Angular.

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

По сути, мы можем получить данные из магазина для использования в функции «mergeMap». Например, если ваш HTTP-запрос требует userId, и мы храним его в «Store», мы можем получить это значение userId и отправить его с HTTP-запросом в модуле эффектов.

Сначала импортируйте состояние магазина в эффект через конструктор, а затем используйте оператор withLatestFrom для получения данных в Store. Параметры в функции mergeMap преобразуются в массив, включающий 2 объекта, и назначим их переменной. Первый объект - это параметр из полезной нагрузки, который мы назначаем «полезной нагрузке», а второй из хранилища, который мы назначим переменной «хранилище». После этого вы можете получить значение в хранилище через переменную хранилища, подобную этой.

Вы можете просмотреть весь исходный код здесь. Https://github.com/tui2tone/ngrx-effect-example

Ссылки