我在哪里可以从React Redux应用程序的服务器中获取初始数据？

Question

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

我的状态由一系列网站描述，默认情况下为空。LOAD_SITES每当用户分页到其他页面时，以后的reducer就会采取措施加载不同的网站集，但目前它什么也没做。React从渲染开始PublishedSitesPage，然后渲染，然后渲染PublishedSitesBox然后遍历数据并渲染各个站点。

我想要做的是让它使用默认的空数组呈现所有内容，同时启动“从服务器加载站点”承诺，并在解决后立即调度LOAD_SITES操作。拨打电话的最佳方法是什么？我在想的任何构造PublishedSitesBox或者可能componentDidMount。但是不确定这是否行得通-
我担心的是，我将以这种方式创建一个无限循环，以保持重新渲染。我想我可以通过沿“
haveRequestedInitialData”行设置一些其他状态参数来以某种方式防止此无限循环。我的另一个想法是做完后马上做出这个承诺ReactDOM.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
});

Answer 1

这种数据加载逻辑完全没有理由接触您的React组件。您在这里想要返回的诺言是将操作分派给您的reducer，后者对存储进行适当的更改，然后使React组件适当地重新呈现。

（无论在调用ReactDOM.render之前还是之后启动异步调用都没有关系； promise会以任何一种方式起作用）

像这样：

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) {
  store.dispatch(someActionCreator(response));
});

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

您的React组件是商店的使用者，但是没有规则要求它们必须是商店的唯一使用者。