0

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

flashbang
  • 1

1 Answers1

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

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

sasa
  • 399
  • 2
  • 8
  • I tried that, but this is a different problem, see the link. The first time it dispatches, it returns the function itself as the action. – flashbang Jan 04 '22 at 15:56