title: Multiple API calls with Promise.all and dispatch an action
body: <p>I want to call multiple API's and store each response data in an object then I want to dispatch this response object but I'm getting undefined.</p>
  
  <p>Below is the code I tried. May I know where I'm doing wrong?</p>
  
  <pre><code>/* COMPONENT.JSX */
  componentDidMount() {
    callApis(this.props.products, this.props.profileId);
  }
  
  /* API.JS */
  const getContactDetails = (http, profileId) =&gt; 
   (http.get(`https://www.fakeurl.com/${profileId}/contact`));
  
  const getProductDetails = (http, profileId) =&gt; 
    (http.get(`https://www.fakeurl.com/${profileId}/product`));
  
  const callApis = (products, profileId) =&gt; (dispatch) =&gt; {
  
    const payload = new Map();
  
    products.forEach((product) =&gt; {
  
    const apis = [getContactDetails, getProductDetails];
  
    apis.map(api =&gt; api(http, profileId));
  
    Promise.all(apis)
        .then((response) =&gt; {
            const apiData = {
                contactData: getParsedContactData(response[0]),
                productData: getParsedProductData(response[1])
            };
            if (payload.get(product.token)) {
                payload.get(companion.token).push(apiData);
            } else {
                payload.set(product.token, [apiData]);
            }
        })
        .catch(err =&gt; {
            throw ('An error occurred ', err);
        });
     });
     dispatch({ type: FETCH_API_DATA, payload: payload });
  }
  </code></pre>
  
  <p>I expect the dispatch will be called after all API's were resolved, get parsed, and map into the payload object then it should dispatch.</p>