В этом блоге мы узнаем, как реализовать хранилище #ngrx в нашем проекте. Прежде чем что-либо начинать, мы должны знать, что такое ngrx???

NgRxStore — это библиотека управления состоянием для приложений Angular. Проще говоря, мы можем сказать, что нам нужно управлять данными на стороне клиента с помощью этой библиотеки. В приложениях Angular мы можем использовать состояния с данными для одностраничных приложений.

Это упрощает разработку Angular за счет упрощения состояния приложения в объектах с однонаправленным потоком данных.

Настройка магазина NgRx

  1. Вы можете установить NgRx Store в свой проект с помощью следующей команды ng add.
  2. ng add @ngrx/store
  3. Если вы хотите установить с помощью npm, вы можете использовать команду ниже
  4. npm install @ngrx/store –save

Теперь импортируйте StoreModule в свой app.module.ts и добавьте StoreModule.forRoot({}, {}) к импорту массива:

Теперь установите @ngrx/store-devtools.

Теперь вам необходимо установить @ngrx/store-devtools в свой проект, чтобы предоставить информацию об инструментах разработчика, а также установить расширение для браузера.

  1. ng add @ngrx/store-devtools@latest
  2. Обновите свой src/app.module.ts › массив импортов с помощью StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() }).
  3. Если вы хотите добавить с помощью npm, вам поможет команда ниже.
  4. npm install @ngrx/store-devtools –save

Теперь нам нужно добавить расширение Redux Devtools для Google Chrome.

Теперь установите эффекты

В приложении Angular на основе сервисов компоненты отвечают за взаимодействие с внешними ресурсами напрямую через сервисы. Вместо этого эффекты предоставляют возможность взаимодействовать с этими сервисами и изолировать их от компонентов.

  1. ng add @ngrx/effects@latest
  2. Если вы хотите добавить с помощью npm, обратитесь к команде ниже.
  3. npm install @ngrx/effects –save
  4. Обновите массив src/app/app.module.ts › imports с помощью EffectsModule.forRoot([AppEffects]).

Создать файловую структуру для части магазина

Эту файловую структуру, которую мы создали для корневой части хранилища, мы должны управлять своим состоянием. Я создал здесь действия, эффекты и редукторы.

Действие ››Действие описывает все изменения в состоянии приложения, что означает, что нам нужно вызвать действие для управления данными для редукторов и служб API в эффектах.

Редукторы ››Это посредник между хранилищем и действием, который передает данные для хранилища при вызове действия.

Магазин ››Это центральное хранилище, в котором хранится все состояние приложения.

Эффекты ››Для пользовательских служб и API в соответствии с действием и управляйте этими запросами/ответами для хранилища в соответствии с действием.

Сначала нам нужно создать действие с помощью метода createAction() и использовать его в соответствии с требованиями.

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

И создайте файловую структуру с действиями, эффектами и редукторами.

Создание действий

Нам нужно создать действия для разных целей для управления магазином, как показано на изображении выше.

Создание эффектов

Здесь мы создаем эффекты для вызова службы API для получения данных из службы и отправки их в редукторы с помощью действия для управления состоянием в магазине.

Создание редукторов

Здесь нам нужно добавить редукторы для управления состоянием по действию для хранения с помощью метода on(), который должен возвращать состояние.

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

Вот какие эффекты мы добавили в конкретный модуль, затем нам нужно экспортировать этот эффект сюда для вызова в основной файл app.module.ts на изображении выше.

Здесь, какие редукторы мы написали для управления данными и состоянием, нам нужно экспортировать зайца для привязки к основному файлу модуля приложения на изображении выше.

Для части функционального модуля

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

Итак, наконец, мы реализуем NgRx в нашем приложении, но как мы можем отлаживать это состояние, поэтому какое бы расширение Redux devtools Extension мы ни установили при запуске, нам нужно перейти к этому расширению. и откройте нашу часть элемента проверки Google Chrome и проверьте это.

Здесь мы можем проверять наше состояние с помощью разных ключей, таких как auth, account, и внутри этих ключей также управлять различными данными.

Это процесс настройки и управления нашим состоянием в angularпроекте.

Исходный код GitHub

Наконец, сегодня мы узнаем о NgRx Store для приложений Angular. Если у вас есть какие-либо вопросы по подъему детали, прокомментируйте раздел ниже, и я постараюсь решить ваш вопрос.

Если вы хотите учиться со мной, подпишитесь на меня в социальных сетях, а также посетите мой сайт.

https://www.ankitkumarsharma.com/ и подписывайтесь на меня в GitHub, Twitter, Medium и Разработчики для получения дополнительных обновлений статей с практическими запросами кода.

Спасибо! Удачного программирования!

Стеккадемический

Спасибо, что дочитали до конца. Прежде чем уйти:

  • Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
  • Следуйте за нами в Twitter(X), LinkedIn и YouTube.
  • Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.