title: Synchronising Async Redux actions for optimistic fetching
body: <p>I'm building a product listing grid (like in an e-commerce site homepage) with Redux. The user can scroll infinitely and items are loaded from the server as they scroll. There is also a preemptive fetch during idle time, for the next batch of items. </p>
  
  <p>I have modelled my redux actions (partially) as below: </p>
  
  <ul>
  <li><p><strong>FETCH_PRODUCTS_REQUEST</strong>: dispatched when a request is initiated</p></li>
  <li><p><strong>FETCH_PRODUCTS_SUCCESS</strong>: dispatched when the earlier request was successful</p></li>
  <li><strong>LOAD_PRODUCTS</strong>: dispatched when the user is scrolling to near page bottom, so the prefetched items can be loaded onto the DOM.</li>
  </ul>
  
  <p>During an intermediate <strong>LOAD_PRODUCTS</strong>, I can set a timeout to dispatch <strong>FETCH_PRODUCTS_REQUEST</strong> in order to preemptively fetch the set of items for the next batch.</p>
  
  <p>However, I'm not entirely sure how to sync these actions on the initial page load (ie, when the ProductGrid component has mounted). I would ideally want to dispatch a <strong>FETCH_PRODUCTS_REQUEST</strong> on component mount and then wait for the <strong>FETCH_PRODUCTS_SUCCESS</strong> to happen and then dispatch <strong>LOAD_PRODUCTS</strong>. </p>
  
  <p>Considering the one way data flow in Redux, I'm not clear on how I can make sure the initial <strong>FETCH_PRODUCTS_SUCCESS</strong> has been fired (ie, my store has preemptive data) before I can dispatch a <strong>LOAD_PRODUCTS</strong> to render this data onto the DOM. </p>
  
  <p>I'm using the <em>redux-saga</em> library to dispatch async actions.</p>
  
  <p>Any help would be appreciated!</p>