title: Combining multiple async actions that have independent reducers
body: <p>I have two action files. <code>book_actions.js</code> and <code>author_actions.js</code>. They have their own reducers file as well.</p>
  
  <p>When I fetch an author, it returns me a list of book ids. I would then like to fetch all these books.</p>
  
  <pre><code>author_actions.js
  export const fetchAuthorAndBooks = (authorId) =&gt; (dispatch: Dispatch) =&gt; {
  fetchAuthor(authorId).then((author) =&gt; {
    author.bookIds.each((id) =&gt; {
        dispatch(fetchBook(id))
    })  
  });
  
  }
  </code></pre>
  
  <p>I want to wait for the author and the book fetching to complete before rendering anything on screen. To accopmbilish this I was going
  to add a loading flag on each reducer state. Then when nothing is loading, render the components with all the data that was returned</p>
  
  <p>Is this the correct way to handle multiple async calls on different actions files? It seems wrong to add a loading property in each reducer
  just for this. Should I be doing this in <code>author_actions.js</code> or a container component which dispatches these actions?</p>