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

Question

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?

Answer 1

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