如何使用 thunk 和 useDispatch(react-redux 钩子)从动作返回承诺? [英] How to return a promise from an action using thunk and useDispatch (react-redux hooks)?

问题描述

我刚刚开始探索 react-redux 钩子，我很好奇如果我使用 thunk 和 useDispatch()，如何返回一个 promise.基本上我想实现以下目标:

I just started exploring react-redux hooks and I was curious how to return a promise if I am using thunk and useDispatch(). Essentially I want to achieve the following:

const dispatch = useDispatch();

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

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

When my action looks like this:

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

我已经大大简化了我的问题，但这基本上就是我要处理的问题.当我尝试调度上述操作时，出现错误 dispatch(...).then is not a function.

I've simplified my problem a lot, but that is essentially what I'm dealing with. When I try to dispatch the above action, I get the error dispatch(...).then is not a function.

我知道 redux hooks 很新，但我很好奇是否有人已经使用它或知道解决方案.我觉得做这个工作应该相对容易，但我不知所措.如果您需要更多信息，请告诉我.在此先感谢您的帮助！

I know redux hooks are pretty new, but I was curious if anybody had gotten this to work or would know a solution. I feel like it should be relatively easy to make this work, but I am at a loss. If you need any more information, let me know. Thanks in advance for any help!

推荐答案

As dispatch 返回两个之一:

As dispatch returns either of two:

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

1. For sync action (like dispatch ({type: 'ACTION'}) it will return action object ({type: 'ACTION'} in my example)

对于 thunk 操作(返回函数的操作创建者)，它返回从操作创建者返回的相同结果.

For thunk actions (action creators which return functions) it returns the same result returned from action creator.

因此，对于您的情况，只需为您的操作创建者添加 return 语句

So for your case just add return statement for your action creator

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

您可以像这样使 myAction 更加逼真

You can make myAction more realistic like so

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

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

In this case also resolved promise will be returned. Contnents of promise will be object {type: 'RESPONSE_RECEIVED', payload: response}.

或者你可以像这样为返回的promise设置任意内容

Or you can set arbitrary contents for returned promise like so

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

在此示例中，将返回已解析的 promise，但其中包含 response .

In this example resolved promise will be returned but which contains response inside.

在所有情况下，您都可以随意链接

In all cases you can chain like you want

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

这篇关于如何使用 thunk 和 useDispatch(react-redux 钩子)从动作返回承诺?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！