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返回两个值之一：

对于同步操作（例如dispatch ({type: 'ACTION'})，它将返回操作对象（在我的示例中为{type: 'ACTION'}）
对于重击动作（返回函数的动作创建者），其返回的结果与动作创建者返回的结果相同。

因此，对于您的情况，只需为动作创建者添加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。

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

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

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

1 个答案: