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

This is the top floor State Model .

SiteContextState It contains three sub State：

export interface SiteContextState {
    
  languages: LanguagesState;
  currencies: CurrenciesState;
  baseSite: BaseSiteState;
}

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

Redefine Entities list ：

export interface CurrencyEntities {
    
  [isocode: string]: Currency;
}

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 ：

scene 1： Used to create feature selector：

scene 2： Use StoreModule.forFeature register store：

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 ：

2 The location of is actually result The location of ：

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
);

I did a test , stay SAP E-commerce cloud Spartacus UI In the project , The two expressions are completely equivalent ：

Can be successfully compiled ：