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

Question

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

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

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

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

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

Answer 1

setOutputs() 正在返回一个普通的操作对象，因此不是 returns 承诺的 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))
    );
  }
}

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

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

javascript

reactjs

redux

redux-thunk