Hi,

Anguar — это язык программирования для создания SPA (одностраничных приложений). Он также использует множество концепций, таких как внедрение зависимостей и другие.

Не новинка, но одна хорошая вещь — это NgRx, в Angular для документации мы можем следить за веб-сайтом, но это поможет нам получить основное представление о NgRx. Что ж, в этой статье нет никаких изображений, но информация очень информативна.

Простыми словами можно сказать,

Когда приложение загружается, некоторые HTTP-запросы выполняются с помощью ACTIONS, а в ответ мы получаем какой-то ответ. Мы сохраняем ответ в нашем NgRx Store, который мы говорим с помощью REDUCERS. А HTTP-запросы выполняются с использованием EFFECTS (используется для взаимодействия с HTTP-запросами).

Теперь, когда у нас есть все необходимые данные, мы должны использовать данные для просмотра в приложении, для этого мы используем СЕЛЕКТОРЫ.

Когда использовать NgRx?

Мы можем использовать NgRx с любым угловым приложением. Предпочтительно использовать NgRx, когда нам нужно создать приложение, требующее большого количества взаимодействий с пользователем и нескольких источников данных, и когда управление состояниями в службах становится затруднительным.

Вот небольшое описание слов, которые используются выше:

Store — это контейнер состояний для написания приложений поверх Angular.

NgRx/store — это библиотека управления реактивным состоянием на основе RxJS.
Эта библиотека используется для управления потоком данных (ответы, хранящиеся в состоянии) во всем приложении.

ПРИМЕЧАНИЕ. Когда отправляются ACTIONS, EFFECTS используются для HTTP-запросов, REDUCERS воздействуют на них и изменяют состояние хранилища, а данные отображаются с помощью SELECTORS.

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

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

Селекторы — это чистые функции, которые используются для выбора, получения и составления частей состояния. которые используются для получения данных и используются в соответствии с требованием.

NgRx/effects обычно используются для обработки функций, таких как выборка данных из внешнего ресурса.

Вот пример, который свяжет все вместе:

Пример получения всего СПИСКА ПОЛЬЗОВАТЕЛЕЙ:

Когда нам нужен СПИСОК ПОЛЬЗОВАТЕЛЕЙ, ДЕЙСТВИЕ будет отправлено для получения списка пользователей, это ДЕЙСТВИЕ будет связано с ЭФФЕКТАМИ, которые получат ответ от ВНЕШНИХ РЕСУРСОВ, в ответ на ответ ответ будет передан ДЕЙСТВИЮ УСПЕХА, которое будет ссылка РЕДЮСЕРЫ, редукторы изменяют состояние, а СЕЛЕКТОРЫ используются для получения СПИСКА.

Таким образом, заключение NgRx использует ACTION, REDUCER, S.ELECTOR и EFFECTS.

ПРИМЕЧАНИЕ. Некоторые понятия, такие как BehaviorSubject, Observables, Subscription, необходимо знать в дополнение к легкому пониманию NgRx.

Рабочий код будет добавлен в следующем посте вместе со снимками кода.

Спасибо..!!