Redux-Thunk Chaining Actions, getting a "dispatch(...) then is not a function error

Question

In order for me to set the Composition, I have to get the Output object first.
I'm trying to copy the examples and I feel like I'm copying the syntax correctly but I keep getting the error:

Uncaught TypeError: dispatch(...).then is not a function

Actions.js

export function setComposition(composition) {
  return { type: types.SET_COMPOSITION, composition };
}

export function setOutputs(outputs) {
  return { type: types.SET_OUTPUTS, outputs };
}

export function setOutputsAndComposition(outputs) {
  return function (dispatch, getState) {
    return dispatch(setOutputs(outputs)).then(() =>  // ERROR HERE
      dispatch(setComposition(getState().Data.OutputObj))
    );
  }
}

EDIT: Ideally I would love to just create a function that just does this:

export function setOutputsAndComposition(outputs) {
  return function (dispatch, getState) {
    dispatch(setOutputs(outputs)).then(() =>
    dispatch(setComposition(getState().Data.OutputObj))
    );
  }
}

But somewhere I'm obviously not doing the syntax correctly

Answer 1

setOutputs() is returning a plain action object, and thus is not a thunk that returns a promise. So, chaining dispatch(setOutputs(outputs)).then() won't work.

If you just want to dispatch another action right after the setOutputs() dispatch is complete, you only need to put them right after each other:

dispatch(setOutputs(outputs));
dispatch(setComposition(getState().Data.OutputObj));

Answer 2

You can use setOutputs() as a custom middleware. In this case I'm using it as a Promise instead:

export function setComposition(composition) {
  return { type: types.SET_COMPOSITION, composition };
}

export function setOutputs(outputs, dispatch) {
  return new Promise((resolve, reject) => {
    dispatch({type: types.SET_OUTPUTS, outputs});
    resolve();
  });
}

export function setOutputsAndComposition(outputs) {
  return function (dispatch, getState) {
    return setOutputs(outputs, dispatch).then(() =>  // NO ERROR HERE ANYMORE ^_^
      dispatch(setComposition(getState().Data.OutputObj))
    );
  }
}