Ich gehe davon aus, dass Sie asynchrone Aktionen verwenden, um Ihre API-Aufrufe zu verarbeiten.
Dies ist der Ort, wo ich die Cache-Logik setzen würde, was zu einer schönen Kapselung führt:
%Vor% Die Implementierung von isCached , getCached und setCached für Ihren lokalen Speicher sollte ziemlich einfach sein.
Die ideale Lösung hierfür ist meines Erachtens die Verwendung von Reselect selectors ( Ссылка ). Hier ist ein künstliches Beispiel:
Verwendet wie folgt:
%Vor% Beim ersten Start wird ein obj basierend auf einigen id (auch im Status) aus der Liste aller objs "ausgewählt". Wenn sich die Eingaben das nächste Mal nicht geändert haben (siehe Dokument für die Definition der Äquivalenz erneut auswählen), wird einfach der berechnete Wert vom letzten Mal zurückgegeben.
Sie haben auch die Möglichkeit, einen anderen Typ von Cache, z. LRU. Das ist ein bisschen fortgeschrittener, aber sehr machbar.
Der Hauptvorteil von Reselect besteht darin, dass Sie eine saubere Optimierung vornehmen können, ohne den zusätzlichen Status in Redux manuell zu verwalten, den Sie dann aktualisieren müssen, wenn eine Änderung an den ursprünglichen Daten vorgenommen wurde. Timos Antwort ist gut, aber ich würde argumentieren, dass die Schwäche ist, dass es keine teure clientseitige Berechnung zwischenspeichert (ich weiß, dass dies nicht die genaue Frage war), aber diese Antwort bezieht sich auf Best-Practice-Redux-Caching im Allgemeinen, angewendet auf Ihr Problem ), nur holen. Sie können etwas tun, was sehr ähnlich zu dem ist, was Timo vorschlägt, aber integrieren Sie wieder für eine sehr saubere Lösung. In einem Action Creator könnte man so etwas haben:
%Vor% Sie hätten einen Selektor speziell für hasObj , der möglicherweise auf dem obigen Selektor basiert (ich mache das hier speziell, um zu zeigen, wie Sie Selektoren leicht verfassen können), wie:
Sobald Sie beginnen, dies zu verwenden, um mit redux zu interagieren, macht es Sinn, sie auch in mapStateToProps selbst für einfache Selects zu verwenden, damit zu einem späteren Zeitpunkt die Art und Weise, wie dieser Zustand berechnet wird, nicht mehr benötigt wird Ändern von all der Komponenten, die diesen Status verwenden. Ein Beispiel hierfür könnte ein Array mit TODOs sein, wenn eine Liste in mehreren verschiedenen Komponenten gerendert wird. Später in Ihrem Anwendungsentwicklungsprozess erkennen Sie, dass Sie diese Liste von TODOs standardmäßig auf nur unvollständige Listen filtern möchten. Sie ändern die Auswahl an einer Stelle und Sie sind fertig.
Ich kam auf das gleiche Problem, bei dem ich eine Cache-Schicht zwischen meiner Aktion und dem Reducer hinzufügen wollte. Meine Lösung bestand darin, eine Middleware zu erstellen, um die Request-Aktion zwischenzuspeichern, bevor sie zum eigentlichen Thunk geht, der Daten von der API anfordert.
Dies hat die Nachteile, dass Sie Ihre bestehende Aktion und Reduzierer nicht ändern müssen. Sie fügen nur eine Middleware hinzu. So sieht die Middleware aus:
%Vor%Probieren Sie die Live-Demo auf Ссылка aus oder lesen Sie in meinem Blogbeitrag nach, um weitere Informationen zu erhalten Ссылка
Eine einfache und schnelle Möglichkeit, dies zu tun (obwohl für nichts skalierbar empfohlen):
Verwenden Sie redux-persist , um den Store zu speichern. Wann immer es rehydriert, wissen Sie, dass die Daten, die Sie zuvor hatten, vorhanden sind - lesen Sie die Dokumentation in dem Link für wie es funktioniert und wie es eingerichtet wird.
Um unnötige Datenabrufe auf dem Remote-Server zu vermeiden, können Sie die URLs ( wie Timos ) zwischenspeichern localStorage oder so, und einfach auf seine Existenz prüfen, bevor Sie den tatsächlichen Abruf durchführen.
Aktion:
%Vor%Einfacher benutzerdefinierter Cache für URLs:
%Vor%Sie müssten auch die zwischengespeicherte URL entfernen, wenn / wenn die reduc-persist-Daten gelöscht werden oder eine andere Sache, die die Daten "alt" macht.
Ich empfehle, die ganze Sache mit dem Redox-Speicher mit Persistenz zu machen und stattdessen die Reducer / Action-Logik zu modellieren. Es gibt viele Möglichkeiten, dies zu tun, und ich empfehle wärmstens redux, redux-saga und redux-persist und allgemeine Konzepte / Entwurfsmuster.
Nebenbemerkung zum Basisbeispiel: Sie können auch redux-persist-transform-expire für redux-persist verwenden, um zwischengespeicherte Daten zu einem bestimmten Zeitpunkt ablaufen zu lassen modifiziere es, um die relevante zwischengespeicherte URL währenddessen zu entfernen.
Tags und Links javascript redux