【问题标题】:How do I make multiple Flux apps talk?如何让多个 Flux 应用程序说话?
【发布时间】:2015-04-07 16:31:57
【问题描述】:

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

<Calendar appts={appts} />

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

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

【问题讨论】:

    标签: reactjs reactjs-flux


    【解决方案1】:

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

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

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

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

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

    Reflux 带有一个非常有用的connect mixin,它允许您将类的状态链接到存储。不过要小心,如果您这样做,请务必在商店中实现 getInitialState。否则,您的课程将以空状态开始。另一个有用的 mixin 是 ListenerMixin,如果您只是希望组件在商店更改时执行某些操作。

    如需了解更多信息,请务必查看RefluxJS README

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-03-19
      • 2010-12-09
      • 1970-01-01
      • 1970-01-01
      • 2016-04-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多