Page reload writes default state to localStorage - Production ONLY
See original GitHub issue// 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",
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Why is localStorage getting cleared whenever I refresh the ...
When you reload the app/component both effects will run, and React state updates are processed asynchronously, so it's picking up the empty ...
Read more >Save State to LocalStorage & Persist on Refresh with React.js
Learn how to save React state and load it when a page refreshes using localStorage. We'll learn how to set up a simple...
Read more >How to Save State to LocalStorage & Persist on Refresh with ...
If we open our developer tools and go to the Application tab (in Chrome) and open the Local Storage section along with our...
Read more >Using localStorage with React Hooks - LogRocket Blog
Learn how using localStorage with React Hooks can persist user information in browser storage and share logic between multiple components.
Read more >ASP.NET Core Blazor state management - Microsoft Learn
localStorage is scoped to the browser's window. If the user reloads the page or closes and re-opens the browser, the state persists.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
Until this project becomes active again, here is a workaround …
Install the fix (by @nhaesler) – yarn add https://github.com/un33k/ngrx-store-localstorage
add this to your tsconfig.json
This will pull down the typescript and compile it alongside your project.