This seems like a simple use case but I can't figure it out. I want to display a list of items retrieved from a request to a remote API over HTTP. I would like the screen to show blank initially while the request is taking place, and then get populated with the results when available.
So I thought I would have two components: the dumb item list component, and a wrapper presentational component that uh, somehow kicks off the remote request while rendering the dumb component with the empty item list from state.
I know how to kick off an initial remote request: use componentDidMount()
.
and I know how to handle dispatch / connection: I want to use something like:
const OuterWrapper = connect(
mapStateToProps,
mapDispatchToProps
) (ItemList)
but how do I get these things to play together? using connect()
seems to put things out of reach. I want to asynchronously kick off the API request, and then somehow do a `dispatch(updateItemList(items)) to tell the world that there are new items to be added to the state.
EDIT:
I found react-lifecycle-component, but I don't understand the example usage, both before and after. In the longer case why is getAllTehDatas
referenced twice? Why is it in mapDispatchToProps
plainly without a key:value
pair? Why is it needed in there at all if componentDidMount()
calls it? And what do you do if that method needs to make use of dispatch()
?