Javascript 通量存储的动态初始化

基于流量的系统如何处理未初始化的存储。

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

但是，如果我们已经将该数据加载到存储中，可能是因为以前需要该数据的react组件不同，那么我们不希望发送不必要的调用到ActionCreator/API util（这样会对服务器造成不必要的负担，并通过一直等待ajax调用来取消reactjs快速呈现的好处）

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

---

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

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

缺点：大量的重复代码。每当组件想要调用“UsersStore.getFriends（）”（或任何其他store get方法）时，它必须在调用之后检查返回值，如果为空，则调用ActionCreator。对于我们将经常使用的东西来说，这是很多样板

---

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

优点：非常流线型。每次我们请求信息时，我们都会确保收到信息（即使这意味着等待下一次发送），而不需要组件中的任何重复代码

缺点：这似乎是通量结构的弯曲（或断裂？）。我们直接连接ActionCreator和商店

---

在

componentDidMount

和/或

componentWillReceiveProps

每个组件的钩子中，包括对ActionCreator的调用，以初始化此组件所需的任何存储

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

缺点：在焊剂设计之外，围绕单一责任；我们现在公开地将管理存储初始化的任务强加给组件

---

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

---

救命啊

Facebook内部至少使用过您的选项2一次-请参阅

在我的大型客户端应用程序中，我们使用选项1。但是，没有任何代码重复。大多数getter函数返回一个“MaybeData”实例，其中包括一个包含数据的“data”字段、占位符或当前可用的部分数据。它还包括一个“dataQueries”字段，其中包含完成“数据”所需的“查询”列表（如果有）。通用的flux包装器React组件然后为其返回的任何查询分派一个操作。（通用的flux包装器组件将存储状态映射为React组件状态，然后将其作为道具传递给包装的组件，如Facebook flux的容器（））

存储状态获取程序始终是纯函数，没有任何副作用（并且通常根据它们实际访问的存储状态部分进行记忆，以提高性能—有点类似于“重新选择”库：）

---

因此，如果您使用更具命令式/OO风格的通量方法进行编程，那么选项2可能更简单，也更适合。如果您有更实用的“redux”风格的方法（），选项1可能更合适。

非常好的信息，谢谢！我认为我显然忽略了包装器/容器组件，它负责管理和传播数据。有了这个单一的联系点，就可以完全减少重复代码的问题，这与Dispatcher不需要进行多个数据查询来填充不同的存储区的方式大致相同。