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

时间:2015-05-14 21:16:22

标签: javascript reactjs reactjs-flux flux

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

  1. 我知道所有商店都是单身人士,但它们都是在应用程序启动时创建的,还是商店的生命周期可以更小,特定于用户的行为?
  2. 我可以拥有相同商店类型的多个实例,每个实例都使用不同的上下文进行初始化吗?
  3. 不幸的是,我所看到的所有例子似乎都过于简单,无法回答这些问题。让我们从Facebook's chat app example开始吧。有多个线程,每个线程都有消息。 MessageStore保存整个应用程序的所有消息,名为getAllForThread(id)的方法返回已过滤的消息子集。当消息进入任何线程时,它会发出更改通知,导致MessageSection react组件重新获取数据(无论用户正在查看哪个线程)。这显然不会扩大规模。如果我们有10,000个线程,每个都有大量的消息活动怎么办?以下是我决定解决问题的方法:

    1. 使用线程ID初始化每个MessageStore。
    2. 创建一个单独的MessageStoreFactory,用于创建和管理MessageStores。
    3. 当用户点击一个线程而不是订阅全局MessageStore的React组件时,它会向MessageStoreFactory询问该特定线程的MessageStore。
    4. 如果工厂已经有该线程的MessageStore,则返回它。否则它会创建一个,启动异步任务以获取它的初始数据,然后返回它。
    5. 当React组件被拆除时(让我们说用户导航离开它),它会通知工厂它已完成所有商店。使用引用计数或其他一些缓存逻辑将允许Factory修剪未使用的存储。
    6. 我采用这种方法有多远?还有一种更简单的方法可以扩展吗?

1 个答案:

答案 0 :(得分:1)

根据用户正在查看的主题,提取更智能数据似乎更容易。我可以在博客文章或演示文稿中看到这个Facebook的例子吗?