NgRx Storeの基本

このレッスンでは、Angularアプリケーション向けの強力な状態管理ソリューションであるNgRxについて学びます。

NgRxとは

NgRxはReduxに着想を得たもので、Angularアプリケーションの状態を一元管理し、コンポーネント間のデータ処理を簡単にします。

NgRxを使う理由

• 状態を一元管理できる
• 明確で予測しやすいデータフロー
• デバッグとテストが容易

基本概念

NgRxには、次の主要な概念があります。

• Store：アプリケーションの状態を保持します
• Actions：イベントを記述します
• Reducers：状態の遷移を処理します
• Selectors：状態のデータを取得します

NgRx Storeのインストール

npmを使用してNgRxをインストールします。

npm install @ngrx/store --save

Storeの作成

アプリケーションモジュールでStoreを定義します。

StoreModule.forRoot({ appState: appReducer })

Actionsの作成

Actionsはアプリケーション内のイベントを定義します。

export const loadData = createAction('[App] Load Data');

Reducers

ReducersはActionsに応答して新しい状態を生成し、状態の変更を処理します。

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

まとめ

アプリの状態を効果的に管理するためのNgRx Storeの基本を学びました。よくできました。