Angular Ngrx Store应用状态典型示例详解

Angular 应用程序状态管理：最佳实践与解决方案

Angular 应用需要处理的状态种类相当丰富——包括服务端数据、用户信息、用户输入、UI 状态以及许多其他变量。不少开发者倾向于使用可注入服务（Injectable Service）来集中管理这些状态，同时与后端 Web API 通信，使得其他组件能够便捷地读取和修改共享数据。

坦白说，这种方式在小型项目中运行良好；然而当应用规模扩大后，多个组件同时发起调用以更新或读取状态时，其局限性便暴露无遗——扩展能力不足，状态也容易出现不一致甚至不可靠的问题。

在此背景下，Ngrx Store 作为专业的状态管理工具，正好能解决这些痛点。

应用状态本质上是一组数据片段的集合

应用状态可以理解为一系列数据切片（data slice）的集合，它代表了应用在某一时刻的完整快照。如前所述，任何需要在应用范围内共享的数据，都可以归类为状态切片：

• 服务器端响应数据：从 Web API 请求获取的数据。
• 用户信息：用户登录后存储的用户名、邮箱等，便于后续快速访问。
• 用户输入：例如搜索页面中用户输入的查询词，应用返回结果列表；用户点击某个结果跳转到详情页，再返回搜索页时，仍能保留之前的选择——这背后正是状态的支撑。
• UI 状态：常见的布局是左侧垂直菜单搭配右侧内容区，菜单的展开或收起状态需要持久化，这样用户导航到其他页面时，菜单状态不会丢失。
• 路由器/位置状态：路由详情需要记录用户选中了哪条记录，从而决定渲染什么内容。

典型应用状态切片示例

以 SAP 电商云 Spartacus UI 为例，其典型的应用状态切片结构如下所示。在 Site Context 场景中，定义位于 State.ts 文件里：

每个状态切片都有一个所谓的顶层状态（top state），称为 Feature State，通常用一个常量字符串表示：

export interface StateWithSiteContext {
  [SITE_CONTEXT_FEATURE]: SiteContextState;
}

而 SiteContextState 才是真正包含业务数据的 state 数据结构：

export interface SiteContextState {
  languages: LanguagesState;
  currencies: CurrenciesState;
  baseSite: BaseSiteState;
}