Page reload writes default state to localStorage - Production ONLY

[un33k]

// 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",

[un33k]

As per this related issue, when StoreDevtoolsModule is enabled, everything works.

[un33k]

Update:

@ngrx/store/update-reducers comes after @ngrx/store/init.

Where @ngrx/store/init rehydrates the state from the localStorage.
Then @ngrx/store/update-reducers comes in which is not handled by this module. That ends up sending undefined in, as the state where the reducer returns the default.

To reproduce, just comment out this line from your module.
StoreDevtoolsModule.instrument(...).

@btroncone what do you think?

[envil]

I have the exactly same issue, please fix soon! Thank you!

[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/*"
      ]

2. 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.

[bufke]

@btroncone I would be willing to help do maintenance work on this project if you want. I would not have time for reviewing feature work but I could review and merge regressions like this if you'd like. See my work here https://gitlab.com/bufke

[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

[tanyagray]

Thanks @un33k and @bufke :) The PR by @nhaesler has been merged and publish as v5.0.0.

[SADIK112]

can anyone help me how to use the ngrx local storage module to encrypt and decrypt my data.