2016-04-11 19 views
7

Ich bin wirklich neu in reagieren/Redux.Erstellen Tabelle mit Remote-Sortierung, Paginierung, Filterung

Ich habe die gesamte Dokumentation und Beispiele gelesen und studiert, jetzt versuche ich eine Tabelle (nicht feste Datentabelle) zu erstellen, dass die vom Server gesammelten Daten Paging, Sortierung und Filterung ermöglichen Inhalt.

Leider habe ich keine Ahnung, wie es weiter geht, und ich kann keine Beispiele finden, die nützlich sind, um zu verstehen, wie es geht.

Es gibt jemanden, der mir einige Beispiele geben könnte, um diese Komponenten zu bauen und dass sie über Redux kommunizieren können?

Antwort

10

Thinking in React ist ein großartiger Leitfaden, der darauf abzielt, Sie mit dem Reaktionsmodell vertraut zu machen. Es wird erläutert, wie eine Tabelle mit Filterung erstellt wird, die Sortierung kann jedoch auf ähnliche Weise implementiert werden. In diesem Beispiel wird kein Redux verwendet, aber eine Redux-Implementierung wäre ähnlich, mit der Ausnahme, dass der Status von Reduzierern anstelle der Top-Level-Komponente verwaltet würde.

Um das Filtern und Sortieren in Redux effizient zu machen, wird es normalerweise mit Memo kombiniert. Computing Derived Data zeigt, wie Sie Reselect verwenden können, um zusammensetzbare Datenselektoren zu erstellen, die sie filtern und sortieren können.

Wie in Paginierung, die real-world example in Redux Repo zeigt, wie es zu implementieren. Es erfordert ein tieferes Verständnis von Themen wie der Normalisierung des Staates, also nicht zu früh hineinspringen. Die Grundidee besteht jedoch darin, die Zeilen getrennt von einer Liste ihrer IDs zu speichern und eine Datenstruktur wie { ids: array, isFetching: bool, nextPageUrl: string? } zu verwenden, um den Paginierungsstatus darzustellen.

+2

Gibt es ein Beispiel, das das Paging/Sortieren auch mit dem Erstellen von Daten zeigt? Das reale Beispiel ist cool, liest aber nur von einer API. Ich finde es wird sehr schwierig, wenn Sie z.B. möchte einen Datensatz erstellen und muss nun zu welcher Seite der neue Datensatz gehört, um den Zustand entsprechend zu aktualisieren. Es wird noch komplizierter, wenn Sie Paging mit Sortieren kombinieren. – Gambo

+0

@Gambo Was hast du am Ende für das Paging und Sortieren getan? Ich bin ähnlich neu zu reagieren/Redux und Probleme bei der Suche nach einer Lösung. –

+0

@CalebSandfort - Ich habe meinen lokalen Zustand mit dem überschrieben, den ich vom Server bekomme, was nicht perfekt ist, aber ich kenne keine bessere Lösung. Sie können argumentieren, wenn ich State-Management überhaupt brauche, wenn ich immer den Server-Status nehme. Ich habe darüber nachgedacht, eine neue Ebene hinzuzufügen, die alle Daten in IndexDB speichert, aber ich konnte auch keine Beispiele dafür finden. – Gambo

4

Ich schrieb ein Paket mit dem Namen violet-paginator, um Seitenumbruch, Sortieren und Filtern von jeder Liste zu behandeln. Es gibt viele Möglichkeiten, die Standardannahmen über die Kommunikation mit dem Server zu überschreiben, daher sollte es in den meisten Fällen funktionieren. Es zeigt alle Aktionen auf, die Sie zum Erstellen eigener Paginierungskomponenten benötigen, sowie einiger vorgefertigter Komponenten, einschließlich Paginierungssteuerelementen, Sortierlinks und Datentabellen.

Verwandte Themen