Redux Toolkit异步Action返回undefined问题求助

问题根源 #

你定义的getMenuItems异步thunk函数没有返回请求的最终数据：

• 虽然用了async关键字，但函数内部的axios.get()链式调用没有return最终结果；
• async函数如果没有显式return值，默认会返回undefined，这就导致action.payload为undefined。

修复方案 #

有两种简洁的修复方式，任选其一即可：

方式一：用await替代then链（推荐，代码更易读）

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const getMenuItems = createAsyncThunk(
  "menuItems/getMenuItems",
  async () => {
    const response = await axios.get("https://run.mocky.io/v3/eaf5dd77-5306-4093-ba7b-66364be1eacc");
    return response.data;
  }
);

const slice = createSlice({
  name: "menuItems",
  initialState: [],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getMenuItems.fulfilled, (state, action) => {
      console.log("state:", state);
      console.log("action:", action.payload); // 现在能拿到正确的data了
    });
  },
});

export default slice.reducer;

方式二：保留then链，补充return语句

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const getMenuItems = createAsyncThunk(
  "menuItems/getMenuItems",
  async () => {
    // 关键：在axios调用前加上return，把整个promise链返回出去
    return axios
      .get("https://run.mocky.io/v3/eaf5dd77-5306-4093-ba7b-66364be1eacc")
      .then((response) => response)
      .then((item) => item.data);
  }
);

const slice = createSlice({
  name: "menuItems",
  initialState: [],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getMenuItems.fulfilled, (state, action) => {
      console.log("state:", state);
      console.log("action:", action.payload); // 现在能拿到正确的data了
    });
  },
});

export default slice.reducer;

修改后，当异步请求成功完成时，action.payload就会正确获取到接口返回的数据，和你预期的一致。

内容的提问来源于stack exchange，提问作者Hasan Sherafat