Angular 状态管理：NgRx 核心概念与实战

• [Counter] 是命名空间，用于区分不同模块的 Action；
• props<T>() 用于定义 Action 的负载类型，确保类型校验。

4. Reducer：状态修改的 "纯函数"

Reducer 是纯函数，负责根据 Action 的类型，接收当前状态和Action，返回新状态。核心规则：

• 不修改原状态，始终返回新对象；
• 纯函数：相同输入必有相同输出，无副作用；
• 只处理同步逻辑。

定义 Reducer

// src/app/store/counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as CounterActions from './counter.actions';

// 定义状态类型
export interface CounterState {
  count: number;
}

// 初始状态
export const initialState: CounterState = {
  count: 0,
};

// 创建 Reducer
export const counterReducer = createReducer(
  initialState,
  // 处理 increment Action
  on(CounterActions.increment, (state) => ({ ...state, count: state.count + 1 })),
  // 处理 decrement Action
  on(CounterActions.decrement, (state) => ({ ...state, count: state.count - 1 })),
  // 处理 setCount Action（使用 payload）
  on(CounterActions.setCount, (state, { count }) => ({ ...state, count }))
);

• createReducer：接收初始状态和多个 on 函数，构建 Reducer；
• on(Action, reducerFn)：关联 Action 和对应的状态处理逻辑；
• 状态更新时使用 ...state 解构原状态，保证不可变（Immutable）。

5. Store：状态的 "单一数据源"

Store 是 NgRx 的核心，是应用状态的容器，遵循 "单一数据源" 原则 —— 整个应用的核心状态集中存储在一个 Store 中。

注册 Store 到 Angular 模块

首先在根模块中注册 Reducer，将其关联到 Store：

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './store/counter.reducer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 注册 Store，指定 reducer（key 为'counter'，对应状态树的节点）
    StoreModule.forRoot({ counter: counterReducer }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

• StoreModule.forRoot()：根模块中注册全局 Store，参数是 reducer 映射对象；
• { counter: counterReducer }：表示状态树中有一个 counter 节点，由 counterReducer 管理。

组件中使用 Store

组件通过注入 Store 服务，订阅状态或分发 Action：

// src/app/app.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import * as CounterActions from './store/counter.actions';
import { CounterState } from './store/counter.reducer';

@Component({
  selector: 'app-root',
  template: `
    <h1>NgRx Counter Demo</h1>
    <p>当前计数：{{ count$ | async }}</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
    <button (click)="setCount(10)">设置为 10</button>
  `,
})
export class AppComponent {
  // 订阅 counter 状态（使用 async 管道自动订阅/取消订阅）
  count$ = this.store.select((state) => state.counter.count);

  constructor(private store: Store<{ counter: CounterState }>) {}

  // 分发 increment Action
  increment() {
    this.store.dispatch(CounterActions.increment());
  }

  // 分发 decrement Action
  decrement() {
    this.store.dispatch(CounterActions.decrement());
  }

  // 分发带 payload 的 Action
  setCount(count: number) {
    this.store.dispatch(CounterActions.setCount({ count }));
  }
}

核心 API 说明：

• store.select(selector)：选择状态树中的指定节点，返回 Observable；
• store.dispatch(action)：分发 Action，触发 Reducer 修改状态；
• async 管道：简化 Observable 订阅，自动处理订阅 / 取消订阅，避免内存泄漏。

三、NgRx 调试：Store Devtools

为了更直观地调试状态变化，我们可以集成 NgRx Store Devtools（需配合浏览器扩展 Redux DevTools）：

1. 安装浏览器扩展：Chrome/Edge 商店搜索 "Redux DevTools" 并安装；
2. 模块中注册 Devtools：

// app.module.ts
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    // ...其他模块
    StoreModule.forRoot({ counter: counterReducer }),
    // 注册 Devtools，仅在开发环境启用
    StoreDevtoolsModule.instrument({
      maxAge: 25, // 保留最近 25 次状态变更
      logOnly: false, // 开发环境可修改状态，生产环境设为 true
    }),
  ],
})
export class AppModule {}

通过 Devtools，你可以：

• 查看每一次 Action 分发的时间、类型、payload；
• 回溯状态变更历史，甚至 "时光旅行"（回滚到指定状态）；
• 监控状态树的完整结构。

四、NgRx 核心原则回顾

1. 单一数据源：整个应用的核心状态集中在一个 Store 中，便于统一管理；
2. 状态只读：不能直接修改 Store 中的状态，只能通过分发 Action 触发修改；
3. 纯函数修改：Reducer 是纯函数，只负责根据 Action 计算新状态，无副作用。

五、什么时候用 NgRx？

NgRx 虽好，但并非所有 Angular 应用都需要：

• ✅ 适合：中大型应用、多组件共享状态、状态变更需可追溯、团队协作开发；
• ❌ 不适合：小型应用、简单的组件间通信、快速原型开发（会增加冗余代码）。

总结

1. NgRx 的核心是Store（状态容器）、Action（状态变更指令）、Reducer（纯函数修改状态），三者形成闭环，确保状态变更可预测；
2. Action 是修改状态的唯一入口，必须包含 type，可携带 payload；Reducer 是纯函数，始终返回新状态，不修改原状态；
3. Store 是单一数据源，组件通过 dispatch 分发 Action、select 订阅状态，实现与状态的解耦。

掌握 NgRx 的核心逻辑后，你还可以进一步学习 Effects（处理异步逻辑）、Entity（管理集合数据）、Selector（优化状态选择）等高级特性，让 Angular 应用的状态管理更上一层楼。