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

Question

我有React路由器的Redux应用程序(基于https://github.com/este/este).

在一个Route中,可能有多个AJAX调用(由redux-promise-middleware&触发redux-thunk).当页面改变(通过react-router)时,我希望拒绝前一个路由触发的所有剩余_SUCESS或_FAILED回调 actions.

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

Answer 1

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

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

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

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