Ich stehe vor einem Problem, wie ich den Speicher aktualisieren kann, wenn ein Reaktiv-Router-Übergang auftritt.
Aktualisieren Sie in meiner aktuellen Implementierung (unten) den Speicher, bevor Sie die nächste Seite rendern. Das Problem tritt auf, wenn die aktuelle Seite eine Geschäftsaktualisierung basierend auf den Daten für die nächste Seite erhält: (1) die aktuelle Seite wird sinnlos gerendert (sie ist für Speicheraktualisierungen angemeldet), da der aktualisierte Speicher für die nächste Seite (2) ist Die aktuelle Seite wird beim Rendern unterbrochen, da der aktualisierte Speicher nur Daten für die nächste Seite enthält.
%Vor%Das Umgekehrte ist auch problematisch, rendern Sie die nächste Seite, bevor Sie den Laden aktualisieren. Das Problem besteht nun darin, dass die nächste Seite beim Rendern unterbrochen wird, da die Daten, die für die nächste Seite benötigt werden, nicht vorhanden sind, bis der Speicher aktualisiert wird.
Ich missbrauche die Bibliotheken entweder oder meine Architektur ist unvollständig oder etwas anderes. Hilfe!
Der Rest des Beispielcodes:
Sie können redux-thunk Middleware verwenden, um mehrere Aktionen nacheinander auszuführen
Weitere Informationen finden Sie im Abschnitt redux doc #Async-Aktionen .
So sieht Ihr Abruf-Datenaktions-Creator ungefähr so aus:
%Vor% Wie Sie sehen, ruft% store.dispatch(fetchSomeData('somePath')) automatisch zuerst fetchStarted auf, um den Spinner anzuzeigen. Wenn der Vorgang abgeschlossen ist, rufen Sie fetchSuccess(path) auf, um den Spinner zu verbergen, den Status zu aktualisieren, rerender ... usw. oder rufen Sie fetchError(err) auf, um eine Fehlermeldung anzuzeigen, und Sie können Aktionen aufrufen, um Routen an einer beliebigen Stelle in diesem Prozess zu ändern!
(Sie brauchen keinen redux-einfachen Router, wenn Sie es nicht mögen, können Sie history.pushState(null, '/some/path') anrufen, um die Route zu ändern, ich fand gerade Redux-Simple-Router wirklich praktisch, weil Sie nicht passieren müssen die Geschichte überall, plus Sie haben eine UPDATE_PATH Aktion, die Sie hören können, wenn Sie Routenänderungen verfolgen möchten)
Außerdem empfehle ich redux-simple-router , wenn du react-router mit redux verwendest, erlaubt es dir zuzusehen Die Route ändert sich mit dem Aktionstyp UPDATE_PATH und pushPath , um die Route zu ändern.
Außerdem habe ich bemerkt, dass Sie eine veraltete Version von react-router verwenden ...
Wenn Sie die neueste Version von react-router mit redux-simple-router (zusammen mit redux-thunk) verwenden möchten, lesen Sie dieses Repo !
Sie finden seine Store-Konfiguration, Router-Setup in diesen Dateien:
%Vor%Eine Lösung wäre, Ihre Seiten mit unvollständigen Daten kompatibel zu machen, bis die neuen Seitendaten abgerufen werden. Dann könnten Sie den neuen Pfad pushen und er würde sofort so viel wie möglich rendern, und Ihre UI-Komponenten rendern Spinner (oder etwas Ähnliches), bis die Daten für die nächste Seite abgerufen und an den Store gesendet werden. Beim zweiten Durchlauf wird die Seite vollständig neu gerendert.
Die andere Sache, die Ihnen in den Sinn kommt, ist, dass die Form Ihres Ladens idealerweise so ist, dass alle Ihre Seiten grundsätzlich mit allen möglichen Zuständen kompatibel sind, in denen sie sich befinden könnten, ohne Konflikte. Auf diese Weise können Sie beispielsweise Daten vorab abrufen, wodurch Möglichkeiten zur Minimierung der Übergangszeit und zum Zwischenspeichern vorheriger Ansichten gefunden werden können. Schließlich ist eine einseitige Architektur nicht besonders nützlich, wenn sie noch einen Umlauf erfordert.
Tags und Links reactjs redux react-router