Verstehen Sie in einem Artikel schnell das NgRx/Store-Framework in Angular

Was ist das NgRx/Store-Framework in

Angular? Was ist der Nutzen? In diesem Artikel lernen Sie das NgRx/Store-Framework für die Datenstatusverwaltung und die Grundprinzipien in ngrx/store kennen und lernen anhand von Beispielen die einfache Verwendung des Frameworks kennen.

【Verwandte Tutorial-Empfehlung: „Angular Tutorial“】

ngrx/store ist eine Zustandsverwaltungsbibliothek basierend auf RxJS, die von inspiriert ist Redux. In NgRx besteht der Zustand aus einer Zuordnung von Funktionen, die action und reducer enthalten. Die Reducer-Funktion wird über den Versand von action und dem aktuellen oder anfänglichen Zustand aufgerufen, und schließlich wird durch reducer ein unveränderlicher Zustand zurückgegeben. ngrx/store 是基于RxJS的状态管理库，其灵感来源于Redux。在NgRx中，状态是由一个包含action和reducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用，最后由reducer返回一个不可变的状态。

状态管理

在前端大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题。在AngularJS（1.x版本）中，状态管理通常由服务，事件，$rootScope混合处理。在Angular中（2+版本），组件通信让状态管理变得清晰一些，但还是有点复杂，根据数据流向不同会用到很多方法。

ngrx/store中的基本原则

视图层通过dispatch发起一个行为（action）、Reducer接收action，根据action.type类型来判断执行、改变状态、返回一个新的状态给store、由store更新state。

• State（状态） 是状态（state）存储器
• Action（行为） 描述状态的变化
• Reducer（归约器/归约函数） 根据先前状态以及当前行为来计算出新的状态，里面的方法为纯函数
• 状态用State的可观察对象，Action的观察者——Store来访问

Actions（行为）

Actions是信息的载体，它发送数据到reducer，然后reducer更新store。Actions是store能接受数据的唯一方式。

在ngrx/store里，Action的接口是这样的：

// actions包括行为类型和对应的数据载体
export interface Action {
  type: string;
  payload?: any;
}

type描述期待的状态变化类型。比如，添加待办 ADD_TODO，增加 DECREMENT 等。payload是发送到待更新store中的数据。store派发action 的代码类似如下：

// 派发action，从而更新store
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Buy milk'
});

Reducers（归约器）

Reducers规定了行为对应的具体状态变化。是纯函数，通过接收前一个状态和派发行为返回新对象作为下一个状态的方式来改变状态，新对象通常用Object.assign和扩展语法来实现。

// reducer定义了action被派发时state的具体改变方式
export const todoReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

开发时特别要注意函数的纯性。因为纯函数：

• 不会改变它作用域外的状态
• 输出只决定于输入
• 相同输入，总是得到相同输出

Store（存储)

store中储存了应用中所有的不可变状态。ngrx/store中的store是RxJS状态的可观察对象，以及行为的观察者。

可以利用Store来派发行为。也可以用Store的select()方法获取可观察对象，然后订阅观察，在状态变化之后做出反应。

上面我们描述的是基本流程。在实际开发过程中，会涉及API请求、浏览器存储等异步操作，就需要effects和services，effects由action触发，进行一些列逻辑后发出一个或者多个需要添加到队列的action，再由reducers处理。

使用ngrx/store框架开发应用，始终只维护一个状态，并减少对API的调用。

简单示例

简单介绍一个管理系统的登录模块。

创建Form表单

1、增加组件：LoginComponent，主要就是布局，代码为组件逻辑

2、定义用户：User Model

🎜

Zustandsverwaltung

🎜Die Zustandsverwaltung großer und komplexer Front-End-Angular/AngularJS-Projekte bereitete schon immer Kopfschmerzen. In AngularJS (Version 1.x) wird die Statusverwaltung normalerweise durch eine Mischung aus Diensten, Ereignissen und $rootScope übernommen. In Angular (Version 2+) macht die Komponentenkommunikation die Zustandsverwaltung klarer, ist aber immer noch etwas kompliziert und je nach Datenflussrichtung werden viele Methoden verwendet. 🎜

Grundprinzipien in ngrx/store

🎜Die Ansichtsschicht initiiert eine Aktion (Aktion) durch dispatch, Reducer empfängt action, bestimmt die Ausführung entsprechend dem Typ action.type, ändert den Status und gibt einen neuen Status an store< zurück /code> >, <code>state wird durch store aktualisiert. 🎜🎜🎜

• State (state) ist der Zustand (state) Memory
• Action (behavior) beschreibt die Änderung of state
• Reducer (Reduzierer/Reduktionsfunktion) berechnet den neuen Zustand basierend auf dem vorherigen Zustand und dem aktuellen Verhalten. Die darin enthaltenen Methoden sind reine Funktionen
• Der Zugriff auf den Zustand erfolgt über das beobachtbare Objekt von State und den Beobachter von Action - Store

Actions

🎜Actions ist der Informationsträger, der Daten an reducer sendet, dann an reducer aktualisiert store. Aktionen sind die einzige Möglichkeit, wie store Daten akzeptieren kann. 🎜🎜In ngrx/store ist die Schnittstelle von Action wie folgt: 🎜

export class User {
    id: number;
    username: string;
    password: string;
    email: string;
    avatar: string;

    clear(): void {
        this.id = undefined;
        this.username = "";
        this.password = "";
        this.email = "";
        this.avatar = "./assets/default.jpg";
    }
}

🎜type beschreibt den erwarteten Zustandsänderungstyp. Fügen Sie beispielsweise die Aufgaben ADD_TODO, DECREMENT usw. hinzu. Payload sind die Daten, die zur Aktualisierung an den Store gesendet werden. Der Code für store zum Versenden von action ähnelt dem folgenden: 🎜

export interface AuthState {
    isAuthenticated: boolean;
    user: User | null;
    errorMessage: string | null;
}

export const initialAuthState: AuthState = {
    isAuthenticated: false,
    user: null,
    errorMessage: null
};

Reducers< /h4>🎜Reducers gibt die spezifischen Zustandsänderungen an, die dem Verhalten entsprechen. Es handelt sich um eine reine Funktion, die den Status ändert, indem sie den vorherigen Status empfängt und ein neues Objekt als nächsten Status zurückgibt. Neue Objekte werden normalerweise mithilfe von Object.assign und erweiterter Syntax implementiert. 🎜

export enum AuthActionTypes {
    Login = "[Auth] Login",
    LoginSuccess = "[Auth] Login Success",
    LoginFailure = "[Auth] Login Failure"
}

export class Login implements Action {
    readonly type = AuthActionTypes.Login;
    constructor(public payload: any) {}
}

🎜Achten Sie bei der Entwicklung besonders auf die Reinheit der Funktionen. Weil reine Funktionen: 🎜

• Ändert den Zustand außerhalb ihres Gültigkeitsbereichs nicht
• Die Ausgabe hängt nur von der Eingabe ab
• Die gleiche Eingabe erhält immer die gleiche Ausgabe

Store

🎜store speichert den gesamten unveränderlichen Status in der Anwendung. Der store in ngrx/store ist ein beobachtbares Objekt des RxJS-Status und ein Beobachter des Verhaltens. 🎜🎜Sie können Store verwenden, um Aktionen zu versenden. Sie können auch die Methode select() des Stores verwenden, um beobachtbare Objekte abzurufen und sich dann für die Beobachtung und Reaktion nach Statusänderungen anmelden. 🎜🎜Was wir oben beschreiben, ist der grundlegende Prozess. Im eigentlichen Entwicklungsprozess sind asynchrone Vorgänge wie API-Anfragen und Browserspeicher beteiligt, die aus effects und services bestehen code>action löst aus, führt eine Reihe von Logiken aus und gibt dann eine oder mehrere action aus, die zur Warteschlange hinzugefügt und dann von reducers verarbeitet werden müssen. 🎜🎜🎜

🎜Verwenden Sie das ngrx/store-Framework, um Anwendungen zu entwickeln, immer nur einen Status beizubehalten und Aufrufe an APIs zu reduzieren. 🎜

Einfaches Beispiel

🎜Eine kurze Einführung in das Login-Modul eines Managementsystems. 🎜

Formular erstellen

🎜1. Komponente hinzufügen: LoginComponent, hauptsächlich Layout, der Code ist Komponentenlogik 🎜 🎜2. Benutzer definieren: Benutzermodell🎜

export class User {
    id: number;
    username: string;
    password: string;
    email: string;
    avatar: string;

    clear(): void {
        this.id = undefined;
        this.username = "";
        this.password = "";
        this.email = "";
        this.avatar = "./assets/default.jpg";
    }
}

3、添加表单：在组件LoginComponent增加Form表单

NGRX Store

按照上述的4个原则定义相应的Actions

• reducers定义状态

  在文件auth.reducers.ts中创建状态，并初始化

  export interface AuthState {
      isAuthenticated: boolean;
      user: User | null;
      errorMessage: string | null;
  }
  
  export const initialAuthState: AuthState = {
      isAuthenticated: false,
      user: null,
      errorMessage: null
  };

• actions定义行为

  export enum AuthActionTypes {
      Login = "[Auth] Login",
      LoginSuccess = "[Auth] Login Success",
      LoginFailure = "[Auth] Login Failure"
  }
  
  export class Login implements Action {
      readonly type = AuthActionTypes.Login;
      constructor(public payload: any) {}
  }

• service实现数据交互（服务器）

  @Injectable()
  export class AuthService {
      private BASE_URL = "api/user";
  
      constructor(private http: HttpClient) {}
  
      getToken(): string {
          return localStorage.getItem("token");
      }
  
      login(email: string, pwd: string): Observable<any> {
          const url = `${this.BASE_URL}/login`;
          return this.http.post<User>(url, { email, pwd });
      }
  }

• effects侦听从Store调度的动作，执行某些逻辑，然后分派新动作

  • 一般情况下只在这里调用API

  • 通过返回一个action给reducer进行操作来改变store的状态

  • effects总是返回一个或多个action（除非@Effect with {dispatch: false})）

• @Effect()
  Login: Observable<any> = this.actions.pipe(
      ofType(AuthActionTypes.Login),   //执行Login响应
      map((action: Login) => action.payload),
      switchMap(payload => {
          return this.authService.login(payload.email, payload.password).pipe(
              map(user => {
                  return new LoginSuccess({ uid: user.id, email: payload.email });
              }),
              catchError(error => {
                  return of(new LoginFailure(error));
              })
          );
      })
  );
  
  //失败的效果
  @Effect({ dispatch: false })
  LoginFailure: Observable<any> = this.actions.pipe(ofType(AuthActionTypes.LoginFailure));
  
  //成功的效果
  @Effect({ dispatch: false })
  LoginSuccess: Observable<any> = this.actions.pipe(
      ofType(AuthActionTypes.LoginSuccess),
      tap(user => {
          localStorage.setItem("uid", user.payload.id);
          this.router.navigateByUrl("/sample");
      })
  );

  完

  更多编程相关知识，请访问：编程视频！！

  Das obige ist der detaillierte Inhalt vonVerstehen Sie in einem Artikel schnell das NgRx/Store-Framework in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!