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

Question

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

我可能会使用 jqGrid，这似乎是这项工作的理想选择，因为它可以加载动态给出的数据，并为尚未加载的数据显示一个“虚拟”寻呼机。

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

• 我是否应该在 action creators 中进行 Ajax 调用，并将获取的数据传递给 reducer，使其处于状态，以便订阅 Redux 存储的组件可以获取它？

  李>

• 还是应该直接在组件中进行 Ajax 调用？

此外，我应该将查询数据（页码、每页项目数、总行数、排序/分组/过滤信息）保存在哪里？在组件中还是在状态中？

Answer 1

在异步操作创建器中保留 ajax 逻辑（使用 redux-thunk 中间件）通常比在组件内部使用 ajax 更干净。理想情况下，您的组件应该是愚蠢的，只处理它们所提供的道具。如果你不熟悉 Redux 中的异步操作创建器，文档很好地介绍了它：http://redux.js.org/docs/advanced/AsyncActions.html

关于在 Redux 存储与组件中存储内容，一般的经验法则是，如果您想重放某个状态，或者该状态说明了整个应用程序的某些情况：将其保存在 Redux 中。在 Redux 中，我只将组件状态用于一些琐碎的事情，比如显示工具提示，以及其他与通用数据模型没有太大关系的事情。当然，React 和 Redux 不会强迫你以这样或那样的方式去做，但是从经验上讲，使用 Redux 生态系统来处理应用程序中的数据流和元数据，可以更容易地在以后推理代码，尤其是在使用redux-devtools时。