I need to wait for my axios action to dispatch before continuing in 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)
}, [])
So console log here is undefined, I need to wait before
action:
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);
}
}
reducer:
const agencyBriefReducer = (state, {payload, type}) => {
switch (type) {
case 'GET_BRIEF':
return {
...state,
brief: payload
}
default:
return state
}
}
I've tried async / await but it doesn't work, I need to wait so I can use the result to set the state ? Thanks
ok, so one of the comments suggested 2 useEffects and that does the trick:
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 []
}, [])
Start by explaining why the source code does not behave as expected. useEffect(() => {}, []) Since the dependency is an empty array, this method will only be executed once when the page is initialized. In this render, the value of agencyBrief is always [], will not change.
If you want to monitor the change of the result after the await asynchronous request ends, you can do this:
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])
You can achieve it, I hope that would help.
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]);