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

Question

我刚刚开始研究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钩子是很新的东西，但是我很好奇是否有人可以使用它或知道解决方案。我觉得进行这项工作应该相对容易，但是我很茫然。如果您需要更多信息，请告诉我。在此先感谢您的帮助！

Answer 1

作为dispatch返回值之一：

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

2. 对于重击动作（返回函数的动作创建者），它返回的是从动作创建者返回的相同结果。

因此，对于您的情况，只需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}。

或者您可以为返回的promise设置任意内容，如下所示

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

在此示例中，将返回已解决的Promise，但其中包含response内部。

在任何情况下，您都可以随意链接

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