title: Awaiting Multiple Axios Calls before Dispatching Action in React Redux
body: <p>I have a React Redux app that needs to call multiple API endpoints using <code>axios</code>, await the results from these API calls, then dispatch an action.</p>
  
  <p><strong>Problem:</strong> In my current implementation below, it appears that the action is being dispatched by <code>redux-thunk</code> before the API call results are returned by <code>axios</code>.</p>
  
  <p>How can we fix the problem so that we wait for all 3 results to be returned from the 3 <code>axios</code> calls, before dispatching the action?</p>
  
  <p><strong>/src/actions/index.js</strong></p>
  
  <pre><code>const axios = require('axios');
  import { GET_PRICES } from './types';
  
  export function getSpotPrice(crypto) {
      axios.get(`https://api.coinbase.com/v2/prices/${crypto}-USD/spot`).then( (response) =&gt; {
          return parseFloat(response.data.data.amount);
      }).catch((err) =&gt; {
          console.log(err)
      })
  }
  
  function timeout(ms) {
      return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }
  
  export function getSpotPrices() {
      return function(dispatch) {
          const cryptoList = ['BTC', 'ETH', 'XRP'];
          let cryptoRates = {}
  
          cryptoList.forEach(async (crypto, i) =&gt; {
              await timeout(1000);        // Wait 1 sec between API calls
              cryptoRates[crypto] = await getSpotPrice(crypto);
          });
  
          dispatch({
              type: GET_PRICES,
              payload: cryptoRates,
          })
          console.log('cryptoRates:', cryptoRates)        // returns {}
      }
  }
  </code></pre>