攔截Redux中的HTTP請求

許多redux示例顯示直接在異步操作中發出HTTP請求;然而，這會導致重複的代碼通用於所有請求的exterme量，例如：基於狀態代碼攔截Redux中的HTTP請求

追加公共HTTP頭到每個請求

重試失敗的請求。
根據響應調用其他http請求（即：oauth令牌刷新）
中止正在進行的路由轉換請求。

我的直覺是，中間件可以用來發出HTTP請求（在同樣爲redux-api-middleware），它可以保持在store在飛行的請求 - 但是我也想知道如果我靠在在不好的情況下 - 是一個小小的重複，爲不變性付出的小代價？

來源

2015-10-15 JonnyReeves

除了中止之外的所有事情都可以通過使用請求工廠來完成，而請求工廠在請求工廠返回它之前將.then和.catch（或等效的，取決於承諾風格）附加到該請求。

來源

2015-10-16 05:10:15

謝謝！ requestFactory是我目前正在使用的一種方法，但在重放失敗的請求時，我很難保持它無狀態。 – JonnyReeves

您的動作創作者只是JavaScript的功能。

如果您在幾個函數之間有重複，則將公共代碼提取到另一個函數中。這也不例外。代替複製代碼，將通用代碼提取到一個函數中，並從您的動作創建者調用它。

最後，這種模式可以通過定製的中間件抽象出來。查看Redux回購中的「真實世界」示例，瞭解它如何完成。

來源

2015-10-16 08:01:22

讚賞丹（感謝您的優秀社區工作）。 – JonnyReeves

你可以有它執行除了其操作它調用另一個動作一個動作，來實現這一點，你需要有一個redux-async-transitions，示例代碼如下

function action1() { 
return { 
    type: types.SOMEFUNCTION, 
    payload: { 
    data: somedata 
    }, 
    meta: { 
    transition:() => ({ 
    func:() => { 
    return action2; 
    }, 
    path : '/somePath', 
    query: { 
    someKey: 'someQuery' 
    }, 
    state: { 
    stateObject: stateData 
    } 
    }) 
    } 
} 
}

給出這裏是異步調用

function asynccall() { 
return { 
    types: [types.PENDINGFUNCTION, types.SUCCESSFUNCTION, types.FAILUREFUNCTION], 
    payload: { 
    response: someapi.asyncall() // only return promise 
    } 
    meta: { 
    transition: (state, action) => ({ 
    onPending:() => { 
    }, 
    onSuccess: (successdata) => { 
    //gets response data can trigger result based on data 
    }, 
    onFail: (promiseError) => { 
    //gets error information used to display messages 
    } 
    }) 
    } 
} 
}

來源

2015-12-07 10:02:37

在中間件中調用http請求與在動作創建者中調用它的想法是一樣的。您應該專注於使我們的減速器足夠強大，以處理異步效應以及同步狀態轉換。我發現Redux的工作時，最好的辦法是描述效果的減速（HTTP請求的效果），然後用庫處理它像redux-loop或redux-saga

爲了避免重複代碼，你可以提取公共代碼，請求功能和使用它用於處理http效果

來源

2016-04-30 14:24:55 Egor

攔截Redux中的HTTP請求

回答

相關問題