決定哪些Redux的容器從

在該示例中的組件樹，組件C和E都需要相同的數據進行API調用。這些數據是從調用一個動作觸發的API調用中獲取的。

我的問題是，應該在哪裏調度取動作？

它可能發生在componentWillMount()（通過mapDispatchToProps()）方法的第一個雙親組件，在這種情況下組件B.問題在於組件B現在對孩子需要的數據有了深入的瞭解，並且我無法再使用組件C或E而沒有更高級的組件。

或者，它可能發生在組件C和E的componentWillMount()（同樣，通過mapDispatchToProps()），潛在地使用動作創建時的去抖動（可用的幫助程序庫）。我對此的擔憂是，現在Component C和E有一些知識，即它們存在於相同的頁面上，否則它們不會反彈。更糟的是，如果組件C出現在沒有組件E的另一個頁面上，那麼它不必要地去除了一個動作。

有誰知道一個更清晰的模式來獲取多個子組件使用的數據嗎？

來源

2017-06-29 Alex

一種方法是讓這兩個組件調用同一個thunk動作創建器，它應該檢查是否實際需要創建請求。它可能看起來像這樣：

function loadSomeDataIfNeeded() { 
    return (dispatch, getState) => { 
     const state = getState(); 

     if(!dataAlreadyLoaded(state) && !currentlyFetchingData(state)) { 
      dispatch(startFetchingData()) 

      fetchData() 
       .then(response => { 
        dispatch(dataFetched(response)); 
       }); 
     }  
    } 
}

因此，跟蹤「我們現在正在抓取？」值在你的狀態，並且還有邏輯來確定數據是否已經被加載。這樣，你可以多次調用thunk，只實際獲取一次。

來源

2017-06-29 16:18:50 markerikson

決定哪些Redux的容器從

回答

相關問題