React 和 Flux - 何时加载数据？答案

【问题标题】：React and Flux - When to load the data?React 和 Flux - 何时加载数据？
【发布时间】：2015-09-09 14:59:22
【问题描述】：

我正在使用react-router 库和Flux 架构构建一个React 应用程序。

现在出现了一个疑问。我应该预先加载所有必需的数据，还是让每条路线在适当的时候加载它需要的数据？当用户通过编辑页面进入应用程序时，会很奇怪，当他保存表单时，它会转到对象列表，但在获取数据之前它是空的（只有一个对象）。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

您不希望深入预加载数据以预测用户将要做什么。它改善了列表屏幕的用户体验，但降低了编辑屏幕的用户体验。我一直在这条路上。一开始没问题，但是随着需求的变化，并且您开始也加载这个或加载那个，UX 真的走下坡路了。

在 Flux 中，您应该只在 Action 中加载数据。要为您的组件初始化数据，您可以从componentWillMount() 调用相应的操作。

如果您担心用户第一次导航到列表屏幕时看不到数据，您应该显示某种加载指示器。

如果您的数据加载缓慢，您应该实施渐进式加载方案（一次可能 5 个项目）。

对于外观示例，只需打开 facebook.com 上的主新闻提要。请注意，最初（取决于您的互联网速度），没有列出任何故事。您会看到将加载故事的模糊框。随着数据的加载，故事会出现。他们还实现了渐进式加载。请注意，当您（快速）向下滚动页面时，您会在加载和呈现较旧的故事之前在页面底部看到那个模糊的框。

【讨论】：

这就是我现在正在做的事情。也许我选择了一种糟糕的方式来存储通量数据。例如：在我的后端，我有一个 Ambient 类。所以在 React 上，我创建了 AmbientStore，我在其中保存了从服务器加载的所有环境。这样，当我只获取一个环境并将其存储在环境数组中时，会很尴尬。你明白吗？
好的。我做了类似的事情，但我将列表与当前列表分开存储。也许您的商店可能类似于init() { this.data = { ambients: [{id:1}, {id:2}], selectedAmbient: {id:2} } }。