Où écrire à localStorage dans un Redux de l'app?
Je veux persister certaines parties de mon état de l'arbre pour le localStorage. Quel est l'endroit le plus approprié pour le faire? Réducteur ou d'action?
Vous devez vous connecter pour publier un commentaire.
Réducteur n'est jamais un endroit approprié pour le faire parce que les réducteurs doivent être purs et sans effets secondaires.
Je recommande juste de le faire dans un abonné:
Avant la création de la boutique, lire ceux qui ont persisté parties:
Si vous utilisez
combineReducers()
vous remarquerez que les réducteurs qui n'ont pas reçu de l'état “démarrer” normalement en utilisant leur défautstate
valeur de l'argument. Cela peut être très pratique.Il est conseillé que vous antirebond de vos abonnés afin de ne pas écrire à localStorage trop vite, ou vous aurez des problèmes de performances.
Enfin, vous pouvez créer un middleware qui encapsule comme une alternative, mais j'aimerais commencer avec un abonné parce que c'est une solution plus simple et le travail bien.
À combler les vides de Dan Abramov de la réponse que vous pourriez utiliser
store.subscribe()
comme ceci:Avant de créer le magasin, vérifier
localStorage
et analyser JSON sous votre clé comme ceci:Vous ensuite de passer ce
peristedState
constante à votrecreateStore
méthode comme ceci:persistedState
retourinitialState
au lieu d'un objet vide? Sinon, je pense quecreateStore
sera initialisé avec cet objet vide.combineReducers
, il pourrait être initialisé avec{}
à nouveau depuis l'état initial a été défini au sein de chaque réducteur.TypeError: Cannot read property 'subscribe' of undefined
const store = createStore(reducer, persistedState)
) au-dessus de l'accès.subscribe
?persistedState
de{}
àundefined
en ternaire, pour bien fonctionner.En un mot: middleware.
Découvrez redux-persistent. Ou écrire votre propre.
[mise à JOUR le 18 Décembre 2016] Modifié pour supprimer la mention de deux projets similaires désormais inactif ou obsolète.
Si quelqu'un est d'avoir aucun problème avec les solutions ci-dessus, vous pouvez écrire votre propre. Laissez-moi vous montrer ce que j'ai fait. Ignorer
saga middleware
des choses juste à se concentrer sur deux choseslocalStorageMiddleware
etreHydrateStore
méthode. lelocalStorageMiddleware
tirez tous lesredux state
et la met danslocal storage
etrehydrateStore
tirez tous lesapplicationState
dans le local de stockage si le présent et le met dansredux store
localStorage
même lorsque rien dans le magasin a changé? Comment vous compenser inutiles écritJe ne peux pas répondre @Gardezi mais une option en fonction de son code pourrait être:
la différence est que nous sommes vient de sauver de certaines actions, vous pouvez utiliser un anti-rebond de la fonction pour enregistrer uniquement la dernière interaction de votre état