Comment puis-je persister Redux state tree sur refresh?

alors que la réponse fournie était valide à un moment donné, il est important de noter que le redux-stockage le paquet a été abandonné et il n'est plus maintenu...

l'auteur original du paquet redux-storage a décidé de déprécier le projet et de ne plus le maintenir.

Maintenant, si vous ne voulez pas avoir de dépendances sur d'autres paquets pour éviter de tels problèmes à l'avenir, il est très facile de rouler votre propre solution.

Tout ce que vous devez faire c'est:

1 - Créer une fonction qui renvoie l'état de localStorage puis passez l'État à createStore's redux fonction dans le second paramètre afin d'hydrater le magasin

 const store = createStore(appReducers, state);

2 - écouter les changements d'état et chaque fois que l'état change, enregistrer l'État à localStorage

store.subscribe(() => {
    //this is just a function that saves state to localStorage
    saveState(store.getState());
}); 

Et c'est tout...J'utilise en fait quelque chose de similaire dans la production, mais au lieu d'utiliser des fonctions, j'ai écrit un très classe simple comme ci-dessous...

class StateLoader {

    loadState() {
        try {
            let serializedState = localStorage.getItem("http://contoso.com:state");

            if (serializedState === null) {
                return this.initializeState();
            }

            return JSON.parse(serializedState);
        }
        catch (err) {
            return this.initializeState();
        }
    }

    saveState(state) {
        try {
            let serializedState = JSON.stringify(state);
            localStorage.setItem("http://contoso.com:state", serializedState);

        }
        catch (err) {
        }
    }

    initializeState() {
        return {
              //state object
            }
        };
    }
}

et puis quand bootstrapping votre application...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

let store = createStore(appReducers, stateLoader.loadState());

store.subscribe(() => {
    stateLoader.saveState(store.getState());
});

j'Espère que ça aide quelqu'un

Note De Performance

si les changements d'état sont très fréquents dans votre application, économiser trop souvent sur le stockage local pourrait nuire aux performances de votre application, surtout si le graphe d'objet d'État à serialize/deserialize est grand. Pour ces cas, vous voudrez peut-être déverrouiller ou étrangler la fonction qui sauve l'état de localStorage à l'aide de RxJs,lodash ou quelque chose de similaire.

la question originale est

je veux savoir comment les développeurs gardent leur arbre d'état! :)

bien puisque je ne vois pas cette réponse et que vous avez utilisé L'étiquette React; les webapps React sont souvent implémentés comme une application SPA (Single Page) qui ne rafraîchit pas vraiment le navigateur. Ils pourraient le faire apparaître comme si elle n' en changeant l'URL que vous voyez dans la barre d'adresse. Une façon populaire de le faire est react-router.

mais quand même un État SPA ne survit pas à un rafraîchissement du navigateur, donc c'est quand redux-persist vient dans.