NgRx 是一个 Redux 启发的 Angular 状态管理库。它将应用状态集中在单个不可变的 store 中，通过 RxJS 构建严格、可预测、单向的数据流。
Component dispatches an ACTION →
REDUCER produces new state (pure function) →
STORE updates →
SELECTORS read state →
Component re-renders
(EFFECTS handle side effects like HTTP, dispatching new actions)
{ createAction, props } ;
loadUsers = ();
loadUsersSuccess = (, props<{ : [] }>());
import { createReducer, on } from "@ngrx/store";
export const usersReducer = createReducer(
initialState,
on(loadUsers, state => ({ ...state, loading: true })),
on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
);
Reducers 是纯函数 —给定当前状态和一个 action，它们返回一个全新的状态对象（不可变地），从不改变旧的。
loadUsers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadUsers),
switchMap(() =>
this.api.getUsers().pipe(
map(users => loadUsersSuccess({ users })) // dispatch success with the data
)
)
)
);
Effects 监听 actions，执行异步工作（如 HTTP），并 dispatch 结果 actions —将副作用保持在 components 和 reducers 之外。
export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized
// component
users$ = this.store.select(selectUsers);
load() { this.store.dispatch(loadUsers()); }
<li *ngFor="let u of users$ | async">{{ u.name }}</li>
✓ Large apps with lots of shared state across many components
✓ Complex state interactions, need for time-travel debugging / strict predictability
✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler
（注意：NgRx 还提供了更轻量级的 SignalStore 和 ComponentStore 来减少模板代码。）
NgRx 将 Redux 的可预测、集中式、单向状态管理引入 Angular —对于许多 components 共享复杂状态的大型应用非常有价值，而且严格的可追溯性和调试也很重要。
但它带来了大量的模板代码，所以关键的判断是何时使用它（大型/复杂共享状态）与简单方法（带 signals 或 BehaviorSubject 的 services）相比，对于较小的应用。
理解 action→reducer→store→selector 的流程以及处理副作用的 effects 是在 NgRx 代码库中工作的核心。