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 的学习曲线较高，但在大型团队协作项目中能显著提升代码可维护性。