Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ngrx Store Resets after browser refresh. How to make the application preserve the state?

Tags:

I Dispatch a action from one component

this.store.dispatch({type : STORE_TEAMCREST , payload : team.crestURI});

and in the other component i select from the store using

this.store.select(state => state.table.teamCrest).subscribe(data => this.teamCrest = data);

This works fine if my app is going sequentially backward or forward, but once i do a browser refresh the state loses it's value. How to preserve it's value so that it works on browser refresh?

like image 373
INFOSYS Avatar asked Aug 09 '17 09:08

INFOSYS


People also ask

What happens when page is refreshed in Angular?

An Angular application is a single-page application, and in the context of a single-page application the full app is loaded once, and data or screens are refreshed as the user uses your application. A browser refresh is the equivalent of shutting down your application and launching it again.


1 Answers

Your store has a subscribe function which will be called any time an action is dispatched, and some part of the state tree may potentially have changed. For a simple solution, you could persist the state to local storage here:

this.store.subscribe(function() {
    localStorage.setItem('state', JSON.stringify(this.store.getState()));
})

Documentation here

Notice that you will need to stringify your state to store it in local storage

To use this state, you will need to pass the local storage state localStorage.getItem('state') (if it exists) as your default state in your reducer. To achieve this, i normally have a helper function check whether an item with key 'state' exists in local storage and calls JSON.parse on the value if it exists.

default reducer case:

default:
        if (retrieveState()) {
            var newState = JSON.parse(retrieveState())          
            return newState
        }
        else {
            return {...whatever your default state is};
        }

Also after a quick look around, there does appear to exist a middleware which should achieve what you are wanting: https://github.com/btroncone/ngrx-store-localstorage

like image 113
hairmot Avatar answered Oct 06 '22 07:10

hairmot