title: Call Axios, then call separate Axios call for each returned item
body: <p>I got my Axios calls to update, but request is returned to my reducer. The problem is that the first axios call updates my state, then my second group of promises does not update my component immediately. </p>
  
  <pre><code>export function selectRoutingBooks(routing) {
      const url = `${ROOT_ROUTINGS_URL}/${routing.RoutingId}/${routing.VersionId}/books`;
      let promises = [];
      const request = axios.get(url).then((response)=&gt;{
          response.data.map((item)=&gt;{
              const url2 = `${ROOT_ITEMS_URL}/${item.MatItemKey}?all=true`;
  
              promises.push(axios.get(url2));
          });
          axios.all(promises).then(function(results) {
              results.forEach(function(res) {
  
                  let common = response.data.find(x=&gt;x.MatItemKey === res.data.base.ItemKey);
  
  
                  let newCommon = {...common, ...res.data};
  
  
                  var i = response.data.findIndex(o =&gt; o.MatItemKey === newCommon.base.ItemKey);
                  if (response.data[i]) { response.data[i] = newCommon }
  
              })
          });
          return response
      });
  
      return {
          type: ROUTING_BOOKS,
          payload: request
  
      }
  }
  </code></pre>
  
  <p>I am not entirely sure how to get all of my promises to update my state at the same time. When I check in </p>
  
  <pre><code>componentWillUpdate(){
      console.log("Component will update RoutingDetail", this.props.routingBooks)
  }
  </code></pre>
  
  <p>I am getting all the data, but the props don't update here. </p>
  
  <p>TIA</p>