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' 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 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.