InfiniteLoader 和 react-redux

Question

来自 react-virtualised 的组件 InfiniteLoader 需要作为属性 loadMoreRows 传递的函数具有类似 { startIndex: number, stopIndex: number }): Promise 的签名。我在我的项目中使用 redux，所以 loadMoreRows 是一个像这样的 redux action creator：

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)
      )
    }
  }
}

之后，此操作使用 react-redux 的连接功能连接到包含 InfiniteLoader 的反应组件。

所以我不确定，我怎样才能满足签名要求，因为 redux 动作创建者不会 return 任何值/

Answer 1

eyeinthebrick 是正确的。 Promise 不是 必需的 return 值。

当你 "connect" 一个 Redux action-creator 时，调用它（调度它）实际上 return 是一个 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 可以等待 returned Redux promise。

InfiniteLoader 和 react-redux

InfiniteLoader and react-redux

react-redux

react-virtualized