javascript - Flux商店的动态初始化

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

由于各种原因，仅在首次请求数据时初始化商店才有意义。如果我正在设计Facebook个人资料，我不需要加载“朋友”列表。直到用户点击＆＃34;朋友＆＃34;标签

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

我已经提出了几个解决方案，但似乎没有一个完美。

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

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

缺点：绝对疯狂的重复代码。 组件想要调用的每个时间＆＃34; UsersStore.getFriends（）＆＃34; （或任何其他商店获取方法），它必须跟随它，检查返回值和ActionCreator调用，如果为空。对于我们将要不断使用的东西，这是很多样板。

当组件需要数据时，它会调用商店的Get方法。 在此get方法中，Store自身会验证响应是否为空。如果是，则Store本身会触发检索数据的操作。

PROS：非常精简。每当我们请求信息时，我们肯定会收到它（即使它意味着等待下一次调度），而不需要在组件中重复代码。

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

在每个组件的componentDidMount和/或componentWillReceiveProps挂钩中，包含对ActionCreator的调用，以初始化此组件所需的任何商店。

PROS：在Flux设计中，只允许组件发送操作。

缺点：围绕单一责任的Flux设计;我们现在通过管理商店初始化的任务来明显增加组件负担。

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

帮助！

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

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

商店状态getter总是纯函数，没有副作用（并且经常根据实际访问的商店状态部分进行备忘，以提高性能 - 有点类似于'reselect'库：https://github.com/reactjs/reselect ）。

因此，如果您使用更强制性/ OO风格的通量方法进行编程，则选项2可能更简单且更合适。如果你有一个更实用的'redux'风格方法（https://github.com/reactjs/redux），那么选项1可能更适合。

Flux商店的动态初始化

1 个答案: