Angular の NgRx/Store フレームワークを 1 つの記事で素早く理解する

Angular の NgRx/Store フレームワークとは何ですか?用途は何ですか?この記事では、NgRx/Store データ状態管理フレームワーク、ngrx/store の基本原則を理解し、例を通してフレームワークの簡単な使用法を学びます。

【関連チュートリアルの推奨事項: "angular チュートリアル"】

ngrx/store はいRedux からインスピレーションを得た、RxJS に基づく状態管理ライブラリ。 NgRx では、状態は action と reducer の関数を含むマップで構成されます。 Reducer 関数は、action と現在の状態または初期状態のディスパッチによって呼び出され、最終的に不変の状態が reducer によって返されます。

状態管理

大規模で複雑なフロントエンド Angular/AngularJS プロジェクトの状態管理は、常にイライラする仕事だった 頭痛の問題。 AngularJS (バージョン 1.x) では、状態管理は通常、サービス、イベント、$rootScope の組み合わせによって処理されます。 Angular (バージョン 2) では、コンポーネント通信により状態管理が明確になりますが、それでも少し複雑で、データ フローの方向に応じて多くの方法が使用されます。

ngrx/store の基本原則

ビュー層は dispatch を通じてアクションを開始し、Reducer がそれを受け取ります action は、action.type タイプに基づいて、実行を決定し、状態を変更し、新しい状態を store に返し、store# によって更新されます。 ＃＃ ＃＃州＃＃＃。

State

(state) は状態 (

state
• ) メモリ Action (動作) 状態の変化を記述します
• Reducer (リデューサー/リダクション関数) 以前の状態と現在の動作に基づいて新しい状態を計算します 内部のメソッドは純粋です 関数
• 状態は、State のオブザーバブル オブジェクトと
Action
• - Store のオブザーバーを使用して ## にアクセスします。 #Actions (動作)

Actions は情報の伝達手段であり、データを reducer

に送信し、

reducer が # を更新します。 ＃＃店＃＃＃。 Actions は、store がデータを受け入れることができる唯一の方法です。 ngrx/store の Action のインターフェイスは次のとおりです。

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

type 予想されるステータスの変更を説明します。タイプ。たとえば、To-Do ADD_TODO を追加したり、DECREMENT

を追加したりできます。

payload は、更新するために store に送信されるデータです。 storeaction をディスパッチするコードは次のようになります:

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

ReducersReducers

動作に対応する特定の状態変化を指定します。これは、前の状態を受け取り、次の状態として新しいオブジェクトを返す動作をディスパッチすることによって状態を変更する純粋な関数です。新しいオブジェクトは通常、

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 を使用してアクションを配布できます。また、ストアの select() メソッドを使用して監視可能なオブジェクトを取得し、サブスクライブして監視し、ステータスが変化した後に反応することもできます。

上で説明したのは基本的なプロセスです。実際の開発プロセスでは、API リクエストやブラウザ ストレージなどの非同期操作が含まれるため、

Effects と services が必要です。Effects

は

action で構成されます。 トリガー。一連のロジックを実行し、キューに追加する必要がある 1 つ以上の action を発行し、reducers によって処理します。 ngrx/store フレームワークを使用してアプリケーションを開発し、常に 1 つの状態のみを維持し、API 呼び出しを減らします。

#簡単な例

管理システムのログイン モジュールの簡単な紹介。

フォームの作成

1. コンポーネントを追加します:

LoginComponent

、主にレイアウト、コードはコンポーネント ロジックです

2. 定義します。ユーザー: ユーザーモデル

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");
      })
  );

  完

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

  以上がAngular の NgRx/Store フレームワークを 1 つの記事で素早く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。