Angular 状态管理：NgRx 与服务

在构建中大型 Angular 应用时，数据流向的复杂性会随着功能模块的增加而急剧上升。组件之间的数据传递、异步请求的状态同步、用户操作的响应处理，这些问题如果没有一套清晰的管理机制，代码很快就会陷入难以维护的泥潭。Angular 提供了两种主流的状态管理路径：基于服务与 RxJS 的轻量级方案，以及基于 NgRx 的完整状态管理库。本文将深入剖析这两种方案的实现原理、使用场景与最佳实践，帮助你在项目中做出合理的技术选型。

为什么需要状态管理

在小型应用中，组件间的数据传递通常可以通过 @Input() 和 @Output() 勉强实现。然而，当应用规模扩大到几十个甚至上百个组件时，这套机制的弊端就会显露无遗。想象一个场景：用户在一个偏远角落的设置页面修改了主题色，这个变化需要即时反映到导航栏、多个内容区块甚至弹窗组件中。如果采用传统的 props 逐层传递，代码会变成一场灾难——中间层组件被迫接收大量与自身业务无关的数据，耦合度极高且极易出错。

状态管理的核心目标是将应用中分散的、临时的数据集中到一个可预测的"唯一数据源"中。所有组件都从这个数据源读取状态，并仅通过规范化的方式修改状态。这种架构带来的好处是显而易见的：数据流向清晰可追踪、状态变化可预测、调试时有据可查、单元测试时无需模拟复杂的组件树。

方案一：服务 + RxJS 模式

理解响应式服务架构

最轻量级的状态管理方案是利用 Angular 的依赖注入系统配合 RxJS 的响应式流。这种方案无需引入额外的库，学习曲线平缓，适合中小型应用或作为复杂应用的局部状态管理工具。

其核心思想很简单：创建一个单例服务，服务内部维护一个"状态流"；需要读取状态的组件订阅这个流；需要修改状态的地方向流中推送新的值。由于 RxJS 的 Observable 是惰性的，只有当有订阅者时才会触发数据推送，这天然避免了不必要的计算和渲染。

实现一个简单的状态服务

创建状态服务类

首先，定义一个服务来承载应用的核心状态。这里使用 BehaviorSubject 作为状态容器，它是 RxJS 中一个特殊的可观察对象，能够保存"当前值"并在新订阅时立即发射这个值，非常适合状态管理场景。

// user-state.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

interface UserState {
  currentUser: User | null;
  isLoading: boolean;
  error: string | null;
}

const initialState: UserState = {
  currentUser: null,
  isLoading: false,
  error: null
};

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  // 私有状态流，外部无法直接修改
  private state$ = new BehaviorSubject<UserState>(initialState);

  // 对外暴露可观察对象，只读访问
  currentUser$ = this.state$.pipe(map(state => state.currentUser));
  isLoading$ = this.state$.pipe(map(state => state.isLoading));
  error$ = this.state$.pipe(map(state => state.error));

  // 统一的状态获取方法
  getState(): UserState {
    return this.state$.getValue();
  }

  // 状态更新方法
  setUser(user: User): void {
    this.state$.next({
      ...this.getState(),
      currentUser: user,
      isLoading: false,
      error: null
    });
  }

  setLoading(loading: boolean): void {
    this.state$.next({
      ...this.getState(),
      isLoading: loading
    });
  }

  setError(error: string): void {
    this.state$.next({
      ...this.getState(),
      error,
      isLoading: false
    });
  }

  clearUser(): void {
    this.state$.next({
      ...initialState,
      currentUser: null
    });
  }
}

在组件中消费状态

组件通过依赖注入获取服务实例，然后订阅状态流。由于 Angular 的变更检测机制，我们需要确保在组件销毁时取消订阅，防止内存泄漏。

// user-profile.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserStateService } from './user-state.service';

@Component({
  selector: 'app-user-profile',
  template: `
    <div *ngIf="user$ | async as user; else loading">
      <h2>欢迎, {{ user.name }}</h2>
      <p>邮箱: {{ user.email }}</p>
      <p>角色: {{ user.role }}</p>
      <button (click)="logout()">退出登录</button>
    </div>
    <ng-template #loading>
      <p>加载中...</p>
    </ng-template>
  `
})
export class UserProfileComponent implements OnInit, OnDestroy {
  user$ = this.userState.currentUser$;
  private destroy$ = new Subject<void>();

  constructor(private userState: UserStateService) {}

  ngOnInit(): void {
    // 订阅错误状态
    this.userState.error$
      .pipe(takeUntil(this.destroy$))
      .subscribe(error => {
        if (error) {
          console.error('用户状态错误:', error);
        }
      });
  }

  logout(): void {
    this.userState.clearUser();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.userState.setLoading(true);
  }
}
```

### 服务模式的优缺点

这种方案的优势在于简单直观，不需要额外的配置和概念。开发者只需理解 Observable 和订阅的基本概念即可上手。服务就是普通的 TypeScript 类，测试时只需实例化并调用方法即可。但它也存在明显局限：当应用状态变得复杂时，所有的状态更新逻辑都会堆积在服务中，难以追踪哪些操作导致了状态变化。多人协作时，没有明确的规范约束，代码很容易变得混乱。此外，缺少内置的时间旅行调试工具，问题排查只能依赖日志。

---

## 方案二：NgRx 完整状态管理

### NgRx 的核心概念

NgRx 是 Angular 生态中最完整的状态管理库，它借鉴了 Redux 的核心理念，并针对 Angular 进行了深度优化。NgRx 的架构围绕几个核心概念构建：**Store** 是唯一的数据源，**Action** 描述发生了什么，**Reducer** 响应 Action 并更新状态，**Effect** 处理副作用（如 HTTP 请求），**Selector** 从 Store 中读取特定的状态切片。

这套架构的优势在于单向数据流和不可变状态。每次状态更新都会生成一个全新的状态对象，使得时间旅行调试、状态回放、热重载成为可能。Action 的显式定义让应用中发生的所有变化都有据可查，团队协作时能清晰看到每个功能的实现路径。

### 搭建 NgRx 基础结构

**定义 Actions**

Action 是描述"发生了什么"的对象。每个 Action 都有一个 `type` 属性，还可以携带任意数量的负载数据。

```typescript
// user.actions.ts
import { createAction, props } from '@ngrx/store';
import { User } from './user.model';

// 加载用户相关 Actions
export const loadUser = createAction(
  '[User Page] Load User',
  props<{ userId: number }>()
);

export const loadUserSuccess = createAction(
  '[User API] Load User Success',
  props<{ user: User }>()
);

export const loadUserFailure = createAction(
  '[User API] Load User Failure',
  props<{ error: string }>()
);

// 更新用户相关 Actions
export const updateUser = createAction(
  '[User Page] Update User',
  props<{ user: Partial<User> }>()
);

export const updateUserSuccess = createAction(
  '[User API] Update User Success',
  props<{ user: User }>()
);

export const logout = createAction('[User Page] Logout');
```

**实现 Reducer**

Reducer 是一个纯函数，接收当前状态和一个 Action，返回新的状态。由于必须返回新对象，不能直接修改原状态。

```typescript
// user.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { User } from './user.model';
import * as UserActions from './user.actions';

export interface UserState {
  currentUser: User | null;
  loading: boolean;
  error: string | null;
}

export const initialState: UserState = {
  currentUser: null,
  loading: false,
  error: null
};

export const userReducer = createReducer(
  initialState,

  on(UserActions.loadUser, (state) => ({
    ...state,
    loading: true,
    error: null
  })),

  on(UserActions.loadUserSuccess, (state, { user }) => ({
    ...state,
    currentUser: user,
    loading: false,
    error: null
  })),

  on(UserActions.loadUserFailure, (state, { error }) => ({
    ...state,
    loading: false,
    error
  })),

  on(UserActions.updateUser, (state) => ({
    ...state,
    loading: true
  })),

  on(UserActions.updateUserSuccess, (state, { user }) => ({
    ...state,
    currentUser: user,
    loading: false
  })),

  on(UserActions.logout, () => initialState)
);
```

**创建 Effects 处理副作用**

实际应用中，状态变更往往需要触发副作用操作，如 API 调用、路由跳转、浏览器存储操作等。Effects 负责监听特定 Action 并执行相应的副作用。

```typescript
// user.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError, tap } from 'rxjs/operators';
import { UserService } from './user.service';
import * as UserActions from './user.actions';
import { Router } from '@angular/router';

@Injectable()
export class UserEffects {

  loadUser$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.loadUser),
      mergeMap(({ userId }) =>
        this.userService.getUser(userId).pipe(
          map(user => UserActions.loadUserSuccess({ user })),
          catchError(error => of(UserActions.loadUserFailure({ error: error.message })))
        )
      )
    )
  );

  updateUser$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.updateUser),
      mergeMap(({ user }) =>
        this.userService.updateUser(user).pipe(
          map(updatedUser => UserActions.updateUserSuccess({ user: updatedUser })),
          catchError(error => of(UserActions.loadUserFailure({ error: error.message })))
        )
      )
    )
  );

  logout$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.logout),
      tap(() => {
        this.userService.clearSession();
        this.router.navigate(['/login']);
      })
    ),
    { dispatch: false }
  );

  constructor(
    private actions$: Actions,
    private userService: UserService,
    private router: Router
  ) {}
}

定义 Selectors

Selector 是从 Store 中提取数据的纯函数。它们可以组合、派生、记忆计算结果，是实现"只订阅必要状态更新"的关键。

// user.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { UserState } from './user.reducer';

export const selectUserState = createFeatureSelector<UserState>('user');

export const selectCurrentUser = createSelector(
  selectUserState,
  (state) => state.currentUser
);

export const selectIsLoading = createSelector(
  selectUserState,
  (state) => state.loading
);

export const selectError = createSelector(
  selectUserState,
  (state) => state.error
);

// 派生的复杂选择器
export const selectIsAdmin = createSelector(
  selectCurrentUser,
  (user) => user?.role === 'admin'
);

export const selectUserDisplayName = createSelector(
  selectCurrentUser,
  (user) => user ? `${user.name} (${user.email})` : '未登录'
);

在模块中注册

完成上述定义后，需要在 Angular 模块中注册这些 NgRx 元素。

// user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { userReducer } from './user.reducer';
import { UserEffects } from './user.effects';

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature('user', userReducer),
    EffectsModule.forFeature([UserEffects])
  ]
})
export class UserModule {}

根模块配置

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppComponent } from './app.component';
import { rootReducer } from './root.reducer';
import { RootEffects } from './root.effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(rootReducer),
    EffectsModule.forRoot([RootEffects]),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: false
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

NgRx 的开发体验工具

NgRx 提供了强大的开发工具，能够显著提升调试效率。@ngrx/store-devtools 允许你在浏览器开发者工具中查看每次状态变更的完整快照，包括前一个状态、执行的操作、后一个状态以及操作耗时。对于复杂的状态问题，这个工具能帮你快速定位是哪个 Action 导致了错误状态。

@ngrx/schematics 提供了命令行工具来自动生成 NgRx 相关的文件。执行 ng generate action user 会自动创建 Action 文件并添加必要的导入，节省了大量机械性工作同时也保证了文件结构的一致性。

对比与选型建议

何时选择服务 + RxJS 方案

如果你的应用满足以下特征，服务 + RxJS 的轻量级方案可能是更合适的选择。功能模块相对独立，跨模块的状态共享较少；团队对 Redux 模式不熟悉，学习成本需要控制；应用规模中小型，状态复杂度有限，不需要强大的调试工具。在这种场景下，轻量级方案能够以最小的心智负担实现状态管理的核心目标。

何时选择 NgRx

当应用进入中大型规模，状态管理带来的收益会远超其引入的复杂性。多团队协作开发时，规范化的状态更新流程能有效减少沟通成本和 bug 引入。复杂的数据流场景，如乐观更新、撤销/重做、本地状态同步等，NgRx 提供了开箱即用的解决方案。对可预测性和可测试性有高要求时，纯函数的 Reducer 和显式的 Action 让单元测试变得简单可靠。

混合使用策略

实际上，两种方案并非互斥。很多项目采用混合策略：全局核心状态使用 NgRx 管理，局部组件状态使用服务 + RxJS 管理。这种方式结合了两种方案的优势——NgRx 为全局状态提供规范化和可追溯性，服务方案则为局部状态保持轻量灵活性。

// 混合使用示例：全局用户状态用 NgRx，局部 UI 状态用服务
@Component({
  selector: 'app-user-profile',
  template: `...`
})
export class UserProfileComponent {
  // 全局状态：来自 NgRx Store
  user$ = this.store.select(selectCurrentUser);
  
  // 局部状态：仅当前组件使用的展开/折叠状态
  isExpanded$ = new BehaviorSubject<boolean>(false);

  constructor(private store: Store) {}
}

最佳实践总结

规范化的 Action 命名

采用 [来源] 操作名称的命名约定，如 [User Page] Login、[Auth API] Token Refresh、[Router] Navigation Complete。这种命名让每个 Action 的来龙去脉一目了然，团队成员能够快速定位问题所在模块。

保持 Reducer 纯粹

Reducer 必须是纯函数，不能包含任何副作用。日期获取、随机数生成、API 调用等功能都应该移到 Effects 中处理。这保证了 Reducer 的可测试性——给定相同的输入，必然产生相同的输出。

合理拆分状态

不要将所有状态堆积在一个大对象中。根据业务域将状态拆分为独立的功能模块，如 user、 products、 cart、 ui。每个模块有独立的 Actions、Reducers、Effects 和 Selectors，代码组织清晰，维护也更加容易。

使用 Selectors 进行状态派生

组件不应该直接处理原始状态，而是通过 Selector 读取派生数据。例如，与其让组件自己计算"购物车总价"，不如在 Selector 中定义这个计算逻辑，统一缓存计算结果，避免多处重复计算导致的性能问题。

及时取消订阅

无论是使用服务方案还是 NgRx，及时清理订阅是防止内存泄漏的基本准则。利用 AsyncPipe 自动管理订阅是最推荐的方式；当需要手动管理时，确保在 ngOnDestroy 中完成清理。

状态管理没有放之四海而皆准的最佳方案，只有最适合当前项目阶段和团队能力的方案。从服务 + RxJS 起步，随着应用增长逐步引入 NgRx，这种渐进式的架构演进往往比一步到位的过度设计更加务实。