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

Fra*_* G. 4 jqgrid reactjs redux

我正在研究React + Redux应用程序,我需要显示带有分页数据的数据网格.我可能有数千行,但我不希望通过滚动条进行虚拟加载; 我想要分页.我通过Ajax调用加载数据.

我可能会使用jqGrid,这似乎是一个很好的候选人,因为它可以加载动态给出的数据,并显示一个尚未加载的数据的"虚拟"寻呼机.

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

  • 我应该在动作创建者中进行Ajax调用,并将获取的数据传递给reducers,将其置于状态,那么订阅Redux存储的组件可以获得它吗?

  • 或者我应该直接在组件中进行Ajax调用?

另外我应该在哪里保留查询数据(页码,每页的项目数,总行数,排序/分组/过滤信息)?在组件或状态?

dan*_*lie 5

在异步动作创建者(使用redux-thunk中间件)中保持ajax逻辑通常比在组件内部使用ajax更简洁.理想情况下,你的组件应该是愚蠢的,只处理他们喂的道具.如果你不熟悉Redux中的异步动作创建者,那么文档很好地介绍了它:http://redux.js.org/docs/advanced/AsyncActions.html

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