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

Viewed 4658

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

2 Answers
Related