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

How do I make multiple Flux apps talk?

我一直在创建 React 日历。起初我只是想在 html 中声明带有约会的日历,如下所示:

<Calendar appts={appts} />

但后来我意识到我的日历必须是一个完整的应用程序,与 REST 端点通信并拥有自己的 storeactions

日历不是最终目标,现在我需要它成为更大 'Flux' 应用程序的一部分。每个人如何构建他们的应用程序,以便可以在其他应用程序中重复使用这些部分,比如日历?不同的 Flux 应用程序如何相互通信?是否有讨论此问题的示例或博客文章?

Flux 是来自 Facebook 的 publisher-subscriber 架构推荐。 RefluxJS 是该架构的一个易于使用的实现。它向 ReactJS 添加 actionsstores

行动是改变的触发器。每当用户与页面交互时,您都会调用一个操作。对我来说,Actions 几乎完全取代了 React 组件中的 setState。当用户创建事件(例如表单字段更改)时,我会触发一个将事件数据作为函数参数的操作。在此架构中,操作允许 React 组件(classes)广播发布更改。

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

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

  • 更新状态和所有依赖的道具
  • 对更新的商店数据集做一些事情

Reflux 附带了一个非常有用的 connect mixin,它允许您将 link class 的状态 class 到商店。但是要小心,如果你这样做,一定要在商店中实现 getInitialState。否则,您的 class 将从空状态开始。另一个有用的 mixin 是 ListenerMixin 如果你只是想让组件在商店改变时做一些事情。

有关详细信息,请务必查看 RefluxJS README