如何使用 thunk 和 useDispatch （react-redux 挂钩）从操作返回承诺？

我刚刚开始探索react-redux钩子，我很好奇如果我使用thunk和useDispatch()。本质上我想实现以下目标：

const dispatch = useDispatch();

dispatch(myAction(...args)).then((result) => {
    ...do something with result
});

当我的动作看起来像这样时：

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        Promise.resolve(arg1 + arg2);
    }
}

我已经大大简化了我的问题，但这本质上就是我正在处理的问题。当我尝试发送上述操作时，出现错误dispatch(...).then不是一个函数。

我知道 redux hooks 是相当新的，但我很好奇是否有人已经让它工作或者知道解决方案。我觉得这项工作应该比较容易完成，但我很茫然。如果您需要更多信息，请告诉我。预先感谢您的任何帮助！

As dispatch返回两个之一：

1. 对于同步操作（例如dispatch ({type: 'ACTION'})它将返回动作对象（{type: 'ACTION'}在我的例子中）

2. 对于 thunk 动作（返回函数的动作创建者），它返回与动作创建者返回的相同结果。

所以对于你的情况只需添加return给你的动作创造者的声明

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return Promise.resolve(arg1 + arg2);
    }
}

你（们）能做到myAction像这样更现实

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return fetch(/* some request */).then(response => dispatch ({type: 'RESPONSE_RECEIVED', payload: response}));
    }
}

在这种情况下，也将返回已解决的承诺。承诺内容将成为对象{type: 'RESPONSE_RECEIVED', payload: response}.

或者你可以为返回的承诺设置任意内容，如下所示

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return fetch(/* some request */).then(response => { 
            dispatch ({type: 'RESPONSE_RECEIVED', payload: response})
            return response;
        }
    }
}

在此示例中，将返回已解决的承诺，但其中包含response inside.

在所有情况下你都可以按照你想要的方式链接

dispatch(myAction(...args)).then((result) => {
    ...do something with result
});