119 votes

Comment puis-je conserver l'arborescence d'état redux lors de l'actualisation?

Le premier chef de Redux documentation est:

L'état de l'ensemble de votre application est stockée dans un arbre d'objets dans un seul magasin.

Et j'ai vraiment pensé que je comprends tous les directeurs d'école bien. Mais maintenant, je suis confus de ce que fait une application.

Si une application juste un peu compliqué partie du site web et des travaux en une seule page, je comprends. Mais que faire si une application ensemble du site? Dois-je utiliser LocalStorage ou de biscuits ou de quelque chose pour garder l'état de l'arbre? mais que faire si le navigateur ne prend pas en charge LocalStorage?

Je veux savoir comment les développeurs de maintenir leur état de l'arbre! :)

108voto

mgmcdermott Points 1054

Si vous souhaitez conserver votre état redux lors d'une actualisation du navigateur, il est préférable de le faire en utilisant un middleware redux. Découvrez le middleware redux-persist et redux-storage . Ils essaient tous les deux d'accomplir la même tâche de stockage de votre état redux afin qu'il puisse être enregistré et chargé à volonté.

89voto

Leo Points 6148

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

L'auteur original de l'emballage redux-stockage a décidé de rendre caduque le projet et n'est plus maintenu.

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 faire votre propre solution.

Tout ce que vous devez faire est de:

1 - Créer une fonction qui renvoie à l'état d' localStorage , puis passer l'état à l' createStores'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 les modifications de l'état, de sauver l'état d' 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 plutôt de l'utilisation de fonctions, j'ai écrit une classe très 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 l'amorçage de votre app...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

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

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

Espérons que cela aide quelqu'un

Performance Note

Si les changements d'état sont très fréquentes dans votre application, l'enregistrement de local de stockage trop souvent pourrait blesser les performances de votre application, surtout si l'état de l'objet graphique de sérialiser/désérialiser est grande. Pour ces cas, vous pourriez anti-rebond ou de gaz, la fonction qui permet d'économiser de l'état de localStorage l'aide d' RxJs, lodash ou quelque chose de similaire.

0voto

Barry Staes Points 763

La question d'origine est

Je veux savoir comment les développeurs de maintenir leur état de l'arbre! :)

Eh bien, puisque je ne vois pas cette réponse et vous fait utiliser le Réagir étiquette; souvent Réagir webapps sont mis en œuvre comme un SPA (Single Page Application) qui n'a pas vraiment d'actualiser le navigateur. Ils pourraient le faire apparaître comme si elle n'avait en changeant l'URL que vous voyez dans la barre d'adresse si. Une façon populaire pour ce faire est react-router.

Mais encore une SPA de l'état ne survit pas à un actualiser de votre navigateur, de sorte que c'est lors de l' redux-persist vient de.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X