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

angular redux ngrx ngrx-store
INFOSYS picture INFOSYS · Aug 9, 2017 · Viewed 18.3k times · Source

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

hairmot picture hairmot · Aug 9, 2017

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

Related questions

Why must must ngrx / redux effects return actions? Is using a noop action like elm considered bad practice?

I'm using a redux-style state management design with Angular and ngrx/store and ngrx/effects. Whenever I don't return an action from an effect, I get an error: Cannot read property 'type' of undefined I researched the issue and found …

Read More
dispatch multiple actions in one effect

I would like to diapatch two actions in one effect. Currently I have to declare two effects to achieve this : // first effect @Effect() action1$ = this.actions$ .ofType(CoreActionTypes.MY_ACTION) .map(res => { return { type: "ACTION_ONE"} }) .catch(() => Observable.…

Read More
What is store.select in ngrx

I'm new to Redux and started with ngrx. I'm unable to understand the meaning of this line of code store.select: clock: Observable<Date>; this.clock = store.select('clock');

Read More