AG-Grid 与 Redux

Posted 2023-03-28

【中文标题】AG-Grid 与 Redux

【英文标题】：AG-Grid with Redux

【发布时间】：2016-11-26 00:25:01

【问题描述】：

在我的工作中，我们决定在反应变体中使用AG-Grid：https://www.ag-grid.com/best-react-data-grid/index.php

目前，React 的架构是 Redux。根据我对AG-Grid 的了解，我可以说它不太适合这种架构。 AG-Grid 将其整体状态保留在组件内。尝试将它强行完整地连接到redux是很麻烦甚至不聪明的。

我可以忍受，但至少我需要观察行模型的变化——这意味着获取新行、排序、过滤（我不需要观察单元格的变化）。我有 2 个关于如何监视并将其连接到 redux 的想法。

选项 1 - 使用 gridOptions.onModelUpdated()

使用gridOptions.onModelUpdated()，我知道何时执行了过滤或排序，但我无法访问显示的所有行 (docs)：

状态 1：行数据

API：没有获取此数据的 API。但是它是由应用程序提供的，因此您应该已经拥有它。

因此我无法发送 redux 操作，因为我没有任何数据可以更新它。

选项 2 - datasource.getRows()

我可以使用新行调度操作。但是，我没有找到任何onReset/onRowsDeleted/... 事件，因此我不知道何时清除redux 的state.rows。 更新如果datasource.getRows(params) 的参数params 是params.startRow === 0，我可以知道之前的行已被清除。

问题

也许我找到了使用这两个选项之一的方法，但我的问题是：

这些是如何将AG-Grid 连接到Redux 的好主意吗？

【问题讨论】：

您找到解决方案了吗？我正在研究一个类似的设置，我认为实现数据源挂钩有点“棘手”......完全可行，尤其是对于 1 次请求，但对于其他地方的表数据的更改并不真正可行在该状态下，需要重新加载/更新 ag-grid

伙计，我被要求提供一个要点。我会在星期一有一个。

@zeroasterisk 这里是要点：gist.github.com/zatziky/72f0826e97a011d3f2af75df84981b61 它来自我们的 PoC，我永远不会发布这样的烂摊子......不过它正在工作。我只是因为被问到才发布它。 :) 我们添加了一些额外的功能，比如只读网格和其他一些东西。在我们当前的项目中，我们的期限很紧，因此没有足够的空间来重构这个组件。一旦我们开始重构它，我就会更新链接。

@zatziky 感谢您分享您的代码，它非常有帮助。你有机会重构你的代码吗？

@Anas 不，它长得很均匀，一个大意大利面碗。 ;) 实际上，我们进行了一些重构，并有所帮助。不幸的是，我没有代码库了。

【参考方案1】：

Ag-grid (v10.1.0) 现在支持 Redux：

https://ag-grid.com/example-react-redux/?framework=all#gsc.tab=0

【讨论】：

在这个例子中没有使用无限行模型，Redux也支持吗？