Могу ли я вызвать несколько ajax-запросов в компоненте контейнера? - PullRequest
Новая
       65

Могу ли я вызвать несколько ajax-запросов в компоненте контейнера?

0 голосов
/ 29 ноября 2018

Сколько запросов ajax я могу вызвать в componentDidMount () моего контейнерного компонента, чтобы он работал гладко.А также добавьте данные в немые (презентационные) компоненты в функции рендеринга контейнера.

Мой код полностью в порядке или мне нужно написать больше Компоненты контейнера для запросов AJAXи назначить данные для компонентов отдельно?

Вот мой код для Компонент контейнера : 

export class MainPage extends PureComponent {
  componentDidMount() {
    this.props.loadCarousels();
    this.props.loadBanners();
    this.props.loadSidebars();
  }

  render() {
    
    const bannerItemsLoading = this.props.bannerItemsLoading;
    const carouselItemsLoading = this.props.carouselItemsLoading;
    const sidebarItemsLoading = this.props.sidebarItemsLoading;
    const bannerItems = [...this.props.bannerItems];
    const sidebarItems = this.props.sidebarItems;
    const carouselItems = [...this.props.carouselItems];
    console.log("Carousel", {"isLoading": this.props.carouselItemsLoading, "items": this.props.carouselItems });

    return (
      <Fragment>
        <Helmet>
          <title>Home Page</title>
          <meta name="description" content="Description of MainPage" />
        </Helmet>
        <MainSlider items={bannerItems} isLoading={bannerItemsLoading} />
        <GenericWrapper >
          <GenericTwoColWrapper 
            contentForCol8={<Carousel isLoading={carouselItemsLoading} items={carouselItems} />} 
            contentForCol4={<SideBarStatic2 isLoading={sidebarItemsLoading}
              most_recent={sidebarItems.most_recent} popular={sidebarItems.popular} sidebars={sidebarItems.sidebar} 
            />} 
          />
        </GenericWrapper>
      </Fragment>
    );
  }
}

MainPage.propTypes = {
  // dispatch: PropTypes.func.isRequired,
  bannerItems: PropTypes.any,
  bannerItemsLoading: PropTypes.bool,
  carouselItems: PropTypes.any,
  carouselItemsLoading: PropTypes.bool,
  sidebarItems: PropTypes.any,
  sidebarItemsLoading: PropTypes.bool,
  loadBanners: PropTypes.func,
  loadCarousels: PropTypes.func,
  loadSidebars: PropTypes.func
};

const mapStateToProps = createStructuredSelector({
  carouselItems: makeCarouselItemsSelector(),
  carouselItemsLoading: makeBannerItemsLoading(),
  sidebarItems: makeSidebarItemsSelector(),
  sidebarItemsLoading: makeSidebarItemsLoading(),
  bannerItems: makeBannerItemsSelector(),
  bannerItemsLoading: makeCarouselItemsLoading()
});

function mapDispatchToProps(dispatch) {
  return {
    loadBanners: () => dispatch(loadBanners()),
    loadCarousels: () => dispatch(loadCarousels()),
    loadSidebars: () => dispatch(loadSidebars()),
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'mainPage', reducer });
const withSaga = injectSaga({ key: 'mainPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(MainPage);
...