在多个 onClicks 上使 redux 操作异步

时间:2021-05-04 18:38:58

标签: reactjs react-redux react-hooks

在我的应用程序中,我有两个面板,我根据另一个面板点击事件加载一个面板的信息(即 Id 的简短获取帖子)。如果我单击 post-B 调度操作发送 api-request 并获取数据工作正常,但是当当前的 api 调用仍在加载时,我单击 post-A 会发送另一个 api-request。如果 post-B api 调用数据很大,则 post-A api 请求加载并更新状态之前需要一些时间,然后更新第一个 api 调用数据,状态不一致。

例如: post A ---- post B 数据显示

我不知道只有当 api 调用需要时间来加载数据时才会发生这种情况,或者当我随机快速点击多个帖子时,我没有在第二个面板中获得我点击的各个帖子的相关信息。< /p>

https://codesandbox.io/s/suspense-forked-r4g33?file=/src/TvShowDetails.js 这就是我试图通过 redux 实现的目标。

1 个答案:

答案 0 :(得分:0)

答案很简单。 只需使用 saga take latest 即可。 并在 store reducer 中使用一个参数来覆盖每个 api 响应。 单击 post -> 使用 id 调用 api -> 获取响应 -> 将其存储到 reducer。 如果您多次单击同一帖子或同时单击其他帖子。最新的将采用您所做的最新点击。由于您使用的是一个 store 参数,因此数据也将被覆盖。 如果 api 调用需要更多时间,我建议显示加载程序,直到获得最后/最新 api 调用的响应。