在 Redux 应用程序中的页面转换时拒绝先前路由的待处理操作

Posted 2023-02-22

【中文标题】在 Redux 应用程序中的页面转换时拒绝先前路由的待处理操作

【英文标题】：Reject previous route's pending action upon page transition in Redux app

【发布时间】：2016-09-12 08:59:28

【问题描述】：

我有带有 React Router 的 Redux 应用程序（基于 https://github.com/este/este）。

在一个路由中，可能有超过 1 个 AJAX 调用（由redux-promise-middleware 和redux-thunk 触发）。当页面更改时（通过react-router），我希望拒绝所有剩余的_SUCESS 或_FAILED 回调actions 由先前的路由触发。

最好的方法是什么？

【参考方案1】：

我建议您将获取的数据设置为可识别页面。这意味着在开始提取的操作中，添加一个页面上下文。当 reducer 获取数据时，它可以将其保存到该页面上下文中，或者如果位置与您的浏览器不同（意味着用户已导航离开），它可以将其丢弃。如果您保留不同页面/上下文的数据，您还可以在用户返回时获得这些数据准备就绪（如果这是您想要的）。

您在网址“/pageX”上。您开始获取数据，并且该操作确保在发送 SUCCESS 操作时记住页面上下文。当 reducer 处理操作时，它将数据存储在 store.context["/pageX"].data（或类似的）中。注意：如果当前位置与接收到的数据不同，您也可以在此处将其丢弃（拒绝）。

UI 应该知道如何仅从与其位置匹配的上下文中询问/使用数据。

您可能还需要考虑跟踪应用程序状态下的浏览器位置...