在React和Redux中的一个页面中进行多次AJAX调用

Question

我正在尝试创建类似于新网站首页的内容，您可以在其中获取多个类别的数据。

我的组件结构如下所示：

mainContainer上
--TopContainer
--MiddleContainer
--BottomContainer

每个容器都有不同的结构，在MainContainer中，我正在进行这样的AJAX调用：

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 (
          <div id="mainContent">
             <TopContainer popular={popular} recent={recent}/>
             <MiddleContainer category1={category1}/>
             <BottomContainer category2={category2}/>
          </div>
       );
    }

所有数据都没有任何问题，但在浏览器中，每个组件都获得相同的道具或最后获取的数据。所以我在浏览器中看到的数据都是一样的。

我做错了什么？