angular-state-management

Angular State Management - 现代 Angular 状态管理指南

技能概述

全面掌握现代 Angular 状态管理，从 Signal 本地状态到 NgRx 全局存储，涵盖 Signals、RxJS、NgRx Store 和服务器状态同步的最佳实践。

适用场景

1. 设置 Angular 全局状态管理

当需要为 Angular 应用配置全局状态时，该技能提供从简单 Signal Services 到完整 NgRx Store 的多种方案选择。根据项目规模和复杂度，帮助开发者选择最适合的状态管理架构，包括 Actions、Reducers、Effects 和 Selectors 的完整实现模式。

2. 组件级状态与共享状态

对于组件内部的本地状态或相关组件间的共享状态，提供基于 Angular Signals 的轻量级解决方案。涵盖简单的 Signal Service、Feature Signal Store 和 NgRx SignalStore 三种模式，帮助开发者避免过度设计，用最少的代码实现响应式状态管理。

3. 状态管理方案迁移与选择

当项目需要从旧的 RxJS BehaviorSubject 迁移到 Signals，或在 Signals、NgRx、Akita 之间做出选择时，该技能提供清晰的决策树和迁移路径。包括 Signals 与 RxJS 的互转方法（toSignal/toObservable），以及如何渐进式引入新的状态管理模式。

核心功能

1. Signal 状态管理

提供基于 Angular Signals 的三种状态管理模式：简单 Signal Service 适合基础计数器、开关等状态；Feature Signal Store 适合包含加载状态、错误处理的业务实体；NgRx SignalStore 则提供类型安全、功能组合的现代化状态管理方案。所有模式均支持 computed 计算属性和只读暴露。

2. NgRx Store 全局状态

涵盖传统 NgRx Store 的完整实现，包括 createActionGroup、createReducer、createSelector 和 Effects 的使用方法。提供 Feature Slice Pattern 最佳实践，支持 DevTools 调试、Actions 约束类型安全和纯函数 Reducer 设计。适合大型应用和复杂状态流转场景。

3. 服务器状态与乐观更新

处理 HTTP 请求与状态的同步问题，提供包含加载、数据、错误三种状态的 ApiState 模式。支持乐观更新（先更新后请求）和错误回滚机制，与 NgRx Query、RxAngular 等服务器状态库配合使用，解决缓存、重请求、自动失效等常见问题。

常见问题

Angular 小项目应该用什么状态管理？

小项目推荐使用 Signal Services。直接在根级别提供的服务中定义 signal() 和 computed()，通过 inject() 注入组件使用。这种方式无需额外依赖，代码简洁，满足大多数本地状态和简单共享状态的需求。

Signals 和 NgRx 有什么区别？

Signals 是 Angular 内置的响应式原语，适合本地状态和简单共享状态，无需订阅即可在模板中使用。NgRx Store 是基于 Redux 模式的全局状态管理方案，包含 Actions、Reducers、Effects，适合大型应用和复杂状态流转。选择建议：小型应用用 Signals，大型应用用 NgRx，中型应用可考虑 NgRx SignalStore 作为折中方案。

如何从 BehaviorSubject 迁移到 Signals？

将 new BehaviorSubject() 替换为 signal()，asObservable() 替换为 asReadonly()，next() 替换为 set() 或 update()。如需与现有 RxJS 代码互操作，使用 toSignal() 将 Observable 转为 Signal，或 toObservable() 将 Signal 转为 Observable。迁移可以渐进式进行，两种模式可以共存。

Component Store 适合什么场景？

Component Store（NgRx Component Store）适合单个功能模块的本地状态管理，比全局 Store 更轻量，比纯 Signals 更结构化。它提供 Updaters（更新状态）、Selectors（派生状态）和 Effects（副作用）三种方法，适合需要管理中等复杂度状态的 Feature 模块。