ngrx

@ngrx/store, @ngrx/effects, @ngrx/entity, @ngrx/signals

版本： 19.0.0（2025） 标签： 状态管理、Redux、响应式、Store、Effects

参考资料： 文档 — 指南、API • GitHub • GitHub Issues

API 变更

本节介绍近期特定版本的 API 变更。

• 新增：NgRx Signal Store — 使用 Signals API 实现现代、轻量级的状态管理，大幅减少样板代码 来源

• 新增：函数式 Effects — 使用函数式编程模式创建 effects 的现代方式

• 新增：withEntities — 用于 Signal Store 的实体管理，可简化集合的 CRUD 操作

• 新增：@ngrx/data — 通过自动 HTTP 集成简化实体 CRUD 操作

• 已弃用：经典 NgRx 模式 — 新项目请考虑迁移到 Signal Store

最佳实践

• 新项目使用 NgRx Signal Store — 将 NgRx 的结构与 Signals 的性能相结合

import { signalStore, withState, withMethods, withHooks } from '@ngrx/signals';

export const AuthStore = signalStore(
  withState({ user: null, isAuthenticated: false }),
  withMethods((store, authService = inject(AuthService)) => ({
    login(credentials: Credentials) {
      authService.login(credentials).pipe(
        tap(user => store.user.set(user))
      ).subscribe();
    }
  })),
  withHooks({
    onInit() {
      // Initialize store
    }
  })
);

• 使用 Entity Adapter 管理集合 — 简化实体集合的 CRUD 操作

import { createEntityAdapter, EntityState } from '@ngrx/entity';

export interface Product extends EntityState<Product> {
  // Additional state properties
}

export const adapter = createEntityAdapter<Product>({
  selectId: (product) => product.id
});

• 保持 reducers 纯净且同步 — 切勿在 reducers 中执行异步操作

• 使用 Effects 处理副作用 — 在 effects 中处理 HTTP 调用、导航及其他异步操作

• 使用强类型 actions — 创建 action groups 以提高类型安全性

• 为复杂数据规范化状态 — 将实体存储在以 ID 为索引的字典中

• 使用记忆化 selectors — 避免不必要的重复计算

• 使用 ChangeDetectionStrategy.OnPush — 与响应式状态配合良好