当我尝试使用 thunk 调用 api 时，我变得不确定

Question

我正在使用 react with redux tookit 来调用我的 api 并将我的响应存储在状态中，但是每当我调用异步 thunk 时，我的响应都未定义，但我将我的响应记录在 api，我得到了预期的回应，我不知道因为我是 redux 的初学者，任何人都可以帮助我我做错了什么。 下面是我的内存片reducer

import { RecentPublishedApi } from "../../components/api/api";

export const fetchMemoryAsync = createAsyncThunk(
  "memory/recentPublishedApi",
  async (obj) => {
    const response =await RecentPublishedApi(obj);
    console.log("i am inside the thunk",response)
    return response;
  }
);
const initialState = {
  data: [],
  status: "",
};

export const MemorySlice = createSlice({
  name: "memory",
  initialState,
  reducers: {
  },
  extraReducers: {
    [fetchMemoryAsync.pending]: (state) => {
      state.status = "loading";
    },
    [fetchMemoryAsync.fulfilled]: (state, action) => {
      console.log("fulfilled")
      state.status = "idle";
      console.log(action)
      state.data=action.payload;
    },
    [fetchMemoryAsync.rejected]: (state, action) => {
      state.status = "failed";
      state.error = action.payload;
    },
  },
});

// export const { addData } = MemorySlice.actions;
export const selectData = (state) => state.memory.data;

export default MemorySlice.reducer;

我的代码沙箱link- https://codesandbox.io/s/hidden-snowflake-px34f?file=/src/App.js

Answer 1

您没有从 RecentPublishedApi 返回任何东西。添加 return 语句。

另外，Promise 你在那里建立的已经是一个承诺，不需要手动包装它。

import axios from "axios";

export const RecentPublishedApi = async (data) => {
  const headers = {
    "Content-Type": "application/json",
    "X-CSRF-TOKEN": "e7lwcn_OBGJuu2QsIA8auXzsvi9RGlzueRGDDwVsSKU"
  };
  return axios
      .post("https://public.cuebackqa.com/api/timeline/list", data, {
        headers: headers
      })
};

当我尝试使用 thunk 调用 api 时，我变得不确定

When i am trying to call the api using thunk , i am getting undefined

reactjs

redux

redux-thunk

redux-toolkit