React-redux action is called endlessly(infinite loop)

Question

The react-component is re-rendering endlessly when action is called inside an useEffect function

  useEffect(() => {
    props.getApi('pages/websitepage/page_type/choices')
  },[])

Here i am using connect method for dispatching the action(also tried the hooks way).

export function getApi(url) {
    return dispatch => {
      Axios
        .get(
            BASE_URL + url ,{
                headers: header
            }
        )
        .then(response => {
          dispatch(fetchResponse(response.data.data));
        })
        .catch(error => {
          console.log(error)
        });
    };
  }

export const fetchResponse = (data) => {
  console.log('data',data);
    return{
        type: 'FETCH_RESPONSE',
        payload: data
    }
};

as you can see here,i am calling action dispatch to store the state.but the component keeps on re-rendering,is there any possible solution for me to stop this behaviour? Attaching the logger response below

action FETCH_RESPONSE
    prev state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}
    action     {type: "FETCH_RESPONSE", payload: Array(4)}
    next state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}
action FETCH_RESPONSE
    prev state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}
    action     {type: "FETCH_RESPONSE", payload: Array(4)}
    next state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}
action FETCH_RESPONSE
    prev state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}
    action     {type: "FETCH_RESPONSE", payload: Array(4)}
    next state {isAuthenticated: true, error: null, isLoading: false, currentBlogPage: 0, submitting: false, …}