How to not lose NgRx state after page reload?

I am developing an Ionic Application with Angular and i want that if the user refreshes the page, the state of the app before the refresh gets loaded again. For state management i am using NgRx. The problem is that everytime I reload my page the state gets reset into the initialState of the App.

So i save the state to the localstorage everytime it changes with the following code inside the onInit function of my app.component.ts:

this.store.subscribe(state => {
localStorage.setItem('appState', JSON.stringify(state))
})


This works just fine and when i check the localstorage of my browser there is the right data inside of it.

To then retrieve the state after the reload i use this initializer function chatGPT recommended to me:

export function appInitializer(store: Store<AppState>): () => Promise<void> {
return (): Promise<void> => {
return new Promise<void>((resolve) => {
const savedState = localStorage.getItem('appState');
if (savedState) {
let state: AppState = JSON.parse(savedState);
console.log(state);
store.dispatch(setState({state}));
}
resolve();
});
};
}


This is called correctly, i know that because of the console.log which also always logs the data i want to set my store to.

So then my only problem should be the "setState" action(which i know gets called because I am using NgRx Devtools)Devtools Screenshot of my store right? It looks like this:

actions.ts:

export const setState = createAction("[App] setState", props<{state:AppState}>());


reducers.ts:

const initialState: AppState = AppInitialState;

const reducer = createReducer(initialState,
on(setState, (currentState, action) => {

return {
...currentState,
loading:{
show: action.state.loading.show,
},
login: {
error: action.state.login.error,
isLoggedIn: action.state.login.isLoggedIn,
isLoggingIn: action.state.login.isLoggingIn
}
}
})
)

export function mainReducer(state:AppState, action: Action){
return reducer(state, action);
}


AppState.ts:

export interface AppState {
loading:LoadingState;
login: LoginState;
}


LoadingState.ts:

export interface LoadingState{
show: boolean;
}


LoginState.ts:

export interface LoginState{
isLoggingIn: boolean;
isLoggedIn: boolean;
error: any;
}


Does someone know where I made the mistake?

Continue reading...