title: Redux - when two component share the same method for initial data load
body: <p>I've come across this problem a few times in my time with Redux and React, as I'm new to it, I'm a bit curious as to what the "best practices" or good alternatives for solutions to this problem are.</p>
  
  <p>A good example is say we are loading the page view for some "Group". A group can have - for example - a banner, a sidebar (information about the group), group posts, etc. Obviously we can decouple these, groupPosts are their own container....but then what about the group sidebar and group banner? Are we going to use two AJAX calls just to get the same categorical information about the group like this:</p>
  
  <ul>
  <li> One AJAX call to fetch perhaps the group banner, avatar and name
  <li> Another AJAX call to fetch the group information, description, etc.
  </ul>
  
  <p>This seems quite wasteful, especially (in my case and I'm sure with other cases) when the endpoint in the API is the same, that is getting the group data (<code>banner</code>, <code>name</code>, <code>date_founded</code>, other metadata, etc.) requires querying <code>webapp.com/php/group/group_id</code> so really the component <code>GroupBanner</code> and <code>GroupSidebar</code> are querying the same endpoint twice and just only using part of the data, when it would be much more efficient if we only queried it once and sent the <code>banner</code> info to <code>GroupBanner</code> component and then we send the rest to <code>GroupSidebar</code> component. This allows to denote some parent container <code>GroupMetadataContainer</code> to get the metadata from <code>/php/group/group_id</code> and is responsible for sending whatever is needed to <code>GroupBanner</code> and <code>GroupSidebar</code>. But then we run into troubles in the view logic as their render methods must be a single root, thus <code>groupPosts</code> cannot be positioned accordingly like so:</p>
  
  <pre><code>------------------------------------
  |         Group Banner             |
  ------------------------------------
  |         ||                       |
  |         ||                       |
  | SideBar ||    Group Posts        |
  |         ||                       |
  |         ||                       |
  </code></pre>
  
  <p>By declaring a larger "container" for <code>GroupBanner</code> and <code>GroupSidebar</code> their render methods become shipped as one awkward large component:</p>
  
  <pre><code>------------------------------------
  |         Group Banner             |
  ------------------------------------
  |         |
  |         |
  | SideBar |
  |         |
  |         |
  </code></pre>
  
  <p>Another method is to have each of them call the same method <code>this.fetchGroup()</code>, and then just make a marker if it has been called before in the current context, meaning that either one of <code>GroupBanner</code> or <code>GroupSidebar</code> has already called it and we can just wait for that data to come in and give it accordingly, thus avoiding two AJAX calls. However, this doesn't seem very scalable, it groups their logic together, and I'm sure there is a more sophisticated way I am missing, or an inherent problem with my structure. How can we decouple the "data load" of these components that share data without entangling other things (or how has anyone else been surmounting this)?</p>