如何 return 在 reducer 中异步数据

Question

我正在从我的应用后端获取一些数据，但我很难return正确设置状态。代码：

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

在这个状态下，reducer 状态是未定义的，我明白了，因为我没有return从 main If 语句中获取任何东西。

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

这里我的 reducer 状态是空对象，我在控制台中得到 Promise { : "pending" }。异步函数完成后，有什么方法可以调用 main return 语句吗？或任何其他解决此问题的方法？

Answer 1

我建议您将 Redux 操作用于 reducer 和调度函数之间的任何中间件逻辑。见 https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers 我不确定你的代码有什么问题...

Answer 2

好吧，我已经想通了......我也不得不在上下文中重写我的代码：

listContext.js:

useEffect(() => {
    if (userId) {
        Axios.post(`${apiUrl}/lists`, {
            userId: userId,
        }).then((response) => {
            const lists = response.data;
            dispatch({ type: actionTypes.getListData, payload: { lists: lists } });
        });
    }
}, [userId]);

listReducer.js:

if (action.type === actionTypes.getListData) {
    const { lists } = action.payload;
    console.log(lists);

    return { ...listState, lists: lists };
}

基本上是在上下文中获取数据，在数据到达后调用 dispatch 并从 reducer 返回新状态。

如何 return 在 reducer 中异步数据

How to return async data in reducer

javascript

reactjs

asynchronous

async-await

reducers