javascript - How to return async data in reducer

Question

I'm getting some data from back-end of my app, but I have a hard time returning state properly. Code:

if (action.type === actionTypes.getList) {
    const id = action.payload.userId;
    
    Axios.post(`${apiUrl}/lists`, {
        userId: id,
    })
        .then((response) => {
            const newLists = response.data;
            return { ...listState, lists: newLists };
        })
        .catch((e) => {
            console.log("There has been error: ", e);
        });
}

With this state's reducer state is undefined, and I get it since I'm not returning anything from main If statement.

if (action.type === actionTypes.getList) {
    const id = action.payload.userId;

    const newLists = Axios.post(`${apiUrl}/lists`, {
        userId: id,
    })
        .then((response) => {
            const res = response.data;
            return res
        })
        .catch((e) => {
            console.log("There has been error: ", e);
        });
    return { ...listState, lists: newLists };
}

Here my reducer state is empty object and I get Promise { : "pending" } in console. Is there some way how to call that main return statement after the async function is done? Or any other way of solving this problem?

Answer 1

I'll advise you to use Redux actions for any middleware logic between the reducer and the dispatch function. see https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers I'm not sure what's wrong with your code tho...