createAsyncThunk return action.payload Undefined-CodePudding

I'm trying to fetch a list from database and add to my state. but the action.payload is undefined on the api the result is correct.

mySlice

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { fileFetch } from "./fileAPI";

const initialState = {
  loading: "idle" | "pending" | "succeeded" | "failed",
  error: false,
  filesUploaded: null,
};

export const fetchFiles = createAsyncThunk("files/fetchFiles", () => {
  return fileFetch();
});

export const fileSlice = createSlice({
  name: "files",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(fetchFiles.pending, (state, action) => {
        state.loading = "pending";
      })
      .addCase(fetchFiles.fulfilled, (state, action) => {
        console.log(action);
        state.loading = "succeeded";
        state.filesUploaded = action.payload;
      })
      .addCase(fetchFiles.rejected, (state, action) => {
        state.loading = "failed";
        state.filesUploaded = [];
        state.error = action.error.message;
      });
  },
});

export default fileSlice.reducer;

myAPI

const api = axios.create({


baseURL: "http://localhost:8081/file/",
  headers: {
    "content-type": "application/json",
  },
});


export const fileFetch = async () => {
  await api
    .get("getAll")
    .then((res) => {
      console.log(res.data);
      return res.data;
    })
    .catch((err) => {
      throw new Error(err);
    });
};

the console.log on the api is returning the correct data.

any idea why the payload is undefined?

thanks.

CodePudding user response：

Might be because you are using both async-await and Promise methods in fileFetch function. Try updating it to this

export const fileFetch = async () => {
  const response = await api.get("getAll")
  return response.data
};

CodePudding user response：

myApi

export const fileFetch = () => api.get("getAll")

mySlice

export const fetchFiles = createAsyncThunk(
  "files/fetchFiles",
  async ({ rejectWithValue }) => {
    try {
      const response = await fileFetch();
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

Also working lifecycle methods