Redux误将Thunk视为Reducer：回调内dispatch报错求助

报错Reducers may not dispatch actions的核心原因是：你在Redux reducer的执行过程中调用了onClose回调，而回调内的dispatch触发了新action，违反了Redux的核心规则——reducer必须是纯函数，绝对不能在内部执行dispatch或其他副作用操作。

从你的代码来看，triggerModal thunk中await fetchSomeData之后的“执行其他操作”大概率包含同步dispatch action的逻辑，这些action会触发reducer执行；而你紧接着在同一个流程里调用了onClose，导致回调里的dispatch被嵌套在了reducer的执行周期内，最终触发错误。

这里提供三种可行的解决方式：

方式一：延迟onClose调用，避开reducer执行周期 #

利用setTimeout将onClose的调用放到宏任务队列，确保当前所有reducer执行完成后再执行回调：

export const triggerModal = ({ payload, onClose }) => async dispatch => {
    const data = await fetchSomeData(payload)
    // 执行其他操作

    if (!data) {
        // 延迟执行，避开reducer执行的同步周期
        setTimeout(() => {
            onClose()
        }, 0)
    }
}

方式二：将清理逻辑封装为thunk，直接在triggerModal中dispatch #

取消回调传递，把原本的onClose逻辑改成独立thunk，在triggerModal里直接dispatch这个thunk：

// 组件中修改调用方式
dispatch(triggerModal({
    payload: { key: 'value' },
    needCleanup: true
}))

// 修改triggerModal thunk
export const triggerModal = ({ payload, needCleanup }) => async dispatch => {
    const data = await fetchSomeData(payload)
    // 执行其他操作

    if (!data && needCleanup) {
        // 直接dispatch清理逻辑的thunk
        dispatch(clearStuffAndCloseModal())
    }
}

// 原clearStuffAndCloseModal保持不变
export const clearStuffAndCloseModal = () => dispatch => {
    console.log('start')
    dispatch(clearStuff())
    console.log('end')
    dispatch(closeModal())
}

方式三：验证回调中的dispatch是否正确绑定thunk中间件 #

如果组件中使用useDispatch，确保传入的onClose里的dispatch是经过thunk包装的（虽然你其他thunk正常，这个概率较低，但可以快速验证）：

// 组件内代码
const dispatch = useDispatch()

// 用useCallback确保dispatch引用稳定
const handleClose = useCallback(() => {
    dispatch(clearStuffAndCloseModal())
}, [dispatch])

dispatch(triggerModal({
    payload: { key: 'value' },
    onClose: handleClose
}))

• Redux的reducer执行期间严格禁止触发新的dispatch，所有副作用操作（包括dispatch新thunk或action）都必须在reducer执行完成后触发。
• thunk中间件的作用是让dispatch支持接收函数，但如果这个函数是在reducer执行期间被调用，依然会触发错误——本质是违反了“reducer执行周期内不能有副作用”的规则。

内容的提问来源于stack exchange，提问作者noblerare