web-dev-qa-db-fra.com

Ngrx Store se réinitialise après l'actualisation du navigateur. Comment faire en sorte que l'application préserve l'état?

I Dispatch une action d'un composant

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

et dans l'autre composant, je sélectionne dans le magasin en utilisant

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

Cela fonctionne bien si mon application va séquentiellement en arrière ou en avant, mais une fois que je fais un navigateur, l'actualisation de l'état perd sa valeur. Comment conserver sa valeur pour qu'elle fonctionne lors de l'actualisation du navigateur?

angularreduxngrxngrx-store
10
INFOSYS

Votre magasin a une fonction subscribe qui sera appelée à chaque fois qu'une action est envoyée, et une partie de l'arborescence d'état peut potentiellement avoir changé. Pour une solution simple, vous pouvez conserver l'état sur le stockage local ici:

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

Documentation ici

Notez que vous devrez stringifier votre état pour le stocker dans le stockage local

Pour utiliser cet état, vous devrez passer l'état de stockage local localStorage.getItem('state') (s'il existe) comme état par défaut dans votre réducteur. Pour y parvenir, j'ai normalement une fonction d'assistance qui vérifie si un élément avec la clé "état" existe dans le stockage local et appelle JSON.parse sur la valeur si elle existe.

boîtier réducteur par défaut:

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

Aussi, après un rapide coup d'œil, il semble exister un middleware qui devrait réaliser ce que vous voulez: https://github.com/btroncone/ngrx-store-localstorage

18
hairmot