IT技术 - 在 React Redux 应用程序中，我在哪里从服务器获取初始数据？ - 吾爱随笔录

我已经开始学习 React / Redux 并偶然发现了一些可能是非常基本的问题。下面是我的应用程序的片段，为了简单起见，删除了一些代码。

我的状态由默认情况下为空的站点数组描述。以后LOAD_SITES，每当用户分页到不同的页面时，reducer 都会执行加载一组不同的站点的操作，但现在它什么都不做。React 从渲染开始PublishedSitesPage，然后渲染PublishedSitesBox，然后循环遍历数据并渲染各个站点。

我想要做的是让它使用默认的空数组呈现所有内容，同时启动“从服务器加载站点”的Promise，一旦解决，就调度LOAD_SITES操作。拨打此电话的最佳方式是什么？我在想的任何构造PublishedSitesBox或者可能componentDidMount。但不确定这是否可行 - 我担心的是我会以这种方式创建一个无限循环，以继续重新渲染。我想我可以通过在“haveRequestedInitialData”的行中使用其他一些状态参数来以某种方式防止这种无限循环。我的另一个想法是在做完之后立即做出这个PromiseReactDOM.render()。什么是最好和最干净的方法来做到这一点？

export default function sites(state = [], action) {
  switch (action.type) {
    default:
      return state;
  }
}
...

const publishedSitesPageReducer = combineReducers({
  sites
});

ReactDOM.render(
  <Provider store={createStore(publishedSitesPageReducer)}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() {
  return (
    <PublishedSitesBox/>
  );
}

...

function mapStateToProps(state) {
  return { sites: state.sites };
}

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => {
  // render sites
});