javascript - react, redux chain a next dispatch - Stack Overflow

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?

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?

• javascript
• reactjs
• redux

Share Improve this question Follow edited Apr 6, 2016 at 14:18 Clarkie 7,56099 gold badges4040 silver badges5353 bronze badges asked Apr 6, 2016 at 7:04 indexindex 3,71777 gold badges4040 silver badges5656 bronze badges 1

• Yes, it's possible. It's solved here – mrkacan Commented May 7, 2018 at 7:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If you would like to use async actions inside of your action creators you need to use middleware. The remended 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());
}