InfiniteLoader and react-redux

Question

Component InfiniteLoader from react-virtualised requires function passed as property loadMoreRows to have signature like { startIndex: number, stopIndex: number }): Promise. I'm using redux in my project, so loadMoreRows is a redux action creator like this:

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

after that, this action is connected to react component containing InfiniteLoader using connect function from react-redux.

So I'm not sure, how can I satisfy signature requirement, as redux action creators don't return any value/

as I understood from source code of react-virtualised, it is not required to return Promise from loadMoreRows function. although, if you don't, it's your obligation to call child.forceUpdate() to update underlying components. — eyeinthebrick, Aug 04 '16 at 12:49

score 2 · Accepted Answer · answered Aug 04 '16 at 15:14

2

eyeinthebrick is correct. A Promise is not a required return value.

When you "connect" a Redux action-creator, invoking it (dispatching it) actually returns a Promise. So for example I think you could do something more like this...

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

At which point InfiniteLoader can just await the returned Redux promise.

answered Aug 04 '16 at 15:14

bvaughn

12,062
37
43

can't check right now, as I don't use es7 yet. my current solution is updating with hand by compassion of downloaded items in ComponentWillRecieveProps. so if there are new downloaded items, I call ```virtualScroll.recomputeRowHeights()``. – eyeinthebrick Aug 04 '16 at 15:19
You don't need ES7. You can replace the async/await with normal Promise chaining and it should still work. :) – bvaughn Aug 04 '16 at 19:43
1

Brian, I think you're presuming the presence and use of some middleware, probably redux-thunk; out of the box, AFAICT dispatch just returns the action. – Ed Staub Aug 12 '16 at 16:33

InfiniteLoader and react-redux

1 Answers1