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

时间:2016-05-20 09:56:14

标签: react-router

在第二页加载期间调用第三页时,我正在环顾四周并测试阻止从一个页面到另一个页面的当前转换的方法。例如:

我有一个菜单,其中包含三个链接(A,B,C),并且我在页面中对应链接A.

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

在返回链接B的页面之前,我单击链接C.

页面C在页面B之前加载,但是当页面B返回时,页面B被加载。

有没有办法告诉反应忽略当前的活跃过渡?忽略链接B的响应?

谢谢!

1 个答案:

答案 0 :(得分:0)

这取决于很多实现细节,但我给出了一个真实世界的例子:我通过自由利用实现cancellation的bluebird promise库来处理这个问题。正在加载" Page 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中止加载页面,这将取消请求(请注意,生成页面加载承诺的函数需要支持取消!)。

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