title: How to handle caching when having multiple React.js component instances with data requests?
body: <p>I'm working on a project where on the same page I have multiple React components.
  Some of them are making the same web service call</p>
  
  <p>When I run the app I find that this service call is made twice or even more depends on the number of instances</p>
  
  <p>What I want is to make this call once and cache it, and whenever any component wants this data they can read it from the store cache.</p>
  
  <p>I tried to set some sort of a flag that whether the data is fetched or not, but because that all of the instances are loaded at the same time they all see the flag with the initial value</p>
  
  <p>Code:<br>
  In the component code I have this:</p>
  
  <pre><code>class WeightCharts extends React.Component {
  componentWillMount() {
      const Component = this;
      this.state = {
          weight: null
      }
      AppActions.getWeight();
  
  }
  </code></pre>
  
  <p>Please note: <code>AppActions.getWeight()</code> which is the data fetching action</p>
  
  <p>So if I have for example 3 instances of <code>&lt;WeightCharts /&gt;</code> a 4 calls will be made</p>
  
  <p>My proposed solutions:<br>
  1- Passing this data as a props from a top level component but then the component will be heavily dependant on a parent component</p>
  
  <p>2- In the component I may try to get the data from the store and if the store didn't find the data in the cache it should trigger the fetch action
  But as far as I understand triggering an action from a store is anti pattern</p>
  
  <p>My project is an open source if you want to take a deeper look:<br>
  <a href="https://github.com/muhammad-saleh/weightlyio" rel="nofollow">https://github.com/muhammad-saleh/weightlyio</a></p>
  
  <p>Thanks a lot.</p>