Necesito esperar a que se envíe mi acción axios antes de continuar en UseEffect
import { getBrief } from '../../store/actions/agency-brief' import agencyBriefReducer from '../../store/reducers/agency-brief-reducer' const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, []) useEffect(async () => { await getBrief(briefId)(dispatch); console.log('BRIEF', agencyBrief) }, [])Entonces, el registro de la consola aquí no está definido, necesito esperar antes
acción:
export const getBrief = (briefID) => async (dispatch) => { try { let res = await axiosInstance.get(`/agency_briefs/reactGetBrief/${briefID}`) console.log('sre', res ) return dispatch({ type: 'GET_BRIEF', payload: res.data }) } catch (err) { console.error(err); } }reductor:
const agencyBriefReducer = (state, {payload, type}) => { switch (type) { case 'GET_BRIEF': return { ...state, brief: payload } default: return state } }Intenté async/await pero no funciona, ¿debo esperar para poder usar el resultado para establecer el estado? Gracias
ok, entonces uno de los comentarios sugirió 2 useEffects y eso funciona:
useEffect(() => { getBrief(briefId)(dispatch); }, []) useEffect(() => { console.log('BRIEF', agencyBrief) }, [agencyBrief.brief])const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, []) useEffect(async () => { await getBrief(briefId)(dispatch); console.log('BRIEF', agencyBrief) // will always console [] }, []) Comience explicando por qué el código fuente no se comporta como se esperaba. useEffect(() => {}, []) Dado que la dependencia es una matriz vacía, este método solo se ejecutará una vez cuando se inicialice la página. En este render, el valor de agencyBrief siempre es [] , no cambiará.
Si desea monitorear el cambio del resultado después de que finaliza la solicitud asincrónica de espera, puede hacer esto:
const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, []) useEffect(async () => { await getBrief(briefId)(dispatch); }, []) useEffect(() => { // Now agencyBrief is the latest value after await async request ends console.log('BRIEF', agencyBrief) }, [agencyBrief])Puedes lograrlo, espero que eso ayude.
import { getBrief } from '../../store/actions/agency-brief' import agencyBriefReducer from '../../store/reducers/agency-brief-reducer' const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, []); const getBrief = async () => { await getBrief(briefId)(dispatch); } useEffect(() => { getBrief(); }, []) useEffect(() => { if (agencyBrief) { // perform action } }, [agencyBrief]);