javascript - 获取 React/Redux 应用程序初始数据的最佳实践是什么？

Question

假设我有一个应用程序:

1. 可以登录/注销的用户；
2. 与所用数据无关的任何其他内容。例如，城市列表。

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

1. 在 componentWillMount 方法中获取城市
2. 由于这些城市无法更改，并且很可能会在其他页面上使用，因此将列表放入 redux 存储中。

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

那么，问题 - 对于所描述的案例，最佳实践是什么？

Answer 1

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

等待调用完成的问题是，您的应用程序在全部完成之前不会启动，因此根据数据大小，这会严重影响性能。从一个空的 redux 存储开始可能会更整洁，但是在 Bootstrap 上触发一堆请求，这些请求将在它们返回时调度操作。例如

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>);
}

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