Heim >Web-Frontend >js-Tutorial >Verwendung von ngrx/store für die Statusverwaltung in Angular
ngrx/store ist von Redux inspiriert und eine Angular-Staatsverwaltungsbibliothek, die RxJS integriert und vom Angular-Evangelisten Rob Wormald entwickelt wurde. Es hat die gleiche Kernidee wie Redux, verwendet jedoch RxJS, um das Beobachtermuster zu implementieren. Es folgt den Kernprinzipien von Redux, wurde jedoch speziell für Angular entwickelt.
Der größte Teil der Zustandsverwaltung in Angular kann durch den Dienst übernommen werden. Einer davon ist, dass der Zustandsfluss chaotisch ist, was der späteren Wartung nicht förderlich ist. Später wurde Redux als Referenz verwendet, gepaart mit den Eigenschaften von rxjs Flow Programming Forms @ngrx/store, einem Zustandsverwaltungstool für Angular.
StoreModule:Empfohlene verwandte Tutorials: „Angular Tutorial
.“
{
type: 'add',
payload: {name: '111'} }
)
wird verwendet, um den Aktionstyp zu verteilen zum Reduzierer.
Einzelne Datenquelle
state ={ application:'angular app', shoppingList:['apple', 'pear'] }
Änderungen werden mit reinen Funktionen vorgenommen (der Status kann nur durch Aufrufen von Funktionen geändert werden). /store führte außerdem ein Konzept namens Reducer (Aggregator) ein. Ändern Sie den Zustand durch den Reduzierer.
state={'username':'kat'}, //用户重新登录别的账户为tom state.username = 'tom' //在ngrx store 这个行为是绝对不允许的
yarn add @ngrx/store
function reducer(state = 'SHOW_ALL', action) { switch (action.type) { case 'SET_VISIBILITY_FILTER': return Object.assign({}, state ,newObj); default: return state } }Reducer appstorereducer.ts
//下面是使用接口的情况, 更规范 export interface TaskList { id: number; text: string; complete: boolean; } export const TASKSAll: TaskList[] = [ {id: 1, text: 'Java Article 1', complete: false}, {id: 2, text: 'Java Article 2', complete: false} ] export interface AppState { count: number; todos: TaskList; // 如果要管理多个状态,在这个接口中添加即可 } //这个是不用接口的情况 // export interface AppState { // count: number; // todos: any; // // 如果要管理多个状态,在这个接口中添加即可 // }
actions
Wenn Sie die Aktion separat extrahieren müssen, lesen Sie bitte Folgendes: 5 Was tun, wenn Sie die Aktion trennen möchten? 3. Registrieren Sie das Store-
app/app.module.ts// reducer.ts,一般需要将state,action,reducer进行文件拆分
import { Action } from '@ngrx/store';
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';
const initialState = 0;
// reducer定义了action被派发时state的具体改变方式
export function counterReducer(state: number = initialState, action: Action) {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
case RESET:
return 0;
default:
return state;
}
}
4. Verwenden Sie den Store zur Verwendung
import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; // StoreModule: StoreModule是@ngrx/storeAPI中的一个模块, // 它被用来在应用模块中配置reducer。 import {counterReducer} from './store/reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }), // 注册store ], }) export class AppModule {}Vorlagenseite: appmodulearticlearticle.component.html
// 组件级别 import { Component } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { Observable } from 'rxjs'; import { INCREMENT, DECREMENT, RESET} from '../../store/reducer'; interface AppState { count: number; } @Component({ selector: 'app-article', templateUrl: './article.component.html', styleUrls: ['./article.component.css'] }) export class ArticleComponent { count: Observable<number>; constructor(private store: Store<AppState>) { // 注入store this.count = store.pipe(select('count')); // 从app.module.ts中获取count状态流 } increment() { this.store.dispatch({ type: INCREMENT }); } decrement() { this.store.dispatch({ type: DECREMENT }); } reset() { this.store.dispatch({ type: RESET }); } }
Hier wird das Pipe-Symbol async verwendet, und die schnelle Fehlerberichterstattung wird direkt im Untermodul verwendet, wenn eine bidirektionale Bindung von Daten implementiert werden soll Im Untermodul wird ebenfalls ein Fehler gemeldet. Weitere Informationen finden Sie in der Kursunterlagen-Beschreibung. Frage: Die Pipe „async“ wurde nicht gefunden.
Ändern Sie es wie folgt:
<div class="state-count"> <button (click)="increment()">增加Increment</button> <div>Current Count: {{ count | async }}</div> <button (click)="decrement()">减少Decrement</button> <button (click)="reset()">Reset Counter</button> </div>Zur Vereinfachung der Verwaltung werden Typ, Status, Aktionen und Reduzierungen im Allgemeinen separat verwaltet.
5 Was tun, wenn Sie Aktionen trennen möchten?
Erstellen Sie eine neue appstoreactions.ts-Datei
count: Observable<number>; constructor(private store: Store<AppState>) { // 注入store var stream = store.pipe(select('count')); // 从app.module.ts中获取count状态流 stream.subscribe((res)=>{ this.count = res; }) }
Registrieren Sie sich im Stammmodul app.module.ts
import { Injectable } from '@angular/core'; import { INCREMENT, DECREMENT, RESET } from './types'; @Injectable() export class CounterAction{ // Add=function(){} Add(){ return { type: INCREMENT } } } // 就只这样导出是不行的 // export function Add1(){ // return { type: INCREMENT } // }
Verwenden Sie in der Komponente – article.component.ts
import {CounterAction} from './store/actions'; ... providers: [CounterAction],Für weitere Programmierung- Weitere Informationen zu diesem Thema finden Sie unter: Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt vonVerwendung von ngrx/store für die Statusverwaltung in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!