reactjs - 创建具有远程排序、分页、过滤功能的表

Question

我对 React/Redux 很陌生。

我已经阅读并研究了所有文档和示例，现在我正在尝试创建一个表(不是固定数据表)，从服务器收集的数据允许我执行分页、排序和过滤内容。

不幸的是，我不知道如何继续，也找不到有助于理解如何操作的示例。

有人可以给我一些示例来构建这些组件并且它们可以通过 redux 进行通信吗？

Answer 1

Thinking in React是一本很棒的指南，旨在让您熟悉 React 状态模型。它解释了如何构建带有过滤的表，但排序可以以类似的方式实现。此示例未使用 Redux，但 Redux 实现类似，但状态将由化简器而不是顶级组件管理。

为了让 Redux 中的过滤和排序更加高效，通常会与 memoization 结合起来。 Computing Derived Data显示如何使用 Reselect创建可以对其进行过滤和排序的可组合数据选择器。

对于分页，real-world example Redux repo 中展示了如何实现它。它需要对状态正常化等主题有更深入的了解，所以不要太早介入。但基本思想是将行与其 ID 列表分开存储，并使用类似 { ids: array, isFetching: bool, nextPageUrl: string? } 表示分页状态。