Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

262
Views
Cómo usar Async/Await o Promise en la función de reducción para que cuando inicialice mi estado inicial (a través de axios), la función de reducción. debería esperar

en la función reductora, quiero inicializar el estado inicial que primero se actualiza con algunos datos a través de una llamada API (por Axios), luego pasará a través de la función reductora.

El problema es que cuando se está actualizando a través de una llamada a la API, el reductor no ha tomado el estado actualizado, lo que me di cuenta cuando accedí al estado inicial en un componente diferente, que me mostrará la primera inicialización.

Estado inicial

 var seriesData = { horror:[], comedi:[], romantic:[] }

Llame a la API a través de AXIOS e intente actualizar el estado inicial

 var gen_typ = ['horror','comedi','romantic'] gen_typ.forEach(elm => { axios.get(`${process.env.REACT_APP_SD_API}${elm}`) .then((result) => { seriesData = {...seriesData,elm:result} }).catch((err) => { console.log(err); }); });

Función reductora

 export function SD_Operation(state = seriesData,action){ switch(action.type){ case "GET_MORE": return{ ...state, [action.payload.genTyp]:[...state[action.payload.genTyp],action.payload.data]} default: return state; } }

cuando accedo al estado inicial en uno de mis componentes y salgo de la consola

componente interior

 var Series_data = useSelector(state => state.SD_Operation); useEffect(()=>{ console.log('@login page',Series_data) ; },[])

salida que obtengo

@página de inicio de sesión {horror: Array(0), comedia: Array(0), romántica: Array(0)}

 comedi: [] horror: [] romantic: []

salida que espero

una matriz de datos

{horror: Array (algo largo), comedia: Array (algo largo), romántico: Array (algo largo)}

 comedi: [{},{}....] horror: [{},{}....] romantic: [{},{}....]
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Este es un escenario típico, y comúnmente resuelto de manera diferente:

  1. El estado inicial de su reductor es simplemente vacío. Los datos aún no están allí cuando se carga la aplicación, así que defínalos en consecuencia.
  2. Cree una acción asíncrona (usando thunk u otro middleware) que obtenga los datos de la API.
  3. Despache esta acción cuando su componente raíz se monte (en componentDidMount o a través de un useEffect de uso con una matriz de dependencia vacía).
  4. Cualquier otro selector y componente que use estos datos de API debe tener en cuenta el estado vacío inicial.
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!