当前位置: 首页 > Web前端 > JavaScript

SAP电商云SpartacusUIStore

时间:2023-03-26 21:05:21 JavaScript

Storestate.ts相关设计细节Storestate.ts定义了SiteContext业务相关的State数据模型。定义数据模型的例程是:exportconstSITE_CONTEXT_FEATURE='siteContext';exportinterfaceStateWithSiteContext{[SITE_CONTEXT_FEATURE]:SiteContextState;}这是顶级状态模型。SiteContextState包含三个子状态:exportinterfaceSiteContextState{languages:LanguagesState;货币:CurrenciesState;baseSite:BaseSiteState;}以CurrenciesState为例,它不仅包含Entities列表,还包含当前激活状态的Currency:exportinterfaceCurrenciesState{entities:CurrencyEntities;activeCurrency:string;}重新定义Entities列表:exportinterfaceCurrencyEntities{[isocode:string]:Currency;}以上就是SiteContext域需要的State数据结构。注意SITE_CONTEXT_FEATURE的使用,除了在这个文件中定义featurestate之外,还用在了下面两个文件中:场景一:用来创建featureselector场景二:使用StoreModule.forFeature注册store:当使用createSelector和createFeatureSelector函数,@ngrx/store将跟踪调用选择器函数的最新参数。因为选择器是纯函数,所以当参数匹配时可以返回最后的结果而无需重新调用选择器函数。这可以提供性能优势,特别是对于执行昂贵计算的选择器。这种做法称为memoization。createFeatureSelector是一种返回顶级特征状态的便捷方法。它返回状态特征切片的类型化选择器函数。请注意,有两种方法可以编写对createFeatureSelector的调用。下面写法1的图2必须是1的切片,3的类型必须和2的类型一致:2的位置其实就是result的位置:写法2import{createSelector,createFeatureSelector}from'@ngrx/商店';exportconstfeatureKey='feature';exportinterfaceFeatureState{counter:number;}exportinterfaceAppState{feature:FeatureState;}exportconstselectFeature=createFeatureSelector(featureKey);导出常量selectFeatureCount=createSelector(selectFeature,(state:FeatureState)=>state.counter);我做了一个测试。在SAP电商云SpartacusUI项目中,两种写法完全等价:都可以编译成功: