NgRxはAngularエコシステムで最も人気の高い状態管理ソリューションであり、ReduxパターンとRxJSをベースにしています。

コアコンセプト

Action

export const loadUsers = createAction("[User] Load Users");
export const loadUsersSuccess = createAction(
  "[User] Load Users Success",
  props<{ users: User[] }>(),
);

Reducer

export const userReducer = createReducer(
  initialState,
  on(loadUsersSuccess, (state, { users }) => ({
    ...state,
    users,
    loading: false,
  })),
);

Effect

@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      switchMap(() =>
        this.userService.getUsers().pipe(
          map((users) => loadUsersSuccess({ users })),
          catchError((err) => of(loadUsersFailure({ error: err.message }))),
        ),
      ),
    ),
  );
}

Selector

export const selectUsers = createSelector(
  selectUserState,
  (state) => state.users,
);

// コンポーネントでの使用
this.users$ = this.store.select(selectUsers);

NgRxは学習コストが高いですが、大規模なチーム開発プロジェクトではコードの保守性を大幅に向上させます。