Redux-Thunk Chaining Actions，得到一个“dispatch(...) then is not a function error

Question

为了让我设置 Composition，我必须先获取 Output 对象。
我正在尝试复制示例，我觉得我正在正确复制语法，但我不断收到错误消息：

未捕获的类型错误：dispatch(...).then 不是函数

动作.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))
    );
  }
}

编辑：理想情况下，我只想创建一个函数来执行此操作：

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

但在某处我显然没有正确地使用语法

Answer 1

setOutputs()返回一个普通的 action 对象，因此不是一个返回 promise 的 thunk。 因此，链接dispatch(setOutputs(outputs)).then()将不起作用。

如果你只想在setOutputs()调度完成后立即调度另一个动作，你只需要将它们放在一起：

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

Answer 2

您可以使用setOutputs()作为自定义中间件。 在这种情况下，我将其用作Promise ：

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))
    );
  }
}