当前位置：网站首页>Design details related to sap e-commerce cloud Spartacus UI store

Design details related to sap e-commerce cloud Spartacus UI store

2022-07-24 00:44:00 【51CTO】

Store

state.ts

Defines and Site Context Business related State Data model .

The routine of defining data model is ：

       
       export 
       
       const 
       
       SITE_CONTEXT_FEATURE 
       
       = 
       
       'siteContext';
       
       export 
       
       interface 
       
       StateWithSiteContext {
       
  [
       
       SITE_CONTEXT_FEATURE]: 
       
       SiteContextState;
       
}
      
1.
2.
3.
4.
5.

This is the top floor State Model .

SiteContextState It contains three sub State：

       
       export 
       
       interface 
       
       SiteContextState {
       
       languages: 
       
       LanguagesState;
       
       currencies: 
       
       CurrenciesState;
       
       baseSite: 
       
       BaseSiteState;
       
}
      
1.
2.
3.
4.
5.

With CurrenciesState For example , It's not just about Entities list , It also includes the current Active State of Currency：

       
       export 
       
       interface 
       
       CurrenciesState {
       
       entities: 
       
       CurrencyEntities;
       
       activeCurrency: 
       
       string;
       
}
      
1.
2.
3.
4.

Redefine Entities list ：

       
       export 
       
       interface 
       
       CurrencyEntities {
       
  [
       
       isocode: 
       
       string]: 
       
       Currency;
       
}
      
1.
2.
3.

That's all Site Context Required by the field State data structure .

Be careful SITE_CONTEXT_FEATURE Where to use , In addition to the definitions in this document feature state outside , It is also used in the following two files ：

SAP E-commerce cloud Spartacus UI Store Relevant design details _ development language

scene 1： Used to create feature selector：

SAP E-commerce cloud Spartacus UI Store Relevant design details _Angular_02

scene 2： Use StoreModule.forFeature register store：

SAP E-commerce cloud Spartacus UI Store Relevant design details _TypeScript_03

When using createSelector and createFeatureSelector Function time ,@ngrx/store It keeps track of the latest parameters that call the selector function . Because selectors are pure functions , So when the parameters match, the last result can be returned , Without having to call the selector function again . This provides a performance advantage , Especially for selectors that perform expensive calculations . This practice is called memoization.

createFeatureSelector Is to return to the top (Top Level) Of Feature State A convenient way . It is the characteristic slice of the state (Feature Slice) Returns a typed (typed) Selector function of .

Be careful createFeatureSelector There are two ways to write the call of .

How to write it 1

The figure below 2 Must be 1 A slice of , also 3 The type of must be the same as 2 The same type of ：

SAP E-commerce cloud Spartacus UI Store Relevant design details _javascript_04

2 The location of is actually result The location of ：

SAP E-commerce cloud Spartacus UI Store Relevant design details _javascript_05

How to write it 2

       
       import { 
       
       createSelector, 
       
       createFeatureSelector } 
       
       from 
       
       '@ngrx/store';
       
       export 
       
       const 
       
       featureKey 
       
       = 
       
       'feature';
       
       export 
       
       interface 
       
       FeatureState {
       
       counter: 
       
       number;
       
}
       
       export 
       
       interface 
       
       AppState {
       
       feature: 
       
       FeatureState;
       
}
       
       export 
       
       const 
       
       selectFeature 
       
       = 
       
       createFeatureSelector
       
       <
       
       AppState, 
       
       FeatureState
       
       >(
       
       featureKey);
       
       export 
       
       const 
       
       selectFeatureCount 
       
       = 
       
       createSelector(
       
       selectFeature,
       
  (
       
       state: 
       
       FeatureState) 
       
       => 
       
       state.
       
       counter
       
);
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.