关于前端:Angular-Ngrx-Store-应用程序状态的一些典型例子

Angular 应用程序须要治理一些应用程序状态，包含服务器端数据、用户信息、用户输出、UI 状态和许多其余变量。开发人员常常利用可注入服务 (Injectable Service) 在一个集中的中央提供此性能（包含与一些后端 Web API 的通信），以便应用程序中的其余组件能够拜访此共享数据以对其进行解决或更新。、

这种做法仅仅实用于小型应用程序。在某些状况下，随着应用程序规模的增长以及多个组件开始收回调用以更新或读取应用程序状态，这种实现变得不可扩大。应用程序状态也可能变得不统一或不牢靠。

这就是咱们为何要引入 Ngrx Store.

应用程序状态是一组数据片段 (data slice) 的汇合，示意应用程序在任何给定工夫的状态。如前所述，应用程序状态能够是须要跨应用程序共享的任何数据切片：

• 服务器端响应数据：从 Web API 申请和返回的数据
• 用户信息：当用户登录应用程序时，存储用户名、电子邮件和其余与用户相干的信息。这使得用户稍后浏览和导航应用程序时能够快速访问。
• 用户输出：在任何搜寻页面上，用户输出搜寻的主题或短语，应用程序将后果作为列表显示在他们的屏幕上。当用户单击后果时，应用程序导航到另一个页面以查看抉择的详细信息。用户能够通过导航回到搜寻页面并从列表中抉择其余内容来查看另一个搜寻后果。
• UI 状态：风行的应用程序 UI 构造模式之一是具备垂直左侧菜单和右侧内容区域。提供一个按钮来最小化左侧菜单。左侧菜单的状态被存储，以便当用户导航到另一个屏幕或页面时，左侧菜单放弃最小化。
• 路由器 / 地位状态：当从一个屏幕导航到另一个屏幕时，应用程序会跟踪路由详细信息。状态须要跟踪用户抉择了哪个记录，以便晓得当前要渲染什么。

在 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;
}