Edit 25-août-2019
Comme indiqué dans l'un des commentaires. Le package d' origine redux-storage a été déplacé vers react-stack . Cette approche se concentre toujours sur la mise en œuvre de votre propre solution de gestion d'état.
Réponse originale
Bien que la réponse fournie était valide à un moment donné, il est important de noter que le package redux-storage d'origine a été abandonné et qu'il n'est plus maintenu ...
L'auteur original du paquet redux-storage a décidé de rendre le projet obsolète et n'est plus maintenu.
Maintenant, si vous ne voulez pas avoir de dépendances sur d'autres packages pour éviter des problèmes comme ceux-ci à l'avenir, il est très facile de déployer votre propre solution.
Tout ce que vous avez à faire est:
1- Créer une fonction qui retourne l'état de localStorage
puis passe l'état à la createStore
fonction redux de s dans le deuxième paramètre afin d'hydrater le magasin
const store = createStore(appReducers, state);
2- Écoutez les changements d'état et à chaque fois que l'état change, enregistrez l'état dans localStorage
store.subscribe(() => {
saveState(store.getState());
});
Et c'est tout ... J'utilise en fait quelque chose de similaire en production, mais au lieu d'utiliser des 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 {
}
};
}
}
puis lors du démarrage de 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, l'enregistrement trop fréquent sur le stockage local peut nuire aux performances de votre application, en particulier si le graphique d'objet d'état à sérialiser / désérialiser est volumineux. Pour ces cas, vous voudrez peut - être debounce ou accélérateur de la fonction qui permet d' économiser à l' état localStorage en utilisant RxJs
, lodash
ou quelque chose de similaire.