InfiniteLoader和react-redux
从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含成分。
所以我不知道,我怎么能满足签名要求,因为终极版动作制作者不返回任何值/
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
只需等待返回的终极版诺言。
现在无法检查,因为我还没有使用es7。我现在的解决方案是通过在ComponentWillRecieveProps中同步下载项目来手动更新。所以如果有新的下载项目,我会调用'''virtualScroll.recomputeRowHeights()''。 – eyeinthebrick
你不需要ES7。你可以用普通的Promise链替换async/await,它仍然可以工作。 :) – brianvaughn
布赖恩,我认为你是在假设一些中间件的存在和使用,可能是redux-thunk;开箱即用,AFAICT派遣只是返回行动。 –
正如我从react-virtualised的源代码中所理解的,它不需要从loadMoreRows函数返回Promise。尽管如果你不这样做,你有义务调用child.forceUpdate()来更新底层组件。 – eyeinthebrick