动态初始化助焊剂存储

Dynamic Initialization of Flux Stores

本文关键字:存储 初始化 动态      更新时间:2023-09-26

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

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

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

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


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

优点:在 Flux 架构中,我们的 ActionCreator 只能由 React Components 调用。 良好的关注点分离。

缺点:绝对疯狂的重复代码数量。 每次组件想要调用"UsersStore.getFriends(("(或任何其他存储 get 方法(时,它都必须在它后面检查返回值,如果为空,则调用 ActionCreator。 对于我们将要不断使用的东西来说,这是很多样板。


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

优点:非常精简。 每次我们请求信息时,我们都会收到它(即使这意味着等待下一次调度(,而无需在组件中输入任何重复的代码。

缺点:这似乎是Flux结构的弯曲(或断裂? 我们直接连接我们的 ActionCreator 和我们的品牌旗舰店。


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

优点:在 Flux 设计中,仅由组件发送操作。

缺点:围绕单一责任的通量设计之外;我们现在公开地给组件增加了管理存储初始化的任务。


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

帮助!

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

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

存储状态

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

因此,如果您使用命令式/OO 样式的通量方法进行编程,则选项 2 可能更简单且非常适合。如果您具有功能更强大的"redux"样式方法(https://github.com/reactjs/redux(,则选项 1 可能更适合。