如何在 redux 或组件函数中处理 AG-Grid API 操作？

Posted 2023-03-28

【中文标题】如何在 redux 或组件函数中处理 AG-Grid API 操作？

【英文标题】：How to handle AG-Grid API actions inside redux or component functions?

【发布时间】：2021-05-16 03:15:52

【问题描述】：

对于我正在处理的项目，我们使用 AG-Grid 和从服务器加载的数据。 用户可以选择上传文件，这些文件将在开始上传后立即显示在网格上（带有上传状态）。

目标是在上传完成后刷新网格，所以当我们的 React Redux asyncThunk 函数成功时。这是因为当上传状态发生变化时，我们会更新网格，因此用户无需刷新浏览器即可查看其上传的最新更新。

有什么问题？

我们目前在其他组件中使用 AG-Grid api 引用来触发类似的 AG-Grid 操作（例如重新加载）。 但是，我们不能将该引用传递给我们的 React Redux 切片，因为其中不能有不可序列化的值。

可能的解决方案？

有没有办法可以将 AG-Grid api 的引用传递给 React Redux 切片以触发 asyncThunk (https://redux-toolkit.js.org/api/createAsyncThunk) 中的操作？

有没有办法在导出函数的文件中使用该引用，该函数会触发该 AG-Grid api 引用的操作？所以这可以在 asyncThunk 中调用。

如果有其他可能的方法，请告诉我。 谢谢。

【问题讨论】：

我对 redux 和 redux-toolkit 非常熟悉，但对 AG-Grid 不熟悉。如果您可以发布一些示例代码（例如使用重新加载的组件），那将很有帮助。您可以使用createAsyncThunk 创建一个必须以某些 AG-Grid 组件作为参数调用的函数。您不希望在状态或最终由 asyncThunk 调度的操作中具有不可序列化的值。但是可以将它们放在由createAsyncThunk 创建的 action creator 中。

我刚刚了解到，您在调用 asyncThunk 动作创建者时使用的参数最终会以 action.meta.arg redux-toolkit.js.org/api/… 的形式附加到动作。这意味着我之前所说的不正确，因为动作创建者的参数需要可序列化。一个 hacky roundabout 将是一个双箭头函数，这样实际的动作创建者不会使用不可序列化组件调用，但由于外部函数，该组件将在有效负载创建者的范围内。

【参考方案1】：

上传完成后，您可以通过 thunk 发送一个操作，将该信息添加到 redux 状态（如state.uploadStatus = 'uploaded' 的形式）。使用useSelector 在您拥有 AG-Grid api 引用的组件中访问此uploadStatus。然后，您可以在useEffect 钩子中跟踪uploadStatus 的变化，并据此触发网格刷新。

const uploadStatus = useSelector(uploadStatusSelector)

useEffect (()=> 
   refreshGrid()
, [uploadStatus]);

如果您要上传多个文件，并且每次上传这些文件时都需要刷新网格，则将uploadStatus 设置为数组，并在上传任何文件时将fileId 之类的内容推送到数组中成功了。