2016-08-04 65 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派遣只是返回行动。 –

相关问题