Angular は状態管理に ngrx/store を使用します-jsチュートリアル-php.cn

Angular は状態管理に ngrx/store を使用します

青灯夜游

リリース： 2021-02-01 11:44:25

転載

1909 人が閲覧しました

この記事では、Angular ngrx/store 状態管理の使用方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular は状態管理に ngrx/store を使用します

関連チュートリアルの推奨事項: 「angular チュートリアル」

Angular での状態管理に ngrx を使用する

はじめに

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

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

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

アクション:
アクションは状態の変化です。イベントの発生について説明しますが、アプリケーションの状態がどのように変化するかについては指定しません。
Store:
これは、リデューサーと連携する Store.select() と Store.dispatch() を提供します。 Store.select() はセレクターを選択するために使用されます。
{

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

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

単一データソース

この定義は非常に抽象的です。実際には、共有する必要があるすべてのデータを JavaScript オブジェクトの形式で保存することです。

state =
{
    application:&#39;angular app&#39;,
    shoppingList:[&#39;apple&#39;, &#39;pear&#39;]
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

ngrx/store の使用例

1. @ngrx/store

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

2 を追加します。ステート、アクション、リデューサーを作成します

ステート状態:

app\store\state.ts

//下面是使用接口的情况， 更规范
export interface TaskList {
  id: number;
  text: string;
  complete: boolean;
}

export const TASKSAll: TaskList[] = [
  {id: 1, text: &#39;Java Article 1&#39;, complete: false},
  {id: 2, text: &#39;Java Article 2&#39;, 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 &#39;@ngrx/store&#39;;

export const INCREMENT = &#39;INCREMENT&#39;;
export const DECREMENT = &#39;DECREMENT&#39;;
export const RESET = &#39;RESET&#39;;

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 &#39;@angular/core&#39;;
import { StoreModule } from &#39;@ngrx/store&#39;;
// StoreModule: StoreModule是@ngrx/storeAPI中的一个模块，
// 它被用来在应用模块中配置reducer。

import {counterReducer} from &#39;./store/reducer&#39;;

@NgModule({
  imports: [
  	StoreModule.forRoot({ count: counterReducer }), // 注册store
  ],
})
export class AppModule {}

ログイン後にコピー

4. ストアを使用します

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

// 组件级别
import { Component } from &#39;@angular/core&#39;;
import { Store, select } from &#39;@ngrx/store&#39;;
import { Observable } from &#39;rxjs&#39;;
import { INCREMENT, DECREMENT, RESET} from &#39;../../store/reducer&#39;;

interface AppState {
  count: number;
}

@Component({
  selector: &#39;app-article&#39;,
  templateUrl: &#39;./article.component.html&#39;,
  styleUrls: [&#39;./article.component.css&#39;]
})
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 });
  }
}

ログイン後にコピー

テンプレートpage:

app\module\article\article.component.html

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

ログイン後にコピー

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

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

#次のように変更します:

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

ログイン後にコピー

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

# ＃＃５アクションを分離したい場合はどうすればよいでしょうか。

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

ログイン後にコピー

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

に登録します

import {CounterAction} from &#39;./store/actions&#39;;

... 

providers: [CounterAction],

ログイン後にコピー

import {CounterAction} from &#39;../../store/actions&#39;;

export class ArticleComponent implements OnInit {

  constructor(
    private action: CounterAction  //注入CounterAction
    ) { }

    increment() {
    // this.store.dispatch({ type: INCREMENT }); 
    //把 actions分离出去
    this.store.dispatch(this.action.Add()); 
    
  }
}

ログイン後にコピー