ActionsとReducers

ActionsとReducersを使って、NgRxアプリケーションの状態を管理する方法を学びます。

Actionsとは

Actionsは、データの読み込みやユーザー操作など、アプリケーション内で発生する固有のイベントや操作を記述します。

Actionsの作成

createAction()を使用してActionsを作成します。

export const login = createAction('[Login Page] Login');

Actionのペイロード

ペイロードを使用して、Actionsとともにデータを渡します。

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

ReducersはActionsに基づいて状態の遷移を処理します。既存の状態を直接変更せず、新しい状態を返します。

Reducersの作成

createReducerを使用して、状態の変更方法を定義します。

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

状態の更新

Reducersは必ず新しい状態オブジェクトを返す必要があります。既存の状態を直接変更してはいけません。

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Reducersの結合

複雑な状態を管理するために、複数のReducersを1つのルートReducerに結合します。

StoreModule.forRoot({ users: userReducer, posts: postReducer })

まとめ

NgRxを使用してAngularの状態を効果的に管理するために、ActionsとReducersを作成する方法を学びました。