如何让多个Flux应用程序通话?

时间:2015-02-07 16:06:55

标签: reactjs reactjs-flux

我一直在制作React日历。起初我只想在html中使用约会声明日历,如下所示:

<Calendar appts={appts} />

但后来我意识到我的日历必须是一个完整的应用,与REST端点交谈并让它拥有storeactions。< / p>

日历不是最终目标,现在我需要它成为更大的&#39; Flux&#39;应用程序。每个人如何构建他们的应用程序,以便在其他应用程序中可以重复使用这些文件,比如日历?不同的Flux应用程序如何相互通信?是否有任何关于这个问题的例子或博客文章?

1 个答案:

答案 0 :(得分:1)

Flux是来自Facebook的publisher-subscriber架构推荐。 RefluxJS 是一种易于使用的体系结构实现。它将actionsstores添加到ReactJS。

行动是变革的触发因素。每当用户与页面交互时,您都会调用操作。对于我来说,动作几乎完全取代了React组件中的setState。当用户创建诸如表单字段更改之类的事件时,我会使用事件数据作为函数参数触发操作。在此体系结构中,操作允许React组件(类)广播发布更改。

存储订阅(监听)操作。最简单的商店只传递通过this.trigger调用更改的参数。其他商店可以收听其他商店,验证数据,将参数填充到数据中,将数据设置到对象中,或将数据推送到数组上,而不是通过this.trigger调用广播新数据集。

React组件(类)和商店可以订阅(监听)商店。当这些商店更新时,您可以

  • 更新状态和所有相关道具
  • 使用更新的商店数据集执行某些操作

Reflux附带了一个非常有用的connect mixin,它允许您将类的状态链接到商店。但要小心,如果这样做,请确保在商店中实现getInitialState。否则,您的类将以null状态开头。如果您只是希望组件在商店更改时执行某些操作,则另一个有用的mixin是ListenerMixin

有关详情,请务必查看RefluxJS README