我是整個 react redux 世界的新手，但我想我現在知道 redux 是如何作業的。但是現在我面臨著一個新的挑戰，我需要實作異步資料獲取。我選擇使用 axios 作為我的 http 客戶端。
我現在的問題是我已經閱讀了有關 redux async thunk 的內容，但我不知道何時以及為什么要使用它。我知道它向 redux 添加了中間件，可以處理異步/等待和承諾。
我想簡單地使用 axios 來獲取資料，然后使用 dispatch 來存盤它們。像這樣
const loadData = async () => {
const res = await axios.get('https://www.api.com/mydata');
const data = res.data;
dispatch(setMyData(data));
}
怎么會createAsyncThunk幫我呢？
uj5u.com熱心網友回復：
在您的示例中，loadData僅等待一個 api 請求，然后分派一個簡單的 redux 操作 ( setMyData)。如果你完全像這樣需要它，你是對的，你為什么需要 thunk？
但是想象一下：
- 您的應用程式中的幾個組件需要注意此 api 請求正在進行中（例如顯示加載指示器或隱藏按鈕）
- 不止一個地方需要這個功能
- 您需要處理對 api 請求的特定錯誤回應
- 在等待 api 請求完成時，全域 redux 狀態中的某些內容可能已更改。您需要在調度之前對此做出反應
setMyData()。
所有這些都是復雜的 react/redux 應用程式的常見要求，您現在可能沒有它們，但可能會在某個時候遇到它們。
thunk 中間件提供了處理它們的抽象。您可以通過撰寫自己的輔助函式等來實作相同的目的，但最終您會重新發明輪子，并且許多 react/redux 開發人員最終會撰寫完全相同的樣板代碼。
uj5u.com熱心網友回復：
按照設計，redux 操作是同步的。添加像redux-thunk這樣的thunk允許你撰寫異步的動作創建者，因此回傳承諾。
例如，我可以撰寫一個如下所示的動作創建器：
const getUsers = () => async dispatch => {
let users = await getUsers();
dispatch({
type: GET_USERS,
payload: users
});
}
因此，與其呼叫 api，獲取資料，然后分派一個操作，不如讓一個操作在其中執行獲取操作
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344607.html