Page reload writes default state to localStorage - Production ONLY

// in root reducer

export class Storage implements Action {
  readonly type = '@ngrx/store/storage';
  constructor(readonly payload: string) { }
}

export function localStorageSyncReducer(reducer: ActionReducer<State>): ActionReducer<State> {
  return (state: State, action: any) => {
    const keys = ['session'];

    if (action.type === '@ngrx/store/storage' && keys.includes(action.payload)) {
      const rehydratedState = rehydrateApplicationState([action.payload], localStorage, k => k, false);
      return { ...state, ...rehydratedState };
    }
    return localStorageSync({ keys, rehydrate: true, })(reducer)(state, action);
  }
}

export const metaReducers: MetaReducer<State>[] = !environment.production
  ? [localStorageSyncReducer, logger, storeFreeze]
  : [localStorageSyncReducer];

// in session service
  constructor(public store: Store<SessionState>) {
    window.addEventListener('storage', (event) => {
      this.store.dispatch(new Storage(event.key));
    }, false);
  }

The above works great in development, however, in production, an extra action of type @ngrx/store/update-reducers is fired twice which preempts the rehydrate step which wipes the localStorage copy to the initial state. Resulting in the user log-out when the page is reloaded.

"ngrx-store-localstorage": "^0.3.0",

[btroncone]

@bufke @un33k Apologies for the delay, I have been super busy (as I’m sure we all are) and lost track of this project. If anyone would like to take over and start managing issues or PR’s I would be happy to make you a collaborator. I can oversee some PR’s but I’m not sure how much time I will have to make active contributions in the near future.

Please let me know, and thank you for your patience! 👍 @ernestomancebo

[un33k]

Until this project becomes active again, here is a workaround …

1. Install the fix (by @nhaesler) – yarn add https://github.com/un33k/ngrx-store-localstorage

2. add this to your tsconfig.json

    "baseUrl": "src",
    "paths": {
      "@ngrx-storage-workaround/*": [
        "../node_modules/ngrx-store-localstorage/src/*"
      ]

1. point to the new workaround package

import { localStorageSync, rehydrateApplicationState } from '@ngrx-storage-workaround/index';

This will pull down the typescript and compile it alongside your project.