获取react / redux应用程序的初始数据的最佳实践是什么？

Question

让我们说我有一个申请表：

1. 可以登录/退出的用户;
2. 与使用过的数据无关的任何其他内容。例如，城市列表。

在服务器html渲染应用程序中，我从数据库中获取城市，然后使用带有这些城市的选择字段形成html页面。在React我有一个选择：

1. 使用componentWillMount方法或
获取城市
2. 由于这些城市无法更改且最有可能在其他页面上使用，请将列表放入redux商店。

在我看来，我必须实现一些返回所有初始数据的API方法，但它看起来很脏。

那么，问题 - 这个描述的案例的最佳做法是什么？

Answer 1

为获得最佳性能，您应该只在需要时获取数据，否则会占用内存和带宽。如果您确定用户将始终需要列表，那么可以预加载它。无需在单个API方法中返回所有初始数据 - 您可以在应用程序引导期间创建一个部分，触发一堆API调用，等待所有结果，然后使用这些初始值创建redux存储。

等待调用完成的问题是，您的应用程序在完成所有操作后才会启动，因此根据数据大小会显着影响性能。从一个空的redux存储开始可能更整洁，但是在引导时发出一堆请求，它们会在返回时发送动作。 E.g。

function bootstrap() {
   const store = createStore();
   fetchCities().then( cities => store.dispatch({
       type: "UPDATE_CITIES",
       cities
   });
   fetchCountries().then( countries => store.dispatch({
       type: "UPDATE_COUNTRIES",
       countries 
   });

   ReactDOM.render(<Provider store={ store }><MyApp /></Provider>);
}

这可以让您触发数据加载，但您的应用可以在等待数据时开始渲染。