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

标签 javascript reactjs reactjs-flux flux

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

  1. 我知道所有商店都应该是单例的,但它们都是在应用启动时创建的吗?或者商店的生命周期是否可以更短,具体到用户的操作?
  2. 我能否拥有相同存储类型的多个实例,每个实例都使用不同的上下文进行初始化?

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

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

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

最佳答案

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

关于javascript - 如何在 Flux/ReactJS 中处理多个相同类型的商店?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30247481/

相关文章:

javascript - 使用 JavaScript 打印多个 PDF 文件

reactjs - react 顶部加载栏警告 : Can't perform a React state update on an unmounted component

javascript - 在 native 样式表中使用变量不会识别变量

javascript - Facebook FBML 问题

javascript - 仅使用 JavaScript 中的正则表达式选择第一个破折号

javascript - 如何将对象数组分配给数组?

reactjs - 如何在 Next.js 中使用 webrtc-adapter npm 包

javascript - 在 Flux 架构中,你如何管理 Store 生命周期?

reactjs - 如何在渲染时避免 React 标记校验和警告

javascript - 通量/ react : how to handle filtered api-data in a store