如何在 Flux / ReactJS 中处理多个相同类型的商店?

Posted

技术标签:

【中文标题】如何在 Flux / ReactJS 中处理多个相同类型的商店?【英文标题】:How to handle multiple stores of same type in Flux / ReactJS? 【发布时间】:2015-07-26 16:02:41 【问题描述】:

我是 Flux/React 的新手,我很难理解一些基本架构决策:

    我知道所有商店都是单例的,但它们都是在应用启动时创建的,还是商店的生命周期可以更短,特定于用户的操作? 我可以拥有多个相同商店类型的实例,每个实例都使用不同的上下文进行初始化吗?

不幸的是,我看到的所有示例似乎都过于简单,无法回答这些问题。让我们从Facebook's chat app example 开始。有多个线程,每个线程都有消息。 MessageStore 保存整个应用程序的所有消息,名为 getAllForThread(id) 的方法返回过滤后的消息子集。当消息进入任何线程时,它会发出一个更改通知,导致 MessageSection 反应组件重新获取数据(无论用户正在查看哪个线程)。这显然不能扩展。如果我们有 10,000 个线程,每个线程都有大量的消息活动怎么办?以下是我决定解决问题的方法:

    每个 MessageStore 都使用线程 ID 进行初始化。 创建一个单独的 MessageStoreFactory,用于创建和管理 MessageStore。 当用户单击一个线程时,它会向 MessageStoreFactory 询问 该特定线程的 MessageStore,而不是订阅全局 MessageStore 的 React 组件。 如果工厂已经有该线程的 MessageStore,则返回它。否则,它会创建一个,启动一个异步任务来为其获取初始数据,然后返回它。 当 React 组件被拆除时(假设用户离开它),它会通知 Factory 一切都通过 Store 完成。使用引用计数或其他一些缓存逻辑将允许工厂修剪未使用的存储。

我用这种方法离基地有多远?有没有更简单的方法仍然可以扩展?

【问题讨论】:

"这显然无法扩展。" - 我会小心不要对商店和组件的大规模行为做出假设。 React 的 diffing 最小化了 DOM 操作,“componemtShouldUpdate”可以在渲染过程之前捕获东西。您可以聪明地了解更新数据提取器要求的内容(可能要求自 messageId #16456 而不是 getTheMessages 以来的最新更改)。 【参考方案1】:

根据用户正在查看的线程,使更智能数据获取似乎更容易。我可以在一些博客文章或演示文稿中看到这个 facebook 的示例吗?

【讨论】:

用链接更新了我的问题。 Here it is again. 获取数据不一定是这里的问题。如果 MessageStore 保存每个线程的所有消息,那么每次有消息进来时都会产生一个 change 事件。这将使 MessageStore 异常嘈杂。即使 fetching 更加优化,它仍然会导致许多 react 组件在它们并不真正感兴趣时处理这些事件。那是似乎无法扩展的部分。 你可能需要实现 shouldComponentUpdate 方法来防止重新渲染。因为这个方法会经常被调用,所以它需要很快。但是你可以使用不可变的数据结构 (facebook.github.io/immutable-js) 但是你可以使用不可变的数据结构。这将使 shouldComponentUpdate 方法变得非常简单和快速。 facebook.github.io/react/docs/advanced-performance.html 我会将此答案标记为正确,但更多是因为您建议使用 immutable-js 而不是您的实际答案。我们仍然对可扩展性感到紧张,因此我们计划研究涉及刷新存储数据缓存和智能获取的方法。我确信 immutable-js 将有助于最终解决方案。

以上是关于如何在 Flux / ReactJS 中处理多个相同类型的商店?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Stores 管理 Flux/ReactJS 应用程序中的状态?

ReactJS + Flux - 如何实现 toasts/notifications?

如何在 ReactJS 中使用 cloudinary?

Redux/Flux(使用 ReactJS)和动画

reactjs/flux:按顺序执行动作(ajax)

如何在 Flux 中处理具有依赖关系的数据组合和检索?