Await keyword does not work in Redux action

Question

I am trying to include async / wait syntax in my Redux actions, but for some reason it does not work. I can’t understand for my whole life what happened to the following:

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
        });
    },
}

The utils function uniquely returns a promise.

Answer 1

This is a common mistake due to the syntax of arrow functions.

Your function load async, but returns the function of an anonymous arrow dispatch => {...}.

await , async await , async, . async dispatch, .

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