react-router - 在 Redux 应用程序中的页面转换时拒绝先前路由的挂起操作

Question

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

在一条 Route 内，可能有 1 个以上的 AJAX 调用(由 redux-promise-middleware 和 redux-thunk 触发)。当页面更改时(通过 react-router)我希望拒绝所有剩余的 _SUCESS或 _FAILED回调actions由之前的路线发射。

做这个的最好方式是什么？

Answer 1

我建议您让您获取的数据具有页面感知能力。这意味着在开始提取的操作中，添加页面上下文。当reducer 获取数据时，它可以将其保存在该页面上下文中，或者如果位置与您的浏览器不同(意味着用户已导航离开)，则可以将其丢弃。如果您保留不同页面/上下文的数据，那么如果用户返回(如果这是您想要的东西)，则这些数据也已准备就绪。

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

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

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