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

Posted 2023-02-22

【中文标题】如何使用 thunk 和 useDispatch（react-redux 挂钩）从操作中返回承诺？

【英文标题】：How to return a promise from an action using thunk and useDispatch (react-redux hooks)?

【发布时间】：2019-11-03 18:05:28

【问题描述】：

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

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 is not a function。

我知道 redux 钩子是相当新的，但我很好奇是否有人让它工作或知道解决方案。我觉得完成这项工作应该相对容易，但我不知所措。如果您需要更多信息，请告诉我。提前感谢您的帮助！

【问题讨论】：

我几天前做过类似的事情，请看this file at line 74，该函数在第 20 行定义，并在获得异步操作调度结果后解析。行动是defined here希望对你有帮助！

我相信如果你兑现你的诺言，你可以连锁：return Promise.resolve(arg1 + arg2)

【参考方案1】：

dispatch 返回两个之一：

对于同步操作（如dispatch (type: 'ACTION')，它将返回操作对象（在我的示例中为type: 'ACTION'）

对于 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;
        
    

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

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

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