私はreact/reduxで本当に新しいです。リモートソート、ページネーション、フィルタリングによるテーブルの作成
私はすべてのドキュメントとサンプルを読んで研究しましたが、現在は固定データテーブルではなくテーブルを作成しようとしています。サーバーから収集したデータはページング、並べ替え、フィルタリングを実行できますコンテンツ。
残念ながら私はどのように進めるべきかわかりません。どのように行うのかを理解するのに役立つ例は見つけられません。
これらのコンポーネントをビルドするためにいくつかの例を教えてくれる人がいますし、redux経由で通信できる人がいますか？
Thinking in Reactは、リアクト・ステート・モデルを快適にするための参考になるガイドです。フィルタリングを使用してテーブルを作成する方法についても説明しますが、並べ替えは同様の方法で実装できます。この例ではReduxを使用していませんが、Reduxの実装は同様です。ただし、状態が最上位コンポーネントではなくレデューサーによって管理される点が異なります。
フィルタリングと並べ替えをReduxで効率的に行うために、通常はメモと組み合わせます。 Computing Derived Dataは、Reselectを使用してフィルタリングとソートが可能な合成可能なデータセレクタの作成方法を示しています。
ページネーションに関しては、Reduxリポジトリのreal-world exampleがその実装方法を示しています。状態の正規化などのトピックを深く理解しておく必要があります。しかし基本的な考え方は、IDのリストとは別に行を格納し、{ ids: array, isFetching: bool, nextPageUrl: string? }のようなデータ構造を使用してページング状態を表すことです。
私は、violet-paginatorと呼ばれるパッケージを書いて、任意のリストのページ付け、ソート、およびフィルタリングを処理しました。サーバーとの通信に関する既定の仮定を無効にする方法はたくさんありますので、ほとんどの場合に有効です。独自のページ区切りコンポーネントを作成するのに必要なすべてのアクションと、ページネーションコントロール、ソートリンク、データテーブルなど、あらかじめ作成されたかなりのコンポーネントが公開されています。
データを作成してページング/ソートを行う例もありますか？現実世界の例は素晴らしいですが、APIからのみ読み込みます。私はそれが本当にトリッキーなときにあなたを見つける。レコードを作成して、新しいレコードがどのページに属しているかを現在の状態に更新する必要があります。ページングをソートと組み合わせると、さらに複雑になります。 – Gambo
@Gamboあなたはページングとソートのために何をしたのですか？私は同様に反応する/還元し、解決策を見つけるのに苦労している。 –
@CalebSandfort - サーバーから取得したローカル状態を上書きしてしまいましたが、完全ではありませんが、より良い解決策はわかりません。私が常にサーバーの状態をとっているなら、私は状態管理が必要なのかどうか議論することができます。私はIndexDBのすべてのデータを格納する新しいレイヤーを追加することを考えましたが、これについての例も見つけられませんでした。 – Gambo