2016-08-04 127 views
3

react-virtualised的組件InfiniteLoader需要作爲屬性loadMoreRows傳遞的函數具有像{ startIndex: number, stopIndex: number }): Promise這樣的簽名。 我使用終極版在我的項目,所以loadMoreRows是一個終極版行動的創建者是這樣的:InfiniteLoader和react-redux

const fetchEntities(start, stop) { 
    return fetch(`${myUrl}&start=${start}?stop=${stop}`) 
} 
const loadMoreRows = ({ startIndex, stopIndex }) => { 
    return (dispatch, getState) => { 
    return function(dispatch) { 
     return fetchEntities(startIndex, stopIndex).then(
     items => dispatch(simpleAction(items)), 
     error => console.log(error) 
    ) 
    } 
    } 
} 

之後,這個動作連接反應使用連接從反應 - 終極版功能InfiniteLoader含成分。

所以我不知道,我怎麼能滿足簽名要求,因爲終極版動作製作者不返回任何值/

+0

正如我從react-virtualised的源代碼中所理解的,它不需要從loadMoreRows函數返回Promise。儘管如果你不這樣做,你有義務調用child.forceUpdate()來更新底層組件。 – eyeinthebrick

回答

2

eyeinthebrick是正確的。答應不是要求的返回值。

當您「連接」一個Redux動作創建者時,調用它(調度它)實際上會返回一個Promise。因此,例如,我想你可以更喜歡這個做某事

function fetchEntities (start, stop) { 
    return fetch(`${myUrl}&start=${start}?stop=${stop}`) 
} 

const loadMoreRows = ({ startIndex, stopIndex }) => { 
    return async (dispatch, getState) => { 
    try { 
     const items = await fetchEntities(startIndex, stopIndex) 
     await dispatch(simpleAction(items)) 
    } catch (error) { 
     console.log(error) 
    } 
    } 
} 

在這一點InfiniteLoader只需等待返回的終極版諾言。

+0

現在無法檢查,因爲我還沒有使用es7。我現在的解決方案是通過在ComponentWillRecieveProps中同步下載項目來手動更新。所以如果有新的下載項目,我會調用'''virtualScroll.recomputeRowHeights()''。 – eyeinthebrick

+0

你不需要ES7。你可以用普通的Promise鏈替換async/await,它仍然可以工作。 :) – brianvaughn

+0

布賴恩,我認爲你是在假設一些中間件的存在和使用,可能是redux-thunk;開箱即用,AFAICT派遣只是返回行動。 –