CODEWITHSUNDEEP
javascriptreactjsredux
index
index

Reputation: 3727

react, redux chain a next dispatch

I'm still beginning in react and redux and now I followed this tutorial and it uses this middleware for dispatch. I was wondering how I would do another dispatch after the first one (to chain it)? I have something like this now.

fetchData() {
  const { dispatch } = this.props;
  const action = PageActions.fetchPage({slug: this.props.params.slug});
  dispatch(action);
}

and wondering if I can dispatch(action).then(...) but the return of dispatch is always undefined. Is that possible?

Upvotes: 1

Views: 12121

Answers (1)

JamesWatling
JamesWatling

Reputation: 1185

If you would like to use async actions inside of your action creators you need to use middleware. The recommended middleware is thunk.

There is a good post on Stack about it's usage and appropriate situations. Stack Overflow Async Actions

This will allow you to dispatch many actions from a single action. However if you are wanting to "chain" actions together you should simply dispatch the second action at the end of the first actions definition.

ie

function getBookings() {
  return (
    RequestHelper.fetchEntities(Routes.bookings.all, {}, queryParams)
      .then(res => dispatch(getBookingsSuccess(res));
  )
}

...
function getBookingsSuccess(data) {
  dispatch(showSuccess());
}

Upvotes: 3

Related Questions