React-router + redux:在调用另一个转换时中止活动转换

Question

我一直在环顾四周并测试一种方法，以便在加载第二个页面期间调用第三页时阻止当前从一个页面到另一个页面的转换。示例是这样的：

我有一个包含三个链接（A、B、C）的菜单，并且我在与链接 A 对应的页面中。

我单击链接 B 并做出反应将请求发送到服务器。

在返回链接 B 中的页面之前，我单击链接 C。

页面 C 在页面 B 之前加载，但当页面 B 返回时，将加载页面 B。

有没有办法告诉反应忽略当前的主动转换？忽略来自链接 B 的响应？

谢谢！

Answer 1

这取决于很多实现细节，但我会举一个真实世界的例子：我通过自由地利用蓝鸟承诺库来处理这个问题，它实现了取消。加载"页面 B"将（大致）执行以下操作：

const pageRequests = {};
function loadPageB() {
  return (dispatch) => {
    pageRequests.pageB = makeAsyncRequest('pageB')
      .then((res) => dispatch({type: 'LOAD_PAGE', content: res})
      .finally(() => {
        delete pageRequests['pageB'];
      });
  };
}
function cancelLoad(page) {
  pageRequests[page].cancel();
}

您将调用 cancelLoad 来中止加载页面，这将取消请求（请注意，生成页面加载承诺的函数需要支持取消！

或者，如果您不想纠结于承诺取消，您也可以只存储一个标志，表明您不再希望看到该页面的结果。每次您发起加载页面的请求时，该标志都会重置。