使用 React/Redux 处理数据网格分页

Handle datagrid pagination with React/Redux

我正在开发一个 React + Redux 应用程序,我需要显示一个包含分页数据的数据网格。我可能有数千行,但我不想通过滚动条进行虚拟加载;我想要分页。我通过 Ajax 调用加载数据。

我可能会使用 jqGrid,它似乎是这项工作的理想人选,因为它可以加载动态给定的数据,并为尚未加载的数据显示 "virtual" 寻呼机.

我的问题是关于我如何在 React + Redux 世界中处理它。

另外,我应该在哪里保存查询数据(页码、每页的项目数、总行数、sorting/grouping/filtering 信息)?在组件里还是在状态里?

在异步操作创建者(使用 redux-thunk 中间件)中保留 ajax 逻辑通常是比在组件内部搞乱 ajax 更干净的解决方案。理想情况下,您的组件应该是哑的,只处理它们所提供的道具。如果您不熟悉 Redux 中的异步操作创建器,文档对此进行了很好的介绍:http://redux.js.org/docs/advanced/AsyncActions.html

至于在 Redux store 和组件中存储东西,一般的经验法则是,如果你想重放某个状态,或者该状态说明了整个应用程序的一些事情:将它保存在 Redux 中。在 Redux 中,我只将组件状态用于一些琐碎的事情,比如显示工具提示,以及其他与通用数据模型没有太大关系的事情。当然,React 和 Redux 不会强迫你以这种或那种方式去做,但从经验来看,使用 Redux 生态系统来处理应用程序中的数据流和元数据使得以后对代码的推理变得容易得多,特别是在使用 redux-devtools.