Crea tabella con ordinamento remoto, impaginazione, filtro

Question

Sono davvero nuovo in react/redux.

Ho letto e studiato tutta la documentazione e gli esempi, ora sto provando a creare una tabella (non una tabella di dati fissi), che i dati raccolti dal server, mi permettono di eseguire il paging, l'ordinamento e il filtraggio soddisfare.

Purtroppo non ho idea di come procedere e non riesco a trovare esempi utili a capire come fare.

C'è qualcuno che potrebbe darmi qualche esempio per poter costruire questi componenti e che possano comunicare via redux?

Answer 1

Thinking in React è un'ottima guida che mira a farti sentire a tuo agio con il modello stato React. Spiega come costruire una tabella con il filtro, ma l'ordinamento può essere implementato in modo simile. Questo esempio non usa Redux, ma un'implementazione di Redux sarebbe simile, con l'eccezione che lo stato sarebbe gestito da riduttori anziché dal componente di livello superiore.

Per rendere efficace il filtraggio e l'ordinamento in Redux, di solito viene combinato con la memoizzazione. Computing Derived Data mostra come utilizzare Reselect per creare selettori di dati componibili che possono filtrarli e ordinarli.

Come per l'impaginazione, il repository real-world example in Redux mostra come implementarlo. Richiede una comprensione più approfondita di argomenti come la normalizzazione dello stato, quindi non saltare troppo presto. Ma l'idea di base è quella di memorizzare le righe separatamente da un elenco dei loro ID e utilizzare una struttura dati come { ids: array, isFetching: bool, nextPageUrl: string? } per rappresentare lo stato di impaginazione.

Answer 2

Ho scritto un pacchetto chiamato violet-paginator per gestire l'impaginazione, l'ordinamento e il filtraggio di qualsiasi elenco. Esistono molti modi per ignorare le ipotesi predefinite relative alla comunicazione con il server, quindi dovrebbe funzionare nella maggior parte dei casi. Espone tutte le azioni di cui avresti bisogno per creare i tuoi componenti di impaginazione, oltre a un bel po 'di componenti prefabbricati tra cui controlli di impaginazione, collegamenti di ordinamento e tabelle di dati.