Bug with Lazy Loaded feature modules

Hello,

The following PR introduced a bug related to lazy loaded feature modules: https://github.com/btroncone/ngrx-store-localstorage/pull/76/files

The net effect of this PR is to re-hydrate the state when every feature module is loaded, and this breaks sections of the state which are selectively serialized (localStorageSync({keys: [{todos: ['name', 'status'] }, ... ]}))).

The result is the state being rehydrated and deleting all other keys not in local storage.

[btroncone]

@bmalinconico Really looking for another extra set of eyes that is using this library every day. Need help determining priority and impact of some of the proposed PR’s / issues.

[ivayloc]

I am using ngrx-store-localstorage with NX workspace and I tried all workarounds but still can’t make it work with lazyloaded modules in the case when I want to rehydrate specific slices from the state, on page refresh the initial state is being replaced by the saved slices from the localstorage.

The root store is called merchant and the feature store is called onboarding.

This is my setup:

merchant.meta-reducers.ts - for the host app

const INIT_ACTION = '@ngrx/store/init';
const UPDATE_ACTION = '@ngrx/store/update-reducers';

const mergeReducer = (state: any, rehydratedState: any, action: any) => {
  if (
    (action.type === INIT_ACTION || action.type === UPDATE_ACTION) &&
    rehydratedState
  ) {
    state = merge(state, rehydratedState);
  }
  return state;
};

export function sessionStorageSyncReducer(
  reducer: ActionReducer<any>
): ActionReducer<any> {
  return localStorageSync({
    keys: [
      {
        merchant: [
          { authProcess: ['id'] },
          { stepTasks: [{ 0: ['id'] }] },
          { registrationDetails: ['email'] },
        ],
      },
      {
        onboarding: [
          { onboardingProcess: ['id'] },
          { stepTasks: [{ 0: ['id'] }] },
        ],
      },
    ],
    rehydrate: true,
    removeOnUndefined: true,
    storage: sessionStorage,
    mergeReducer,
  })(reducer);

app.module.ts - host app

    StoreModule.forRoot(
      { merchant: merchantsReducer },
      {
        metaReducers: [sessionStorageSyncReducer],
        runtimeChecks: {
          strictActionImmutability: true,
          strictStateImmutability: true,
        },
      }
    ),

entry.module.ts

    StoreModule.forFeature(
      'onboarding',
      onboardingReducer,
      {
        metaReducers: [sessionStorageSyncReducer],
        initialState,
      }
    ),

onboarding.meta-reducer.ts - metareducer for the lazyloaded module

export function sessionStorageSyncReducer(
  reducer: ActionReducer<any>
): ActionReducer<any> {
  return localStorageSync({
    keys: [
      {
        onboarding: [
          { onboardingProcess: ['id'] },
          { stepTasks: [{ 0: ['id'] }] },
        ],
      },
    ],
    rehydrate: true,
    storage: sessionStorage,
  })(reducer);
}

export const metaReducers: Array<MetaReducer<any, any>> = [
  sessionStorageSyncReducer,
];