Angular应用需要管理一些应用状态,包括服务器端数据、用户信息、用户输入、UI状态和许多其他变量。开发人员经常利用InjectableServices在一个集中位置提供此功能(包括与某些后端WebAPI的通信),以便应用程序中的其余组件可以访问此共享数据以处理或更新它,这种方式只适合小型应用。在某些情况下,随着应用程序规模的增长和多个组件开始调用更新或读取应用程序状态,此实现变得不可扩展。应用程序状态也可能变得不一致或不可靠。这就是我们引入NgrxStore的原因。应用程序状态是表示应用程序在任何给定时间的状态的数据切片(dataslices)的集合。如前所述,应用程序状态可以是需要跨应用程序共享的任何数据片段:服务器端响应数据:从WebAPI请求和返回的数据用户信息:存储用户名、电子邮件和其他与用户相关的信息。这允许在用户稍后浏览和导航应用程序时快速访问。用户输入:在任何搜索页面上,用户输入要搜索的主题或短语,应用程序将结果显示为屏幕上的列表。当用户单击结果时,应用程序会导航到另一个页面以查看选择的详细信息。用户可以通过导航回搜索页面并从列表中选择其他内容来查看另一个搜索结果。UI状态:一种流行的应用程序UI结构模式是具有垂直的左侧菜单和右侧内容区域。提供一个按钮来最小化左侧菜单。存储左侧菜单的状态,以便当用户导航到另一个屏幕或页面时,左侧菜单保持最小化。路由器/位置状态:当从一个屏幕导航到另一个屏幕时,应用程序会跟踪路由详细信息。状态需要跟踪用户选择了哪条记录,以便它知道稍后要呈现什么。在SAP电子商务云SpartacusUI中,一个典型的应用程序状态切片包括以下示例。以SiteContext场景为例,在State.ts文件中定义:每个状态切片都有一个所谓的topstate,称为FeatureState,通常用常量字符串表示:exportinterfaceStateWithSiteContext{[SITE_CONTEXT_FEATURE]:SiteContextState;}SiteContextState是实际包含业务数据的状态数据结构:exportinterfaceSiteContextState{languages:LanguagesState;货币:CurrenciesState;baseSite:BaseSiteState;}
