Wie die Struktur der Paginierung Staat in Redux

TL;DR: Wie Sie speichern Paginierung Staat in einer Redux-store ein großes, normalisierten Zustand Baum mit vielen Ressourcen, und mehrere Ansichten anzeigen verschiedener paginiert Ergebnisse?

Frage ich mich, was ist der beste Weg, um Paginierung von Daten in einer Redux-Shop. Dieser Artikel schreibt die Speicherung Paginierung info als eigene Unterstruktur innerhalb der staatlichen Struktur. Ich Stimme mit dieser Methode, aber hier, wo ich widersprechen: der Artikel schlägt vor, keying die Paginierung Teilbaum von der Art der Ressource, mit Seitenzahlen, aber was ist, wenn es mehrere Ansichten, die Anzeige paginiert Daten von der gleichen Ressource mit unterschiedlichen Parametern? Wenn Sie die Artikel Folgen einer Methode, Ihren Zustand Baum kann am Ende Aussehen wie diese

{
  pagination: 
     todos: 
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
     users:
       count: 200,
       nextPageUrl: ...,
       result: [list of id's]
}

Scheint dies nicht für mich Sinn machen, wenn Sie haben mehrere Möglichkeiten zum anzeigen der gleichen Ressource. Was ist, wenn auf einem Bildschirm mehrere Tabellen anzeigen todos wurden geholt mit unterschiedlichen Parametern? Zum Beispiel, eine Tabelle, zeigt todos wurden, holte aus /api/todos/?userId=1 und anderen zeigt todos aus /api/todos/?userId=2.

Angesichts des oben genannten Problems, es scheint, dass eine Lösung für die weitere flexible Paginierung zu speichern Paginierung Staat auf einer pro-Komponenten-basis statt einer pro-Einheit-basis. So Ihr Zustand könnte in etwa so Aussehen

{
  pagination:
    componentId:
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
    anotherComponentId:
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
}

Natürlich, Speicherung Paginierung Ergebnisse wie dieses verliert Kontext, was ist mit Seitenzahlen. Aber ist das so ein problem? Wie gehen Sie über das umbrechen eines großen Staates Baum mit potenziell mehreren paginiert Ergebnisse von der gleichen Ressource? Danke!

Ich versuche, nicht zu denken in Bezug auf Personen, Ressourcen und Komponenten, so viel wie Blick auf. So ist jede Ansicht, die Sie bekommen können das eigene Paginierung. Ich denke, es ist ähnlich zu dem zweiten Beispiel oben, außer es ist nicht 1:1 gebunden an eine Komponente. Zum Beispiel könnten Sie haben eine TodoList-Komponente, die mehrere verschiedene Ansichten (d.h. es wird angezeigt, an verschiedenen Orten auf der Seite mit den unterschiedlichen Kontext, in jedem Ort).
Genau das hab ich auch gedacht, aber ich bin mir nicht sicher, wie diese Komponente erstellen können, es ist einzigartig Paginierung key innerhalb des Redux-Zustand. Wenn Sie mehrere TodoList-Komponenten innerhalb einer Seite, was wäre die mapStateToProps Funktion Aussehen? Würde der übergeordneten Komponente liefern jede TodoList-Komponente mit einer einzigartigen key requisite, die von der Komponente verwendet wird, die innerhalb mapStateToProps zu greifen, die Paginierung Staat?
Ich denke, jede Ansicht erhält seine eigene reducer, und mit combineReducers jede Ansicht erhält seine eigene Scheibe des Staates.

InformationsquelleAutor Mitch W. | 2018-01-17

  1. 3

    Ich denke, dass redux-Cache-Paginierung (Demo hier) kann helfen, zu bewältigen mit Ihrem problem. Normalisiert Suchergebnisse gespeichert werden, die in redux in einen Baum:

    {
  standard_store: {
    pagination: {
      searchPhrase__: {//results for given search params
        lastUpdateTime: 1516177824890,//last update time helps to refresh data in background
        pages: {    //each page is stored. You can adjust history length
          '1': {
            isFetching: false,//each page has fetching status
            isRefreshing: false,
            isSuccess: true,
            isFailed: false,
            lastUpdateTime: 1516177824891,
            elements: [ //in 'elements' array only ids are stored. Results are normalized
              100000,
              100001,
                ...
            ]
          }
        },
        elementsCount: 800
      },
      searchPhrase_a_: { //results for "a" search phrase
        lastUpdateTime: 1516177844624,
        pages: {
          '1': {
            isFetching: false,
            isRefreshing: false,
            isSuccess: true,
            isFailed: false,
            lastUpdateTime: 1516177844624,
            elements: [
              100001,
              100016,
              100017,
              100031,
              100044,
              100046,
              100049,
              100055,
              100056,
              100058,
              100065,
              100076,
              100077,
              100084,
              100088
            ]
          }
        },
        elementsCount: 138
      }
    },
    entities: { //here are stored entities. Entities are not duplicated. 
      '100000': {
        examData: 'BVUGUN',
        examIndexAtAll: 0,
        id: 100000
      },
      '100001': {
        examData: 'ZR7ADV',
        examIndexAtAll: 1,
        id: 100001
      },
        ...
    },
    paginationParams: {},
    searchParams: {
      searchPhrase: 'al'
    },
    currentPage: {
      pageNumber: 1
    }
  }
}

    Diese json ist kopiert direkt von redux.
    Zusätzlich erhalten Sie Funktionen wie erfrischende Ergebnisse in den hintergrund, einfache Nutzung von virtualisierten Liste, die Speicherung der zuletzt besuchten Seite und viele andere.
    Wenn Sie möchten verwenden es in mehreren Listen, schlage ich erneut.

    Diese Paginierung Baum sieht ziemlich nett. Ich mag die Idee von keying-die Paginierung Zustand Baum, die von einer Suche parameter wie searchPrase_a_. Das Paket sieht es auch nicht gut kämmen mit meinem setup, aber ich auf jeden Fall nehmen einige, die sich davon inspirieren lassen. Danke!
    Was ist das problem, verwenden Sie diese lib in deinem Fall? Wenn Sie irgendwelche Ideen haben, wie zur Vereinfachung der usability, fühlen Sie sich frei, mich wissen zu lassen.
    Auch ein großes Problem für mich ist, dass die Bibliothek will mich thunk, middleware -, und ich bin teilweise auf die Verwendung einer Redux-API-middleware-Stil. Aufruf der API ist eng gekoppelt an mein middleware. Nirgendwo in meinem handeln Schöpfer tun, die Sie nutzen, eine Funktion aufrufen, meine API, und ich würde nicht wollen, mischen Sie die beiden. Und die Paginierung Bibliothek scheint, wie es dauern würde, eine gute minute kennenzulernen. Ich bin mit ein wenig Schwierigkeiten zu verstehen, was genau es braucht, von mir, und wie es zu benutzen ist ein high-level.
    Es war schwer, die Vereinfachung der API für mich. Im moment denke ich, dass diese Bibliothek ist zu kompliziert und es führt zu neuen Komplikationen (aktualisieren und verwalten redux-Zustand). Vielleicht der bessere Ansatz ist die Optimierung von serverseitigen Suchmaschine.

    InformationsquelleAutor Andrzej

Schreibe einen Kommentar