通量存储的动态初始化

Question

基于 Flux 的系统如何处理未初始化的商店。

出于各种原因，仅在首次请求数据时才初始化存储是有意义的。如果我正在设计 Facebook 个人资料，在用户单击“朋友”选项卡之前，我不需要加载“朋友”列表。

但是如果我们已经已经将该数据加载到存储中，可能是由于之前需要数据的不同反应组件，我们不想发送对 ActionCreator / API 的不必要调用-util （因此不必要地对服务器征税，并通过一直等待 ajax 调用来取消 reactjs 快速渲染的好处）。

我想出了几个解决方案，但没有一个看起来很完美。

---

1. 当组件需要数据时，它会调用 store 的 Get 方法。如果它没有收到任何信息（空对象或未定义），它会触发一个操作来检索该数据。

优点：看似在 Flux 架构中，我们的 ActionCreator 仅由 React 组件调用。良好的关注点分离。

缺点：绝对数量惊人的重复代码。 每次组件想要调用“UsersStore.getFriends()”（或任何其他存储获取方法）时，它必须在其后检查返回值，如果为空则调用 ActionCreator。对于我们将不断使用的东西来说，这是很多样板。

---

1. 当组件需要数据时，它会调用 store 的 Get 方法。 在这个 get 方法中，Store 自己验证响应是否为空。如果是，Store 本身会触发一个操作来检索数据。

优点：非常精简。每次我们请求信息时，我们肯定会收到它（即使这意味着等待下一次分派），而无需在组件中编写任何重复代码。

缺点：这似乎是 Flux 结构的一个弯曲（或中断？）。我们正在直接连接我们的 ActionCreator 和我们的商店。

---

1. 在每个组件的 componentDidMount 和/或 componentWillReceiveProps 挂钩中，包括对 ActionCreator 的调用，以初始化该组件所需的任何存储。

优点：在 Flux 设计中，动作仅由组件发送。

缺点： 围绕单一职责的 Flux 设计之外；我们现在公开地让组件承担管理商店初始化的任务。

---

这些有效的设计模式是否可用于初始化通量存储？我错过了第四个更好的选择吗？

救命！

Answer 1

Facebook 在内部至少使用了您的选项 2 一次 - 请参阅 https://news.ycombinator.com/item?id=7721292

在我的大型客户端应用程序中，我们使用选项 1。但是，没有任何代码重复。大多数 getter 函数返回一个“MaybeData”实例，其中包括一个包含数据的“数据”字段、它的占位符或当前可用的部分数据。它还包括一个“dataQueries”字段，其中包含使“数据”完整所需的“查询”列表（如果有）。然后，通用通量包装器 React 组件为它返回的任何查询分派一个操作。 （通用 Flux 包装器组件将 store 状态映射到 React 组件状态，然后将其作为 props 传递给被包装的组件，例如 Facebook Flux 的 Container (https://facebook.github.io/flux/docs/flux-utils.html#content)）

存储状态获取器始终是没有副作用的纯函数（并且通常基于它们实际访问的存储状态部分进行记忆化，以提高性能 - 有点类似于“重新选择”库：https://github.com/reactjs/reselect）。

因此，如果您使用更命令式/OO 风格的通量方法进行编程，选项 2 可能更简单且更合适。如果您有更实用的“redux”风格方法 (https://github.com/reactjs/redux)，选项 1 可能更合适。