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

Angular 应用程序需要管理一些应用程序状态

Angular 应用要处理的状态其实不少——服务端数据、用户信息、用户输入、UI 状态，还有一堆其他变量。很多开发者倾向于用可注入服务（Injectable Service）来集中管理这些状态，顺便跟后端 Web API 通信，让其他组件能方便地读写共享数据。

说实话，这种做法在小项目里还行，但一旦应用规模膨胀起来，多个组件同时发起调用去更新或读取状态，这种方案的弊端就暴露出来了——可扩展性差，状态也容易变得不一致、不可靠。

这时候，Ngrx Store 就该登场了。

应用程序状态是一组数据片段(data slice)的集合

应用状态说白了就是一组数据切片（data slice）的集合，代表应用在任意时刻的快照。前面提到过，凡是需要跨应用共享的数据，都可以归为状态切片：

• 服务器端响应数据：从 Web API 请求回来的数据。
• 用户信息：用户登录后存储的用户名、邮箱等，方便后续快速访问。
• 用户输入：比如搜索页上用户输入的查询词，应用返回结果列表，用户点击某个结果跳转到详情页，再返回搜索页时还能记住之前的选择——这背后就是状态在支撑。
• UI 状态：常见的布局模式是左侧垂直菜单 + 右侧内容区，菜单收起还是展开这个状态需要持久化，用户导航到其他页面时菜单状态不会丢失。
• 路由器/位置状态：路由详情需要记录用户选了哪条记录，才能知道渲染什么。

典型Application State slice

拿 SAP 电商云 Spartacus UI 来说，典型的 Application State slice 长这样。以 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;
}