Магазин Angular NgRx | Пример Angular 9 NgRx

Angular NgRx Store — это шаблон управления данными на стороне клиента, используемый в больших приложениях. Ngrx/Store реализует шаблон Redux, используя наблюдаемые RxJS в Angular. Ngrx/store основан на концепциях, ставших знаменитыми благодаря Redux, и дополняет их поддержкой RxJS.

Пример магазина Angular NgRx

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

Angular Ngrx — это группа библиотек Angular для реактивных расширений. Чтобы понять концепцию NgRX , вы должны быстро погрузиться в основные концепции Redux и концепции реактивного программирования.

Redux

Redux — это контейнер с предсказуемым состоянием для приложений JavaScript. Redux, следующий за однонаправленным потоком. Redux имеет единый магазин.

Redux не может иметь несколько магазинов.

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

Три принципа Redux

  • Единый источник истины.
  • Состояние только для чтения.
  • Изменения вносятся с помощью чистых функций.

Действия

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

1) Тип

2) Полезная нагрузка

Мы возьмем эти свойства в качестве аргумента редуктора для изменения текущего состояния.

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

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

 function addTodo  (текст) {return {type: ADD_TODO, payload: text}} 

Редукторы

Действия описывают факт, что что-то произошло но не указывайте, как в ответ изменяется состояние приложения. Это работа редукторов.

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

Обработка действий

 (previousState, action) => newState 

Диспетчер

Диспетчер — это точка входа для вашего приложения, которая отправляет ваше действие. В Ngrx есть метод dispatch прямо в магазине..

Магазин — это объект, который их объединяет. Важно отметить, что у вас будет только одно хранилище в приложении NgRX. Если вы хотите разделить данные в отдельный файл логики обработки, вам придется использовать композицию редуктора вместо множества хранилищ.

Реактивное программирование

Реактивное программирование — это способ, которым приложения обрабатывают события и поток данных в ваших приложениях angular. В реактивном программировании вы проектируете свои компоненты и другие части своего программного обеспечения так, чтобы они реагировали на эти изменения.

Библиотека javascript для реактивного программирования — это RxJS . Предоставляя наблюдаемые и множество операторов для преобразования входящих данных, эта библиотека поможет вам обрабатывать события в вашем приложении. Это компонент или служба, которая реагирует на изменение данных.

Давайте рассмотрим пример, чтобы понять пример магазина Angular NgRx .

Шаг 1. Настройте проект Angular.

Установите AngularCLI глобально на нашем ПК, введя следующую команду.

 npm  install -g @ angular/cli 

Теперь запустите следующую команду, чтобы создать проект.

 ng new ngrxstore 

Хорошо, теперь создайте один компонент под названием blockchain , набрав следующую команду.

 ng gc blockchain 

Теперь нам нужно создать одну форму в этом компоненте. В файл src >> index.html добавьте файл CSS Bootstrap.

  

Добавьте следующий HTML-код в файл blockchain.component.html .

 

Теперь обновите app.component.html файл, чтобы показать эту форму.

 

Angular ngrx/store Tutorial

Перейдите в CMD и нажмите следующую команду.

 ng serve --open re> 

Наше приложение Angular будет размещено на порту №: 4200

Шаг 2: Создайте модель для нашего приложения.

Нам нужно определить схему нашего приложения. Итак, создайте один файл в папке blockchain с именем blockchain.model.ts file.

 export interface Blockchain {name: string  ;  price: number;} 

Здесь я определил схему нашего приложения.

Шаг 3. Установите библиотеку ngrx.

В файле package.json обновите следующие пакеты.

 "@ ngrx/core": "^ 1.2  .0 "," @ ngrx/effects ":" ^ 4.1.1 "," @ ngrx/store ":" ^ 4.1.1 ", 

Теперь перейдите в терминал и нажмите следующая команда.

 npm install 

Шаг 4. Создайте редуктор для нашего приложения.

Перейдите в папку app и создайте одну папку с именем redurs. В этой папке создайте один файл с именем

//blockchain.reducer.tsimport {Blockchain} из './.  ./blockchain/blockchain.model';import {Action} из '@ ngrx/store'; export const ADD_COIN = 'ADD_COIN'; экспортная функция addCoinReducer (состояние: Blockchain [] = [], действие) {switch (action.type  ) {case ADD_COIN: return [... state, action.payload];  по умолчанию: вернуть состояние;  }} 

Здесь я определил тип действия и функцию редуктора. Как мы уже обсуждали ранее, Reducer - это чистая функция.

Итак, чистая функция всегда возвращает новое состояние. Он не изменяет старое состояние приложения.

Шаг 5. Настройте хранилище ngrx в нашем приложении.

Перейти в файл app.module.ts и включите StoreModule в наше приложение.

//app.module.tsimport  {StoreModule} из '@ ngrx/store'; импортировать {addCoinReducer} из './reducers/blockchain.reducer';  импорт: [BrowserModule, StoreModule.forRoot ({blockchain: addCoinReducer})], 

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

Шаг 6. Добавьте событие щелчка в форму.

Прикрепите прослушиватель событий нажатия кнопки в форме. Итак, весь наш blockchainn.component.html выглядит так.

 

Также напишите функцию addCoin () в файл blockchain.component.ts .

//blockchain.component.tsimport {Blockchain} из './blockchain.model';import {AppState}  из './../app.state'; импортировать {Component, OnInit} из '@ angular/core'; импортировать {Store} из '@ ngrx/store'; @ Component ({selector: 'app-blockchain',  templateUrl: './blockchain.component.html', styleUrls: ['./blockchain.component.css'ght})export class BlockchainComponent реализует OnInit {конструктор (частный магазин: Store ) {} addCoin (имя, цена  ) {this.store.dispatch ({type: 'ADD_COIN', payload:  {name: name, price: price}});} ngOnInit () {}} 

Здесь, нам нужно реализовать Global AppState в нашем приложении. Итак, следующим шагом будет его реализация.

Шаг 7: Определите AppState.

В приложении rong> создайте один файл с именем

//app.state.tsimport {Blockchain} из './blockchain/blockchain.  model '; интерфейс экспорта AppState {readonly blockchain: Blockchain [];} 

Шаг 8: Добавьте проверку в форму.

Включите ReactiveFormsModule в файл app.module.ts .

//app.module.tsimport {ReactiveFormsModule}  из '@ angular/forms'; импорт: [BrowserModule, StoreModule.forRoot ({blockchain: addCoinReducer}), ReactiveFormsModule], 

Хорошо, теперь наш blockchain.component.ts файл выглядит так.

//blockchain.component.tsimport {FormGroup, FormBuilder, Validators} из '@ angular/forms'; импорт {Blockchain} из './blockchain.  model '; импортировать {AppState} из' ./../app.state';import {Component, OnInit} из '@ angular/core'; импортировать {Store} из '@ ngrx/store'; @ Component ({selector  : 'app-blockchain', templateUrl: './bl  ockchain.component.html ', styleUrls: [' ./blockchain.component.css'ght})export class BlockchainComponent реализует OnInit {angForm: FormGroup;  конструктор (частное хранилище: Store , частное хранилище: FormBuilder) {this.createForm ();  } createForm () {this.angForm = this.fb.group ({имя: ['', Validators.required], price: ['', Validators.required]});  } addCoin (имя, цена) {this.store.dispatch ({тип: 'ADD_COIN', полезная нагрузка:  {имя: имя, цена: цена}});  } ngOnInit () {}} 

Здесь я написал логику проверки для обоих типов ввода.

Наконец, наш файл представления blockchain.component.html выглядит следующим образом.

 
{{title}}
Требуется имя.
Требуется цена.

Теперь, если все в порядке, вы можете добавить данные в магазин.

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

Шаг 9. Создайте компонент представления для отображения данных.

Перейдите к терминал и нажмите следующую команду.

 ng gc display 

Подпишитесь на магазин и получите данные. Поэтому напишите следующий код в файл display.component.ts .

//display.component.tsimport {Blockchain} from './../blockchain /blockchain.model';import {Component, OnInit} from '@ angular/core'; import {AppState} from './../app.state';import {Store} from' @ ngrx/store '; import {  Observable} из 'rxjs/Observable'; @ Component ({selector: 'app-display', templateUrl: './display.component.html', styleUrls: ['./display.component.css'estive})export class  DisplayComponent реализует OnInit {монеты: Observable ;  конструктор (частное хранилище: Store ) {this.coins = this.store.select (state => state.blockchain);  } ngOnInit () {}} 

Теперь напишите представление HTML для этого компонента..

 
Название монеты Цена монеты
{{coin.name}} {{coin.price }}

Цена монеты

Добавьте это представление в файл app.component.html .

 

Учебник по Angular ngrx/store


Теперь добавьте название монеты и цену монеты, вы увидите, что она будет храниться в ngrx/store и получит эти данные из магазина и отобразите эту информацию.

Наконец, наш Пример магазина Angular 9 NgRx завершен.

Код Github - это более старая версия, но он наверняка будет работать с Angular 9.

Я поместил этот код в Github.

Fork Me On Github

Название монеты
{{coin.name}} {{coin.price}}

Оцените статью
nanomode.ru
Добавить комментарий