Wie wählen Sie die Redux Zustand-shape für eine app mit Listen - /detail-Ansichten und die Paginierung?

Vorstellen, ich habe eine Anzahl der Einträge(z.B. Benutzer) in meiner Datenbank. Ich habe auch zwei Routen, eine für die Liste, andere für detail(wo man den Beitrag Bearbeiten). Jetzt bin ich mit zu kämpfen, wie der Ansatz der Daten-Struktur.

Ich bin denken der beiden Ansätze, und ein bisschen Kombination von beiden.

Freigegebenen Datensatz

Ich navigieren Sie zu /list alle meine Benutzer heruntergeladen werden, der von der api gespeichert, die in der redux-store unter dem Schlüssel users ich auch hinzufügen, eine Art von users_offset und users_limit Rendern nur ein Teil der von der Liste
Ich dann navigieren Sie zu /detail/<id>, und speichern currently_selected_user mit <id> als val... was bedeutet, ich werde in der Lage sein, um meine Benutzerdaten mit sowas users.find(res => res.id === currently_selected_user)
Aktualisierung ist einfach und schön, als gut, denn ich arbeite mit nur einem Datensatz und Details verweisen
hinzufügen eines neuen Benutzers auch einfach wieder nur mit der gleichen Liste von Benutzern

Nun habe ich das problem mit diesem Ansatz ist, dass, wenn die Liste der Benutzer bekommt riesige(sprich Millionen), es kann eine Weile dauern zu laden. Und auch, wenn ich Sie direkt /detail/<id> ich noch nicht, habe alle meine Benutzer heruntergeladen, so dass die Daten nur für das, was ich brauche, ich bin gonna haben, um den ersten download der ganzen Sache. Millionen von Nutzern einfach zu Bearbeiten.

Getrennt Datensatz

Ich navigieren Sie zu /list, und statt dem herunterladen alle meine Benutzer-api, ich lade nur ein paar von Ihnen, je nachdem, was meine users_per_page und users_current_page eingestellt werden würde, und ich würde wahrscheinlich speichern Sie die Daten als users_currently_visible
Ich dann navigieren Sie zu /detail/<id> speichern currently_selected_user mit <id> als val...und anstelle der Suche durch users_currently_visible ich einfach die download-Daten aus der api..
auf update, ich bin nicht gonna update users_currently_visible in irgendeiner Weise
noch werde ich auf hinzufügen

Was sehe ich als mögliches problem hier ist, dass ich bin gonna haben, um auf den Besuch /list -, download-Daten aus der api immer wieder, weil es vielleicht nicht in sync mit dem, was in der Datenbank, ich könnte auch unnötig herunterladen von Nutzer-Daten im detail an, denn Sie könnten übrigens schon in meinem users_currently_visible

eine Art frankenstein-y-Spielereien

Ich ausführlich, ich das gleiche tun wie in Getrennt Datensatz aber anstatt direkt herunterladen von user-Daten aus der api, die ich zunächst prüfen:
- habe ich users_currently_visible
- wenn dem so ist, gibt es einen user mit meiner id zwischen Ihnen?
  wenn beide Bedingungen erfüllt sind, dann verwende ich es als meine user-Daten, sonst mache ich die api-Aufruf
gleiche passiert auf update, überprüfe ich, ob mein user existiert zwischen users_currently_visible wenn ja, ich habe auch update-Liste, wenn ich nicht nichts tun

Diese würde wahrscheinlich funktionieren, aber nicht wirklich das Gefühl, es ist der richtige Weg. Ich würde wohl auch noch herunterladen müssen frische Liste der users_currently_visible beim Besuch /list, denn ich könnte Hinzugefügt haben, ein neues..

Gibt es eine fan-Lieblings-Weg, dies zu tun?... Ich bin mir sicher, dass jeder einzelne redux muss der Benutzer hat die gleichen Dinge.

Dank!

In unserer app sind wir derzeit mit der "getrennt-Daten-set" - Ansatz. Es macht mehr Aufrufe der API, aber es funktioniert. Aber trotzdem, es fühlt sich an wie der richtige Ansatz wäre, mit einem einzigen Daten-set. Ich bin mir nicht sicher, auf dieser auch.
Ich denke, es kommt darauf an, wie viele Einträge in der Datenbank, diese jsonplaceholder.typicode.com/photos 5000 Elemente und es ist schon 900 Kb..
Ja, du hast Recht. Aber konzeptionell, es fühlt sich an, dass der richtige Ansatz ist die Verwendung der gleichen Daten einstellen. Trotzdem, betrachten wir diese zwei Einträge im app-Zustand, wie die folgenden: eine kurze Liste enthält nur die Daten, die benötigt werden, um die Liste und ein detailliertes Objekt mit allen Requisiten, wenn Sie hinzufügen, Bearbeiten, etc. Es ist technisch besser, aber ich hätte gerne alle in nur einem Datensatz ohne performance Probleme 🙂

InformationsquelleAutor fxck | 2015-11-26

75

Bitte konsultieren Sie "real world" - Beispiel von Redux repo.

Es zeigt die Lösung für genau dieses problem.

Ihre Staatliche Form sollte wie folgt Aussehen:
```
{
  entities: {
    users: {
      1: { id: 1, name: 'Dan' },
      42: { id: 42, name: 'Mary' }
    }
  },
  visibleUsers: {
    ids: [1, 42],
    isFetching: false,
    offset: 0
  }
}
```
Hinweis: ich bin die Speicherung entities (ID -> Object maps) und visibleUsers (Beschreibung der momentan sichtbaren Benutzer mit Paginierung Staat und IDs) getrennt.

Dieser scheint, ähnlich wie Ihre "Freigegebene Daten setzen" - Ansatz. Aber ich glaube nicht, dass die Nachteile, die Sie Liste sind echte Probleme, die zu diesem Ansatz. Lassen Sie uns nehmen einen Blick auf Sie.

Nun habe ich das problem mit diesem Ansatz ist, dass, wenn dann die Liste der Benutzer bekommt riesige(sprich Millionen), es könnte eine Weile dauern, zum download

Brauchen Sie nicht, Sie alle zu laden! Die Zusammenführung aller heruntergeladenen Einheiten zu entities bedeutet nicht, sollten Sie Abfrage alle von Ihnen. Die entities sollte enthalten alle Elemente heruntergeladen wurden, so weit—nicht alle Entitäten in der Welt. Stattdessen, würde man nur downloaden Sie diejenigen, die Sie sind aktuell nach der Paginierung Informationen.

wenn ich Sie direkt auf /detail/, würde ich nicht noch alle meine Benutzer heruntergeladen, also um Daten, die nur für die eine, ich bin gonna haben, um Sie alle zum download. Millionen von Nutzern einfach zu Bearbeiten.

Ohne, würden Sie verlangen nur eine von Ihnen. Die response-Aktion würde Feuer, und reducer verantwortlich für entities würde Zusammenführen diese Einheit in den bestehenden Zustand. Nur weil state.entities.users enthalten mehr als einen Benutzer bedeutet nicht, Sie müssen downloaden Sie alle von Ihnen. Denken entities als einen cache, der nicht haben gefüllt werden.

Schließlich will ich Sie direkt wieder an die "real world" - Beispiel von Redux-repo. Es zeigt genau das, wie schreibt man einen Druckminderer für die Paginierung Informations-und entity-cache und wie zu normalisieren, JSON, in Ihren API-Antworten mit normalizr, so dass es einfach für Reduzierstücke zum extrahieren von Informationen von server-Aktionen in einer einheitlichen Weise.
- Dieses Beispiel ist toll, aber die Entitäten sammeln sich überstunden in den Staat. Wie können Sie entfernen Sie die Entitäten aus, die Sie nicht benötigen ?
- Das können Sie nicht. Wenn Ihre app verwendet werden soll, für Tage ohne schließen des Tabs, dieser Ansatz wird nicht für Sie arbeiten, und Sie könnte besser bedient, so was wie ein Relais. Oder Sie implementieren können, Ihre eigene Art von "garbage collection" auf der Oberseite von diesem Ansatz. Oder einfach nur aktualisieren Sie die Seite einmal in eine Weile :-).
- Aktualisiert link für die "real world" - Beispiel: github.com/reactjs/redux/tree/master/examples/real-world
- Also lassen Sie mich diese Fragen, was passiert, wenn ich wollen, um zu verfolgen userVideos wo auf der Grundlage der "real world" - Beispiel würde ich erstellen Paginierung hören für meine drei Liste videos Aktionen: LIST_VIDEOS_REQUEST, LIST_VIDEOS_SUCCESS und LIST_VIDEOS_ERROR. Dies funktioniert gut, bis ich habe eine andere Aktion eingestellt, dass ich aktualisieren soll der Staat zB. CREATE_VIDEO_SUCCESS
- Wie soll dies funktionieren, wenn Sie Ihre "master" - Einheit hat eine andere (kleinere, weniger detaillierte) Modell als deine "details" Entität? In diesem Fall würden Sie haben, keine Wahl aber verwenden Sie eine andere Scheibe des Staates für die "master" - und "details".
- Gedanken über das gleiche... Derzeit meine app holt die zwischengespeicherte Benutzer von entities.user[id] und verwendet es, um optimistisch füllen Sie die details-Seite, während Sie es tut, eine Anfrage im hintergrund zu Holen alle details. So entities.user enthält eine gemischte Tüte. Einige Benutzer haben nur einige Felder, andere Benutzer haben alle Felder (einmal, die details wurden geholt für). Der Vorteil dieser ist, dass Sie sehr schnell sehen, einige der details, die gefüllt in der details-Seite für jeden Benutzer, der wurde schon abgeholt. Die details-Seite immer ist eine fetch-Anfrage, so Entität wird up-to-date mit der DB.
- Das ist genau das problem, das ich mich jetzt gegenüber, in Bezug auf die Architektur meiner app. Wir haben einen Endpunkt gibt einige aggregierte Felder für die Ansicht der Liste (sagen wir, die Kategorien-Liste mit der aktuellen Anzahl der Produkte), aber die einzelnen Kategorie-Modell nicht haben, das Feld. Ich denke an die Aufrechterhaltung einer anderen Filiale für die Ansicht der Liste die Spuren, die Paginierung/search etc und anderen Speicher für die einzelnen Modelle.
InformationsquelleAutor Dan Abramov

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.