Redux-thunk異步調用和狀態

我在想如果我在React或React-Native中正確理解Redux-thunk異步操作的模式，以及我們如何才能對用戶操作狀態做出反饋。Redux-thunk異步調用和狀態

我感覺要麼我不瞭解模式，要麼還有其他難題。

因此，在我的React本機應用程序（但它也可能是一個React），我想調用更新REST調用，它將返回一個承諾。而且在成功或失敗的情況下，我希望相應地向用戶顯示消息。

如果沒有Redux-async，我只需要調用其餘的，並處理該承諾。

callServiceUpdate(data).then(() => displaySuccessMessage()) 
.catch(() => displayErrorMessage());

在Redux培訓中，當我們做異步時，我們只是調度一個動作，而動作會調用異步操作。

因此，在操作文件，我們定義了行動：

// in file databaseActions.js 

export function updateStatusAction(isSuccess, errorMessage) { 
return { 
    type: 'UPDATE_STATUS', 
    isSuccess, 
    errorMessage }; 
} 

export function UpdateAction(data) { 
    return (dispatch) => { 
    callServiceUpdate(data) 
     .then(() => dispatch(updateStatusAction(true))) 
     .catch((error) => dispatch(updateStatusAction(false, error))); 
}};

調度操作將調用該服務。

然後我們調度updateStatusAction，它將更新redux狀態，並通過道具更新組件。

但是如何將成功的結果帶回給用戶呢？它是通過道具，並處理componentWillReceiveProps？

是不是太過複雜？還是有更簡單的方式給用戶提供反饋？

來源

2017-05-23 Ghassan Karwchan

在我做了一些關於這個主題的研究之後，並且尋找了人們如何解決這個問題。

我發現了處理Ajax的通常模式，正如我在我的問題中提到的。但是，用戶對ajax調用狀態的反饋僅在位於根組件容器中的UI或包含執行ajax調用的所有子組件的任何父組件容器中發生。

如果您需要了解更多關於如何設計用戶界面，以適應良好陣營UI設計好做法，那麼在處理Ajax調用在閱讀representational components and container components

了以往的模式陣營+終極版如下：

發送一個動作，指示查詢或Ajax調用已啓動。
發送將啓動Ajax調用的操作。
從Ajax收到結果後，請發送Action for SUCCESS或FAILURE。

這些例子在減速側這樣的動作

{ type: 'FETCH_POSTS_REQUEST' } 
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' } 
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

的，你需要的三個部分的狀態都指示一個Ajax請求的一部分正在運行（顯示忙指標）

在商店將國家類似於這樣

frontend: { 
     isFetching: true, 
     didInvalidate: false, 
     items: [] 
    },

東西10

然後在根容器中，處理isFetching以呈現繁忙指示器。

並做處理項目顯示結果，或顯示錯誤

來源

2017-05-24 03:02:28

您需要發送一個包含您想要的成功結果的動作，這個動作將被一個減速器使用，該減速器根據您的成功結果輸出一個新狀態。

function todoApp(state, action) { 
if (typeof state === 'UPDATE_STATUS') { 
return { ...state, action.payload } // You can access this by connecting your components to the global redux store. 
} 
return state 
}

來源

2017-05-23 19:13:55 Alisamix

我知道該怎麼做。我的問題是：顯示反饋並不複雜嗎？ –

僅供參考，你並不需要在updateAction返回callServiceUpdate()。就提供反饋而言，您可以讓組件渲染某些元素，具體取決於設置了什麼道具或者您已經提到覆蓋componentWillReceiveProps/componentDidReceiveProps。

您還可以指定組件應在shouldComponentUpdate中更新的方案，以避免不必要的重新呈現。我不會說這是一個過於複雜的方法。

來源

2017-05-24 00:32:54 sooper

回報只是我的一個實驗，看看我能否得到承諾（只是玩耍），而不是代碼中的最終目的。我將刪除它。而你說得對，看來這是至少在使用React，Redux的大中型應用程序中的常見模式。我讀到你只需要處理根容器中的用戶反饋（錯誤，成功，繁忙指示符）。這使它變得如此簡單。我會在另一個答案中添加您的答案，並隨時編輯更多。非常感謝 –

Redux-thunk異步調用和狀態

回答

相關問題