Redux 在回调中调度时认为 thunk 是一个减速器

Question

我有一个 React/Redux 应用程序，安装了 thunk 中间件并且工作正常 - 所有其他 thunk 调度都工作正常。我有一个 thunk 与一个函数处理程序一起调度，它本身需要调度一些东西。

这是一个例子：

dispatch(triggerModal({
    payload: { key: 'value' },
    onClose: () => {
        dispatch(clearStuffAndCloseModal())
    }
}))

在另一个文件中：

export const triggerModal = ({ payload, onClose }) => dispatch => {
    const data = await fetchSomeData(payload)
    // Do other random stuff.

    if (!data) {
        onClose()
    }
}

export const clearStuffAndCloseModal = () => dispatch => {
    console.log('start')

    dispatch(clearStuff()) // The error seems to be happening here as only 'start' is printed

    console.log('end')

    dispatch(closeModal())
}

运行此命令并触发

onClose

时，我在浏览器控制台中收到错误：

redux.js:208 未捕获（承诺中）错误：Reducers 可能无法调度 行动

据我所知，Redux 似乎认为

clearStuffAndCloseModal

函数是一个减速器，并且当我尝试从减速器分派时会感到不安。然而，它不是一个减速器，而是一个重击器，所以我不太确定如何解决这个问题。我想知道这是否是

onClose

回调中的调度调用的问题。

任何帮助将不胜感激。

Answer 1

我没有看到操作代码有任何明显的问题，但我建议代码应该将

data

值返回给调用者并 then 根据结果分派附加操作。

示例：

export const triggerModal = (payload) => async (dispatch) => {
  const data = await fetchSomeData(payload);
  // Do other random stuff.

  return data;
};

export const clearStuffAndCloseModal = () => dispatch => {
  console.log('start');
  dispatch(clearStuff());
  console.log('end');
  dispatch(closeModal());
};

const someFunction = async () => {
  const data = await dispatch(triggerModal({ key: 'value' }));

  if (!data) {
    dispatch(clearStuffAndCloseModal());
  }
};

或

const someFunction = async () => {
  const data = await dispatch(triggerModal({ key: 'value' }));

  if (!data) {
    dispatch(clearStuff());
    dispatch(closeModal());
  }
};