Angular での状態管理に ngrx を使用する方法についての簡単な説明

関連する推奨事項: "angular チュートリアル "

ngrx/store は Redux からインスピレーションを受けており、RxJS を統合して開発された Angular 状態管理ライブラリです。 Angular エバンジェリスト Rob Wormald による。 Redux と同じ基本的な考え方を持っていますが、RxJS を使用してオブザーバー パターンを実装します。 Redux の核となる原則に従いますが、Angular 専用に設計されています。

Angular の状態管理のほとんどはサービスによって引き継がれます。一部の中規模および大規模プロジェクトでは、これによる欠点が明らかになります。その 1 つは、状態の流れが混沌としており、役に立たないことです。その後、redux の状態管理モデルを利用し、rxjs ストリーミング プログラミングの特性と組み合わせて、Angular の状態管理ツールである @ngrx/store を形成します。 #StoreModule:

StoreModule は @ngrx/store API のモジュールであり、アプリケーション モジュールで Reducer を構成するために使用されます。

• 
  アクション:

  アクションは状態の変化です。これはイベントの発生を説明しますが、アプリケーションの状態がどのように変化するかについては指定しません。

• 
  Store:

  これは、リデューサーと連携する Store.select() と Store.dispatch() を提供します。 Store.select() はセレクターを選択するために使用されます。
Store.dispatch(
• {

  
  type:'add',
  payload:{name:'111'}
  } )
  アクションをリデューサーに分散するために使用されるタイプ。
  
  
  
  

  @NgRx/Store 状態管理の 3 つの原則

まず、@NgRx/Store は Redux の 3 つの基本原則にも準拠しています。 :

単一データ ソース

この原則は、単一ページ アプリケーション全体の状態がオブジェクト ツリーの形式でストアに保存されるということです。
• この定義は非常に抽象的です。実際には、共有する必要があるすべてのデータを JavaScript オブジェクトの形式で保存することです。

state =
{
    application:'angular app',
    shoppingList:['apple', 'pear']
}

state は読み取り専用です (状態は読み取り専用です)。読み取り専用形式のみ)

ngrx/store の中核的な機能の 1 つは、ユーザーがステータスの内容を直接変更できないことです。たとえば、ログイン ページのステータスを保存する必要がある場合、ステータス情報にはログインしているユーザーの名前が記録される必要があります。ログイン名が変更された場合、状態に保存されているユーザー名を直接変更することはできません

• state={'username':'kat'},
  //用户重新登录别的账户为tom
  state.username = 'tom'  //在ngrx store 这个行为是绝对不允许的

変更は純粋な関数で行われます (状態は関数を呼び出すことによってのみ変更できます)

状態を直接変更できないため、ngrx/store にはレデューサー (アグリゲーター) と呼ばれる概念も導入されています。レデューサーを通じて状態を変更します。

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

ngrx/store の使用例

1. @ngrx/store をインストールします

yarn add @ngrx/store

2. 作成します状態、アクション、リデューサー

状態状態:

app\store\state.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;
//     // 如果要管理多个状态,在这个接口中添加即可
//   }

reducer

app\store\reducer.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;
  }
}

actions

アクションを個別に抽出する必要がある場合は、次を参照してください。 5アクションを切り離したい 出てきた時の対処法は？

3. ストアを登録します

ルート モジュール: app/app.module.ts

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 {}

4. ストアを使用します

使用するコンポーネントまたはサービスにストアを挿入します#app\module\article\article.component.ts コンポーネントを例として取り上げます:

// 组件级别
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: Observabled80b5def5ed1be6e26d91c2709f14170;

  constructor(private store: Store6076dd82de29ad27bc912ad957f38fdd) { // 注入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 });
  }
}

Template page:

app\module\article\article.component.html

a29455b745944c9a0d8e3afc470893ae

    6cfdf2a3cab4a4f728db77c1a4b50ad0增加Increment65281c5ac262bf6d81768915a4a77ac0
    dc6dce4a544fdca2df29d5ac0ea9906bCurrent Count: {{ count | async }}16b28748ea4df4d9c2150843fecfba68
    6a5a5a8f92e6df93009eca891f03f025减少Decrement65281c5ac262bf6d81768915a4a77ac0

    dd9bc48600714170fea322b8a3484257Reset Counter65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68

ここではパイプ シンボル async が使用されており、サブモジュールで直接使用するとエラーが直接報告されます。データの双方向バインディングがサブモジュールに実装されると、エラーも報告されます。特定の理由については、コースウェアで説明されている質問を参照してください: パイプ 'async' が見つかりませんか?

テンプレート ページでパイプを使用せずにページをレンダリングするにはどうすればよいですか?

次のように変更します:

count: Observabled80b5def5ed1be6e26d91c2709f14170;

constructor(private store: Store6076dd82de29ad27bc912ad957f38fdd) { // 注入store
    var stream = store.pipe(select('count')); 
    // 从app.module.ts中获取count状态流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }

管理の便宜上、タイプ、状態、アクション、リデューサーは通常、個別に管理されます

5アクションを分割するにはどうすればよいですか?

新しい \app\store\actions.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 }
// }

ルート モジュール app.module.ts
1. に登録します

import {CounterAction} from './store/actions';

... 

providers: [CounterAction],

コンポーネントで使用 –article.component.ts

2. import {CounterAction} from '../../store/actions';
   
   export class ArticleComponent implements OnInit {
   
     constructor(
       private action: CounterAction  //注入CounterAction
       ) { }
   
       increment() {
       // this.store.dispatch({ type: INCREMENT }); 
       //把 actions分离出去
       this.store.dispatch(this.action.Add()); 
       
     }
   }

プログラミング関連の知識の詳細については、

プログラミング ビデオ
3. をご覧ください。 ！

以上がAngular での状態管理に ngrx を使用する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。