es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

obteniendo indefinido en la respuesta thunk

01 Aug, 2023 Programación

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

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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ón createAsyncThunk para registrar cualquier error que pueda estar ocurriendo:

    export const fetchMemoryAsync = createAsyncThunk(
  "memory/recentPublishedApi",
  async (obj) => {
    const response = await RecentPublishedApi(obj);
    console.log("Estoy dentro del thunk", response);
    return response;
  },
  {
    onRejected: (error) => {
      console.log(error);
    },
  }
);

    Esto te dará más información sobre cualquier error que pueda ocurrir durante la llamada a la API.

Comments are closed.