組件何時何地應該從服務器獲取數據？

（這也許不是本身一個終極版問題）組件何時何地應該從服務器獲取數據？

我的當前策略/ thoughtprocess是這樣的：一個需要數據的每個容器組件，調度，其獲取在componentDidMount該數據（其隨後觸發的API請求的動作，即調度更新商店的動作）

問題在於：某些組件正在獲取完全相同的數據。這也意味着，當我加載我的應用程序（有時是「大」）數量的不必要的請求和重新發生。

我的問題：什麼是更好的處理方法？

個人而言，我看到有兩種方式：

莫名其妙緩存從服務器返回的數據，如果一個新的請求被觸發已緩存的數據（並有一定的超時時間內發生），返回緩存的數據，而不是提出新的請求。
將我所有的應用程序數據都取回到某個地方的其他地方。（我看到的缺點是，我的容器組件不是「自給自足」，然後）

我的猜測是，有一些我似乎無法看到更好的辦法:)

來源

2017-03-14 ThomasM

要提高初期回報，我會：

獲取數據的服務器上，並填充Redux的商店
做服務器的渲染，並通過了Redux商店狀態，客戶端
添加一個檢查你的componentDidMount以查看數據是否可用

喜歡的東西

componentDidMount() { 
    if (this.props.shouldFetchData) { 
    this.props.fetchData() 
    } 
}

我們已經制定這樣一個系統，它工作正常。唯一的缺點是你必須在2個不同的地方（客戶端和服務器）進行api調用，但是我還沒有看到一個服務器端渲染的解決方案沒有這種重複。

來源

2017-03-14 10:55:47 OlliM

我喜歡使用redux-thunk這種類型的事情，因爲你可以訪問狀態並做出相應的決定。例如

const fetchData = (id) => { 
    return (dispatch, getState) => { 
     if (getState().path.to.data.isLoading) 
      return 

     dispatch({type: 'LOADING_DATA'}) 

     fetch(`${url}/${id}`).then(data => dispatch({type: 'SET_DATA', data})) 
    } 
}

然後在你的減速機，在接收到'SET_DATA'當您設置isLoading真當'LOADING_DATA'動作分派，然後切換回false。例如

const initialState = {isLoading: false} 

const reducer = (state = initialState, action) => { 
    switch(action.type) { 
     case 'LOADING_DATA': 
      return { ...state, isLoading: true } 
     case 'SET_DATA': 
      return { ...state, ...data, isLoading: false } 
    } 
}

當商店更新時，在商店中查找相同數據的所有組件都將被重新渲染。

您也可以根據自己的需要儘可能多地擴展此模式，例如存儲時間戳而不是布爾值，並且不要在請求中關注某個超時。

來源

2017-03-14 11:00:59

組件何時何地應該從服務器獲取數據？

回答

相關問題