使用Redux和React執行異步操作

在我的React/Redux應用程序中，我有自定義的group對象。我希望有一個頁面顯示所有組的摘要列表，以及當前所選組的詳細視圖（默認爲列表中的第一個組）。我需要從我的其餘api申請一個組的列表（/groups），獲得第一組的id（來自商店？）並將其設置爲selected group，然後發出get請求以返回該組的成員列表（/groups/${id}/members）使用Redux和React執行異步操作

我是React/Redux的新手，我不確定如何去編碼。我是否應該將其作爲3個單獨的操作來編寫，並且可以使用前一個操作的結果使反應組件調用這些操作？或者我應該把這個邏輯放在一個使用thunk中間件的組合動作處理器中？在這種情況下，我將如何編寫這樣的動作處理程序？

來源

2017-10-09 CSharp

我會想象所選組是一個屬性，它會被拿來組件的'componentWillMount'事件處理程序？在這些組中只要顯示組組件 – Icepickle

的列表，我打算讓選定的組和羣組的任何組件的屬性都管理頁面。我不知道如何協調必要的操作來初始化這些屬性 – CSharp

最好是寫3個動作，然後用thunk將它們鏈接在一起。另外，任何請求都是異步的，因此無論如何他們需要使用thunk或其他異步方法。因此，請求/groups和/groups/${id}/members會看起來像這樣（只爲了簡潔箭頭的功能）的thunk：

export const requestGroups =() => (
 
    (dispatch) => { 
 
    // Maybe dispatch an action here that says groups are loading, 
 
    // for showing a loading icon or something 
 
    return fetch('/groups').then((response) => (
 
     dispatch(updateGroups(response)) 
 
     // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response }) 
 
    ) 
 
    } 
 
)

哪裏updateGroups是響應數據發送到減速的動作把它進入狀態。並確保這些thunk回覆承諾，以便您可以將它們鏈接在一起。你可能也想在這裏做一些錯誤處理。

然後，一旦你有這三個動作，可以使結合他們都一個thunk：

export const initializeGroups =() => (
 
    (dispatch, getState) => (
 
    dispatch(loadGroups()).then(() => { 
 
     const { groups } = getState(); // Or wherever the list is 
 
     setSelectedGroup(groups[0]); 
 
     return getGroupData(groups[0]); 
 
    }).then(() => { 
 
     // Dispatch an action saying everything is done, or do any other stuff here. 
 
    }).catch((error) => { 
 
     // Do any error handling 
 
    }); 
 
) 
 
)

來源

2017-11-03 15:20:59 emma

謝謝，這幾乎是我最終實現的。 – CSharp

使用Redux和React執行異步操作

回答

相關問題