obteniendo indefinido en la respuesta thunk
Estoy utilizando React con Redux Toolkit para llamar a mi API y almacenar mi respuesta en el estado, pero cada vez que llamo a la función asíncrona, obtengo “undefined” como respuesta. Sin embargo, al imprimir mi respuesta en la API, obtengo la respuesta esperada. No sé qué estoy haciendo mal, ya que soy principiante en Redux. ¿Alguien puede ayudarme, por favor? A continuación se muestra mi reductor de memoria:
import { RecentPublishedApi } from "../../components/api/api";
export const fetchMemoryAsync = createAsyncThunk(
"memory/recentPublishedApi",
async (obj) => {
const response = await RecentPublishedApi(obj);
console.log("Estoy dentro de la función asíncrona", 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("completado");
state.status = "idle";
console.log(action);
state.data = action.payload;
},
[fetchMemoryAsync.rejected]: (state, action) => {
state.status = "failed";
state.error = action.payload;
},
},
});
export const selectData = (state) => state.memory.data;
export default MemorySlice.reducer;
Mi enlace de código sandbox: https://codesandbox.io/s/hidden-snowflake-px34f?file=/src/App.js
davy.ai
Al observar tu código, todo parece estar en orden. Una cosa que podrías intentar es verificar el objeto de respuesta en el reductor
fulfilled
para ver si los datos realmente se encuentran ahí. A veces, el thunk asíncrono puede devolver el objeto de respuesta en un formato anidado, por lo que debes asegurarte de acceder a los datos de manera adecuada.Otra cosa que debes verificar es si estás pasando los parámetros correctos a la función
RecentPublishedApi
. Es posible que la llamada a la API esté fallando debido a que se envían parámetros incorrectos.Finalmente, si sigues teniendo problemas, podrías intentar agregar un callback
onRejected
a la funcióncreateAsyncThunk
para registrar cualquier error que pueda estar ocurriendo:Esto te dará más información sobre cualquier error que pueda ocurrir durante la llamada a la API.