使用React / Redux

时间:2016-04-04 21:44:18

标签: reactjs jqgrid redux

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:5)

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

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