title: Multiple AJAX calls in one page in React and Redux
body: <p>I am trying to create something like a front page of new websites where you get data of multiple categories.  </p>
  
  <p>My component structures looks like this:  </p>
  
  <p>MainContainer<br>
  --TopContainer<br>
  --MiddleContainer<br>
  --BottomContainer  </p>
  
  <p>Each container has different structures, and in MainContainer, I am making AJAX calls like this:  </p>
  
  <pre><code>class MainContainer extends React.Component {
     componentDidMount(){
        this.props.fetchPopularArticles();
        this.props.fetchRecentArticles();
        this.props.fetchCategory1Articles();
        this.props.fetchCategory2Articles();
     }
     render() {
         const {popular, recent, category1, category2} = this.props;
         return (
            &lt;div id="mainContent"&gt;
               &lt;TopContainer popular={popular} recent={recent}/&gt;
               &lt;MiddleContainer category1={category1}/&gt;
               &lt;BottomContainer category2={category2}/&gt;
            &lt;/div&gt;
         );
      }
  </code></pre>
  
  <p>All data is fetched without any problem, but in the browser, every component gets the same props or data that fetched last. so data I see in the browser are all the same.  </p>
  
  <p>What am I doing wrong?</p>