Heim > Web-Frontend > js-Tutorial > Hauptteil

Angular verwendet ngrx/store für die Statusverwaltung

青灯夜游
Freigeben: 2021-02-01 11:44:25
nach vorne
1909 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Verwendung von Angular NGRX/Store-Statusverwaltung vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Angular verwendet ngrx/store für die Statusverwaltung

Empfohlene verwandte Tutorials: „Angular-Tutorial

Ngrx für die Zustandsverwaltung in Angular verwenden

Einführung

ngrx/store ist inspiriert von ux und ist ein integrierter Angular-Status Verwaltungsbibliothek für RxJS, entwickelt vom Angular-Evangelisten Rob Wormald. 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 Streaming-Programmierung, einem Statusverwaltungstool für Angular.

  • StoreModule ist ein Modul im @ngrx/store API, die zum Konfigurieren des Reduzierers im Anwendungsmodul verwendet wird.

  • Aktion:

    Aktion ist eine Zustandsänderung. Es beschreibt das Eintreten eines Ereignisses, gibt jedoch nicht an, wie sich der Status der Anwendung ändert.

  • Store:

    Es stellt Store.select() und Store.dispatch() zur Verfügung, um mit dem Reduzierer zu arbeiten. Store.select() wird verwendet, um einen Selektor auszuwählen,
    Store.dispatch(
    {
    type: 'add',
    payload: {name: '111'}
    }
    )
    wird verwendet, um den Aktionstyp zu verteilen zum Reduzierer.

Drei Prinzipien der @NgRx/Store-Statusverwaltung

Zuallererst hält sich @NgRx/Store auch an die drei Grundprinzipien von Redux:

    Einzelne Datenquelle
Dieses Prinzip ist das gesamte einzelne Seite Der Status der Anwendung wird im Store in Form eines Objektbaums gespeichert.

Diese Definition ist sehr abstrakt. Sie dient dazu, alle Daten, die gemeinsam genutzt werden müssen, in Form von Javascript-Objekten zu speichern. Der Statusinhalt kann nicht direkt geändert werden. Wenn wir beispielsweise den Status der Anmeldeseite speichern müssen, müssen die Statusinformationen den Namen des angemeldeten Benutzers aufzeichnen. Wenn sich der Anmeldename ändert, können wir den im Status gespeicherten Benutzernamen nicht direkt ändern.

state =
{
    application:'angular app',
    shoppingList:['apple', 'pear']
}
Nach dem Login kopieren

    Ä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.
R
state={'username':'kat'},
//用户重新登录别的账户为tom
state.username = 'tom'  //在ngrx store 这个行为是绝对不允许的
Nach dem Login kopieren
ErNGRX/Store Instanzen verwenden

  • 1. Installieren Sie @ngrx/store

yarn adD @ngrx/store

2. Erstellen Sie Status, Aktion, Resicer

Status: Appstorestatus .ts

function reducer(state = 'SHOW_ALL', action) {
    switch (action.type) {
      	case 'SET_VISIBILITY_FILTER':
        	return Object.assign({}, state  ,newObj);  
        default:
        	return state  
        }
	}
Nach dem Login kopieren

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;
//     // 如果要管理多个状态,在这个接口中添加即可
//   }
Nach dem Login kopieren

actions
Wenn Sie die Aktion separat extrahieren müssen, lesen Sie bitte Folgendes:

5 Was tun, wenn Sie die Aktion trennen möchten?

3. Store

Root-Modul registrieren: 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;
  }
}
Nach dem Login kopieren

4. Store

verwenden, um Store in eine Komponente oder einen Dienst zur Verwendung einzuspeisenmit appmodulearticlearticle.component.ts Komponente Zum Beispiel:

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 {}
Nach dem Login kopieren

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(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
  }

  increment() {
    this.store.dispatch({ type: INCREMENT });
  }

  decrement() {
    this.store.dispatch({ type: DECREMENT });
  }

  reset() {
    this.store.dispatch({ type: RESET });
  }
}
Nach dem Login kopieren

Hier wird das Pipe-Symbol async verwendet und der Fehler wird direkt im Untermodul gemeldet, wenn die bidirektionale Bindung von Daten erfolgen soll Im Untermodul implementiert, wird auch ein Fehler gemeldet. Konkret bezieht sich der Grund auf die in der Kursunterlagen erläuterte Frage: Die Pipe „async“ konnte nicht gefunden werden.

Wie rendere ich die Seite, ohne Pipes in der Vorlagenseite zu verwenden?

Ä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>
Nach dem Login kopieren


Zur Vereinfachung der Verwaltung werden Typ, Status, Aktionen und Reduzierungen im Allgemeinen separat verwaltet.

5 Was ist, 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(&#39;count&#39;)); 
    // 从app.module.ts中获取count状态流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }
Nach dem Login kopieren
Registrieren Sie sich im Stammmodul app.module.ts

import { Injectable } from &#39;@angular/core&#39;;
import { INCREMENT, DECREMENT, RESET } from &#39;./types&#39;;

@Injectable()
export class CounterAction{
    // Add=function(){}
    Add(){
        return { type: INCREMENT }
    }
}

// 就只这样导出是不行的
// export function Add1(){
//     return { type: INCREMENT }
// }
Nach dem Login kopieren
Verwenden Sie in der Komponente – article.component.ts

    import {CounterAction} from &#39;./store/actions&#39;;
    
    ... 
    
    providers: [CounterAction],
    Nach dem Login kopieren

  1. Für weitere Programmierung -bezogenes Wissen finden Sie unter:
  2. Programmieren lernen! !

      Das obige ist der detaillierte Inhalt vonAngular verwendet ngrx/store für die Statusverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:csdn.net
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage