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.

Cuando intento llamar a la API usando thunk, obtengo “undefined”.

01 Aug, 2023 Programación

Estoy utilizando React con Redux Toolkit para llamar a mi API y almacenar la respuesta en el estado, pero cada vez que llamo al async thunk, obtengo undefined como respuesta, pero al registrar 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 segmento de memoria.

“`import { createSlice, createAsyncThunk } from “@reduxjs/toolkit”;
import { RecentPublishedApi } from "../../components/api/api";

export const fetchMemoryAsync = createAsyncThunk(
"memory/recentPublishedApi",
async (obj) => {
const response =await RecentPublishedApi(obj);
console.log("Estoy dentro del async 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("cumplido")
state.status = "inactivo";
console.log(action)
state.data=action.payload;
},
[fetchMemoryAsync.rejected]: (state, action) => {
state.status = "fallado";
state.error = action.payload;
},
},
});

export const selectData = (state) => state.memory.data;

export default MemorySlice.reducer;
“`

Mi enlace de CodeSandbox:

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría estar en la forma en que estás llamando a la función de la API. Verifica nuevamente que los parámetros que pasas a la función sean correctos y que el punto final de la API esté devolviendo la respuesta esperada.

    Además, asegúrate de manejar correctamente los errores en la llamada a la API y devolver una respuesta adecuada en caso de un error.

    En tu código, tal vez quieras agregar un registro adicional o manejo de errores para investigar más a fondo el problema. Por ejemplo, podrías utilizar console.log en action.error dentro del extraReducer rechazado para ver si se devuelve algún mensaje de error.

    También podrías intentar simplificar tu código eliminando la sintaxis async/await en el thunk y, en su lugar, usando el método .then() para ver si eso resuelve el problema. Aquí tienes un ejemplo de cómo podrías modificar tu thunk fetchMemoryAsync para usar .then():

    export const fetchMemoryAsync = createAsyncThunk(
  "memory/recentPublishedApi",
  (obj) => {
    return RecentPublishedApi(obj).then(response => {
      console.log("estoy dentro del thunk", response);
      return response;
    }).catch(error => {
      console.log("error al obtener los datos de la memoria", error);
      throw error;
    })
  }
);

    ¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.

Comments are closed.