SAP e-commerce cloud Spartacus UI Cart ID local storage storage

IsStable: first false, then true

 @NgModule()
export class CartPersistenceModule {
  static forRoot(): ModuleWithProviders<CartPersistenceModule> {
    return {
      ngModule: CartPersistenceModule,
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: cartStatePersistenceFactory,
          deps: [MultiCartStatePersistenceService, ConfigInitializerService],
          multi: true,
        },

The provided functions are injected at application startup and executed during application initialization. If any of these functions return a Promise or an Observable, the initialization will not complete until the Promise resolves or the Observable completes.

For example, we could create a factory function that loads language data or external configuration and provide that function to the APP_INITIALIZER token. This function is executed during application bootstrap and the required data is available at startup.

When the application is initialized, call cartStatePersistenceFactory :

The Angular framework calls all app initializers:

This init needs to return a promise object:

The next method of subscriber will be called in the toPromise object:

Call cartStatePersistenceService.initSync() :

Cart information is stored in local storage:

Data fetched from local storage:

Generate key:

No browser storage in SSR mode:

Take out the current active cart id stored in the browser's local storage: 2007

That is, the cart id highlighted in the following figure:

Different base sites have inconsistent cart ids.

After getting the cart id, call the onRead method:

First clear the Cart state:

Entering scheduleMessage, that is, using the store for Action dispatch, is likely to be an asynchronous process.

However, it does not enter the branch of the asynchronous schedule:

Call the scheduler's flush method directly:

Call the Observer's next method:

Recalculate the state and save the result:

 computedStates = recomputeStates(computedStates, minInvalidatedStateIndex, reducer, committedState, actionsById, stagedActionIds, skippedActionIds, errorHandler, isPaused);
        monitorState = monitorReducer(monitorState, liftedAction);

previous state:

Call the reducer to compute the next state:

This is the reducer implemented by Spartacus itself:

 export function reducer(
  state = initialState,
  action: CmsActions.LoadCmsPageDataSuccess
): EntityState<Page> {
  switch (action.type) {
    case CmsActions.LOAD_CMS_PAGE_DATA_SUCCESS: {
      const page: Page = action.payload;
      return { ...state, entities: { ...state.entities, [page.pageId]: page } };
    }
  }
  return state;
}

A number of corresponding reducers are executed in sequence: