React-router + redux：在調用另一個轉換時中止活動轉換

Question

我在環顧並測試了一種在加載第二個頁面期間調用第三個頁面時阻止當前從一個頁面轉換到另一個頁面的方式。這個例子是這樣的：

我有三個環節（A，B，C），和我在對應於鏈路A

我點擊鏈路B上，並做出反應的頁面發送菜單請求到服務器。

返回之前，從鏈路B的頁面，我點擊鏈接C.

頁面B之前的頁C加載，但是當B頁面返回時，網頁B被加載。

有沒有辦法讓反應忽略當前的活動轉換？忽略鏈接B的迴應？

謝謝！

Answer 1

這取決於很多實現細節，但我會舉一個真實世界的例子：我通過充分利用實現cancellation的藍鳥承諾庫來處理這個問題。數據加載中「頁面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中止加載頁面，這將取消該請求（注意，生成的頁面加載的承諾將需要的功能以支持取消！）。

或者，如果您不想與承諾取消糾纏在一起，您也可以只保存一個標誌，指示您不再希望看到該頁面的結果。每次您發起加載頁面的請求時，該標誌都會重置。