Redux доступен в виде пакета на NPM для использования с модулем связывания или в приложении Node:
Оболочка
1
npm install --save redux
Итак, давайте обсудим основные концепции Redux.
Итак, теперь мы увидим общую концепцию Redux и посмотрим, как это работает. Здесь мы видим, что у нас есть пользовательский интерфейс, и когда пользователь выполняет действие, он меняет состояние данных в приложении.
Что такое государство?
По сути, все данные в приложении все вместе известны как хранилище, и они представлены как состояние . Мы не можем изменить состояние, так как оно неизменно. Мы можем изменить состояние только с помощью Action, который сам является объектом, состоящим из двух компонентов:
- Тип : Тип — это просто имя действия.
- Полезная нагрузка : в качестве альтернативы полезная нагрузка — это то, что мы можем обозначить как данные действия.
Вам также может понравиться:
Angular Tutorial: Управление состоянием с помощью ngRx .
Как это работает
При изменении данных существующее состояние дублируется. Затем новый объект создается с обновлениями. В Angular эти данные обрабатываются как RxJS Observable, что позволяет нам подписываться на них из любой точки приложения. Когда генерируется событие, например, при нажатии кнопки, действие отправляется функции-редуктору для преобразования старого состояния в новое состояние:
JavaScript
xxxxxxxxxx
1
{ type: 'DELETE_ITEM', payload: 123 }
Здесь вы можете видеть, что в действии Delete_Item — это имя нашего действия, а 123 — данные действия.
Как настроить ngRx
ngRx — это угловая версия шаблона редукса, вдохновленная группой библиотек, вдохновленных шаблоном потока.
Вы можете настроить ngRx всего двумя шагами, описанными ниже:
Создайте новое приложение с Angular-CLI и присвойте ему имя. (В нашем случае мы называем это ngrProject .)
Оболочка
xxxxxxxxxx
1
ng new ngrxProject --routing
2
cd ngrxProject
Установите ngrx / store через npm в вашей системе с помощью следующей команды.
app.module.ts
Оболочка
xxxxxxxxxx
1
sudo npm install @ngrx/core @ngrx/store --save
ngrx.reducer.ts
Здесь, в этом файле, нам нужно обновить файл модуля приложения с помощью постредуктора, для этого нам нужно импортировать постредуктор.
JavaScript
1
import { Action } from '@ngrx/store';
2
export function simpleReducer(statement: string = 'I am learning',
4
action: Action) {
5
switch (action.type) {
7
case 'German':
9
return statement = 'Ich lerne'
10
case 'FRENCH':
12
return statement = 'j'apprends'
13
default:
15
return statement;
16
}
17
}
app.component.ts
Теперь мы создадим один файл, в котором создадим редуктор.
Здесь у нас есть операторы switch с возможными действиями, и вся эта функция в целом известна как редуктор. В этой функции оператор switch возвращает оператор «я учусь» на разных языках в зависимости от действий .
-
Так что теперь, если мы хотим изменить состояние и будем использовать хранилище классов, нам нужно реализовать интерфейс, соответствующий объекту, необходимому для передачи в
ngModule.
-
Переменная для
сообщения $ устанавливается как Наблюдаемая на компоненте путем вызова
this.store.select('message').
-
Мы инициируем изменения состояния, отправляя действия в редуктор с помощью
this.store.dispatch (‘ACTION’).
JavaScript
xxxxxxxxxx
1
import { Component } from '@angular/core';
2
import { Store } from '@ngrx/store';
4
import { Observable } from 'rxjs/Observable';
5
interface AppState {
7
message: string;
8
}
9
@Component({
11
selector: 'app-root',
12
templateUrl: './app.component.html',
13
styleUrls: ['./app.component.scss']
14
})
15
export class AppComponent {
16
message$: Observable<string>
18
constructor(private store: Store) {
20
this.message$ = this.store.select('message')
21
}
22
germanMessage() {
24
this.store.dispatch({type: 'GERMAN'})
25
}
26
frenchMessage() {
28
this.store.dispatch({type: 'FRENCH'})
29
}
30
}
Теперь мы можем подписаться на Observable в HTML и инициировать изменения с помощью событий нажатия кнопки.
HTML
xxxxxxxxxx
1
<h2>{{ message$ | async }}</h2>
2
<button (click)="GermanMessage()">German</button>
4
<button (click)="frenchMessage()">French</button>
Вывод: я надеюсь, что этот блог будет полезен для вас, чтобы получить базовое представление о ngRx с редуксом. Удачного кодирования!
Спасибо за прочтение!!!