React/Redux - 如何在加載組件時處理多個異步調用

我是React/Redux的新手，但很喜歡到目前爲止。我來accros的東西，實際上困擾我，但我甚至不知道這是一個「真正」的問題，我應該關心。無論如何，在這裏。React/Redux - 如何在加載組件時處理多個異步調用

比方說，我有一個組件，它實際上是一個更新記錄的形式，從數據庫中檢索。這個記錄對不同的表有幾個外鍵。（假設我的主表是Training，它有一個Format，一個Type，一個Place ...和所有這些數據來自另一個表）。

爲了能夠向用戶顯示每個外鍵的所有可能值，我必須請求所有不同的表來獲取數據，並在下拉菜單中顯示這些數據。

現在，我正在做這樣的事情：

dispatch(new CrudActions(places).getAll()); 
dispatch(new CrudActions(trainingFormats).getAll()); 
dispatch(new CrudActions(trainingTypes).getAll());

每個線將派遣一個終極版的作用，因此，更新狀態的一部分，根據檢索到的數據。然後我的組件將然後簡單地從國家得到的值：

function mapStateToProps(state) { 
    return { 
     places: state.places.list, 
     trainingFormats: state.trainingFormats.list, 
     trainingTypes: state.trainingTypes.list 
    } 
}

它的實際工作，但結果是：每一次動作的完成和更新狀態，我的組件得到重新渲染...讓我們想象一下我的主要培訓有10個外鍵：對於單個頁面加載來顯示更新表單，我的組件將被渲染10次。它不會導致不良的表現嗎？有沒有更好的方法來檢索外國數據？

來源

2016-09-18 Moltes

redux-saga可以幫助您處理redux中的異步內容。 https://github.com/yelouafi/redux-saga –

你可以只承諾鏈接他們在同一個動作？或者設置一個服務電話來鎖定他們？要點是你可以一次性完成這一切，並且有多種方法可以實現這一點。你也可以在客戶端或服務器端進行此操作（將其更改爲1次呼叫而不是3次），這實際上取決於您控制的內容。 – ajmajmajma

事情是，即使我承諾鏈接它們，全局狀態將被更新3次（因爲我使用3個不同的縮減器，每個「實體」一個），所以組件將被渲染3次... – Moltes

讓我來重述一下。每個記錄組件都有地點下拉菜單，訓練格式和訓練類型。下拉選項通過ajax檢索。當你有多條記錄時，會有很多請求和重新排列。

解決方案：不要讓每個記錄組件自行檢索下拉值。無論如何，對於每個相應的下拉菜單，它們都是相同的。而是將它們加載到其中一個父組件中，並將它們作爲屬性傳遞給記錄組件，例如availablePlaces，availableFormats,availableTypes。

您的父組件甚至不需要通過ajax加載可用的下拉選項。它可以用它初始化。

關於再渲染的進一步優化請參見https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate。

Facebook建議在https://facebook.github.io/react/docs/react-component.html#componentdidupdate中進行ajax調用。

來源

2016-12-21 09:55:05 Leif

React/Redux - 如何在加載組件時處理多個異步調用

回答

相關問題