CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
flashbang
flashbang

Reputation: 1

Dispatching first runs undefined and then resolves in Redux Thunk

I am trying to use Redux thunk to feth data from an API and into redux, but I run into a problem where redux dispatches twice, once with an undefined action, and once with the actual action. i tried changing my action, changing my reducer and my thunk but nothing seems to work. I've succesfully used redux thunk before and never ran into this issue.

My thunk function

export const fetchCountryInfo = () => {
return async (dispatch,getState) => {
    const response = await Axios.get(https://api.covid19api.com/summary)
    console.log(response.data)
    dispatch({
        type:'updateCountryData',
        payload:response.data.Countries
    })
}

}

My reducer:`const reducer = (state = initialState, action) => {

return action.payload }`

Dispatching the action

const dispatch = useDispatch();


useEffect(() => {
    dispatch(fetchCountryInfo())
  });

Thunk dispatching with the actual text first

Upvotes: 0

Views: 355

Answers (1)

sasa
sasa

Reputation: 459

useEffect(() => {
  dispatch(fetchCountryInfo())
}, []);

Add [] with no deps, it will dispatch only once

Upvotes: 0

Related Questions