角度を使用してNGRXストアアーキテクチャの完全ガイド
5678 ワード
NGRXとは
NGRXは、反応性アプリケーションを構築するための角度フレームワークの一種です.NGRXは完璧なライブラリをサポートしています.
パッケージ
NGRXパッケージは主にこれらのカテゴリに分けられます
州
次の図を参照してください.
アクション
アクションはNGRXアーキテクチャの主なビルディングブロックの一つです.アクションは、我々のアプリケーション全体で発生するユニークなイベントを表します.
アクションはNGRXで多くの方法で使用されます.アクションは、NGRXのシステムの入力と出力です.アクションは、イベントがどのように我々のアプリケーションで処理されるかを理解するのに役立ちます.
アクションインターフェイス
NGRXでの動作は単純なインターフェースで作られます:
interface Action {
type: string;
}
以下にアクションの例を示します:
{
type: '[Auth API] Login Success'
}
{
type: '[Login Page] Login',
username: string;
password: string;
}
アクションを書き込む
あなたのアプリケーション内で効果的なアクションを記述するいくつかのルールがあります.
import { createAction, props } from '@ngrx/store';
export const login = createAction(
'[Login Page] Login',
props<{ username: string; password: string }>()
);
派遣時にアクションを返すには、アクション作成者を使用します.
onSubmit(username: string, password: string) {
store.dispatch(login({ username: username, password: password }));
}
返されるアクションは、アクションがどこから来たか、そして、どんな出来事が起こったかについて文脈を持ちます.
還元剤
NGRXの還元器は、我々のアプリケーションの1つの状態からもう一つの状態への遷移を扱うのに責任があります.還元関数は、どの動作を処理するかを決定することによって、これらの遷移を処理する.還元器は純粋な関数であり、与えられた入力に対して同じ出力を生成する.彼らは、それぞれの状態遷移を同期的に扱う副作用なしです.各還元子関数は現在の状態、最新のアクションを受け取り、新しく変更された状態または元の状態を返すかどうかを決定します.
セレクタ
セレクターは、ストア状態のピックアップのスライスに使用される純粋な関数です.この選択を最適化するために@ ngrx/storeはいくつかのヘルパー機能を提供します.状態セレクタのスライスを選択するとき、多くの特徴を提供する.特徴は:
結論
このブログでは、NGRXとNGRXストアとは何かを学びました.私たちは、NGRXパッケージのカテゴリを介して状態、データ、ビュー、開発者のツールのように行っている.我々はまた、アーキテクチャとその動作の主要なコンポーネントを学んだことが、縮小とセレクタの例です.
Reference
この問題について(角度を使用してNGRXストアアーキテクチャの完全ガイド), 我々は、より多くの情報をここで見つけました https://dev.to/tarungurang/a-complete-guide-on-ngrx-store-architecture-using-angular-1ha2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol