Await 关键字在 Redux 操作中不起作用

Posted 2023-03-07

【中文标题】Await 关键字在 Redux 操作中不起作用

【英文标题】：Await keyword not working within Redux action

【发布时间】：2018-01-22 21:25:17

【问题描述】：

我正在尝试将 async/await 语法合并到我的 Redux 操作中，但由于某种原因，它不起作用。我一辈子都看不出以下有什么问题：

const actions = 
    load: async (staff, date) => dispatch => 
        const data = 
            dateFrom: date,
            dateTo: date,
            person: staff,
            personType: 'staff'
        ;

        const events = utils.getDataPromise('json/events/load', data);
        const classes = utils.getDataPromise('json/timetable/load', data);

        dispatch(
            type: actions.MYDAY_LOAD,
            staff,
            date: date || new Date(),
            events: await events,
            classes: await classes
        );
    ,

utils 函数肯定会返回一个承诺。

【问题讨论】：

你在使用thunk吗？

@isaac 是的，我正在使用 thunk。我得到的错误是 await 关键字 - 甚至我的 IDE 都告诉我他们在错误的位置。

load 是一个异步函数，它返回一个非异步函数，将你的异步移到dispatch 之前。检查这个question

@Gerado 谢谢，效果很好。随意将其写在答案中，我会将其标记为已接受。

有趣。我面前的一个工作示例是这样的：export function myAction() let value = await something(); return dispatch(value);

【参考方案1】：

由于箭头函数语法，这是一个常见错误。

您的load 函数是async，但返回一个匿名箭头函数dispatch => ...。

await 仅在它位于 async 函数内且您的 await 调用位于不是 async 的匿名返回函数内时才有效，这就是它不起作用的原因。将 async 移动到 dispatch 之前，应该可以。

const actions = 
    load: (staff, date) => async dispatch => ...
    //                     ^^^^^ move it here
...