title: Redux Thunk action with axios returning multiple values
body: <p>I have a React app that uses <code>redux-thunk</code> and <code>axios</code> to fetch an API. The action fires successfully, but returns multiple payloads which means it is firing multiple times.</p>
  
  <p>How can I make it fire only one time?</p>
  
  <h1>Code</h1>
  
  <h2>Actions</h2>
  
  <pre><code>import Axios from "axios";
  import { fetchEnglishLeagueTable } from "./ActionTypes";
  
  export function fetchEnglishTable() {
    var url = "https://api.football-data.org/v2/competitions/PL/matches";
    var token = "52c8d88969d84ac9b17edb956eea33af";
    var obj = {
      headers: { "X-Auth-Token": token }
    };
    return dispatch =&gt; {
      return Axios.get(url, obj)
        .then(res =&gt; {
          dispatch({
            type: fetchEnglishLeagueTable,
            payload: res.data
          });
        })
        .catch(e =&gt; {
          console.log("Cant fetch ", e);
        });
    };
  }
  
  </code></pre>
  
  <h2>Reducers</h2>
  
  <pre><code>import { fetchEnglishLeagueTable } from "../actions/ActionTypes";
  const initialState = {
    EnglishTable: {}
  };
  
  const rootReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case fetchEnglishLeagueTable:
        return {
          ...state,
          EnglishTable: action.payload
        };
      default:
        return state;
    }
  };
  
  export default rootReducer;
  </code></pre>
  
  <h2>Page</h2>
  
  <pre><code>const League = props =&gt; {
    useEffect(() =&gt; {
      props.getLeagueTable();
    }, [props.leagueTable]);
    console.log(props.leagueTable);
    return &lt;p&gt;ihi&lt;/p&gt;;
  };
  const mapStateToProps = state =&gt; ({
    leagueTable: state.EnglishTable
  });
  const mapDispatchToProps = dispatch =&gt; {
    return { getLeagueTable: () =&gt; dispatch(fetchEnglishTable()) };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(League);
  </code></pre>
  
  <h2>Store</h2>
  
  <pre><code>import rootReducer from "./Reducer";
  import thunk from "redux-thunk";
  
  const store = createStore(rootReducer, applyMiddleware(thunk));
  
  export default store;
  </code></pre>
  
  <p>Here is what it returns <a href="https://i.stack.imgur.com/zxfj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zxfj4.png" alt="Multiple Action firing"></a></p>