Ich möchte einige Teile meines Statusbaums im localStorage beibehalten. Was ist der geeignete Ort dafür? Reduzierer oder Aktion?
quelle
Ich möchte einige Teile meines Statusbaums im localStorage beibehalten. Was ist der geeignete Ort dafür? Reduzierer oder Aktion?
Reduktionsmittel sind niemals ein geeigneter Ort, um dies zu tun, da Reduzierstücke rein sein sollten und keine Nebenwirkungen haben sollten.
Ich würde empfehlen, es nur in einem Abonnenten zu tun:
store.subscribe(() => {
// persist your state
})
Lesen Sie vor dem Erstellen des Geschäfts die folgenden Teile:
const persistedState = // ...
const store = createStore(reducer, persistedState)
Wenn Sie verwenden, werden combineReducers()
Sie feststellen, dass Reduzierungen, die den Status nicht erhalten haben, wie gewohnt mit ihrem Standardargumentwert "hochfahren" state
. Das kann sehr praktisch sein.
Es ist ratsam, dass Sie Ihren Abonnenten entprellen, damit Sie nicht zu schnell in localStorage schreiben, da sonst Leistungsprobleme auftreten.
Schließlich können Sie eine Middleware erstellen, die dies als Alternative kapselt. Ich würde jedoch mit einem Abonnenten beginnen, da dies eine einfachere Lösung ist und die Aufgabe gut erledigt.
Um die Lücken in Dan Abramovs Antwort zu füllen, könnten Sie Folgendes verwenden
store.subscribe()
:Überprüfen
localStorage
und analysieren Sie vor dem Erstellen des Speichers JSON unter Ihrem Schlüssel wie folgt:Sie übergeben diese
persistedState
Konstante danncreateStore
wie folgt an Ihre Methode:quelle
persistedState
zurückgebeninitialState
statt einem leeren Objekt? Ansonsten denke ich,createStore
wird mit diesem leeren Objekt initialisiert.Mit einem Wort: Middleware.
Schauen Sie sich Redux-Persist an . Oder schreibe deine eigenen.
[UPDATE 18 Dec 2016] Bearbeitet, um die Erwähnung von zwei ähnlichen Projekten zu entfernen, die jetzt inaktiv oder veraltet sind.
quelle
Wenn jemand Probleme mit den oben genannten Lösungen hat, können Sie Ihre eigenen schreiben. Lassen Sie mich Ihnen zeigen, was ich getan habe. Ignorieren Sie
saga middleware
Dinge, konzentrieren Sie sich nur auf zwei DingelocalStorageMiddleware
undreHydrateStore
Methoden. DaslocalStorageMiddleware
zieht allesredux state
und legt es einlocal storage
undrehydrateStore
zieht allesapplicationState
in den lokalen Speicher, falls vorhanden und legt es einredux store
quelle
localStorage
selbst wenn sich nichts im Laden geändert hat? Wie Sie unnötige Schreibvorgänge kompensierenIch kann @Gardezi nicht beantworten, aber eine Option, die auf seinem Code basiert, könnte sein:
Der Unterschied besteht darin, dass wir nur einige Aktionen speichern. Sie können eine Entprellungsfunktion verwenden, um nur die letzte Interaktion Ihres Status zu speichern
quelle
Ich bin etwas spät dran, habe aber einen dauerhaften Zustand gemäß den hier angegebenen Beispielen implementiert. Wenn Sie den Status nur alle X Sekunden aktualisieren möchten, kann dieser Ansatz Ihnen helfen:
Definieren Sie eine Wrapper-Funktion
Rufen Sie eine Wrapper-Funktion in Ihrem Abonnenten auf
In diesem Beispiel wird der Status höchstens alle 5 Sekunden aktualisiert , unabhängig davon, wie oft eine Aktualisierung ausgelöst wird.
quelle
(state) => { updateLocalStorage(store.getState()) }
inlodash.throttle
etwa so aus :store.subscribe(throttle(() => {(state) => { updateLocalStorage(store.getState())} }
und entfernen Zeitlogik innerhalb überprüfen.Aufbauend auf den hervorragenden Vorschlägen und Kurzcode- Auszügen, die in anderen Antworten (und in Jam Creencias Medium-Artikel ) enthalten sind, finden Sie hier eine vollständige Lösung!
Wir benötigen eine Datei mit 2 Funktionen, die den Status im / vom lokalen Speicher speichern / laden:
Diese Funktionen werden von store.js importiert, in dem wir unseren Store konfigurieren:
HINWEIS: Sie müssen eine Abhängigkeit hinzufügen:
npm install lodash.throttle
Der Store wird in index.js importiert, damit er an den Provider übergeben werden kann, der App.js umschließt :
Beachten Sie, dass für absolute Importe diese Änderung in YourProjectFolder / jsconfig.json erforderlich ist. Hier erfahren Sie, wo nach Dateien gesucht werden muss, wenn sie zuerst nicht gefunden werden können. Andernfalls werden Beschwerden über den Versuch angezeigt, etwas von außerhalb von src zu importieren .
quelle