这个磁通动作和这个函数调用之间有什么区别?

时间:2017-01-25 04:55:47

标签: reactjs flux

我可以这样做一个助焊剂行动:

{type: 'KILL', payload: {target: 'ogre'}}

但是我没有看到在这样的类(包装商店)上设置方法之间的区别是什么,

People.kill('ogre') 

如果人们是行动的唯一接收者?

我看到助焊剂调度员给了我两个好处(可能)

  1. “kill”方法可以广播给多个未知的接收者(好!)
  2. 调度员给我一个方便的地方记录所有行动交通(也很好!)
  3. 这些可能是好事,但还有其他原因我不知道吗?

    我没有看到的是如何以JSON对象的形式放置动作,突然强制或帮助“单向”通信流,这是我在任何地方阅读的是具有动作的大优势,以及通量。

    在我看来,无论我如何给猪打气,我仍然会有效地向商店发送信息。当然行动现在经历了几层间接(动作创建者,调度员)到达商店之前,但除非我遗漏了某些事情,为所有实际目的发送该动作的组件正在更新任何正在监听的商店。杀死消息。

    我在这里缺少什么?

    我再次知道Stack Overflow我们不能问一般问题,所以我想保持这个非常具体。代码的两个代码片段虽然具有不同的语法,但在语义上(除了广播到多个商店的可能性之外)似乎完全相同。

    再次,如果唯一的原因是它启用广播并为调试目的启用单点流量,我很好,但想知道是否还有其他关于flux /调度程序的事情我错过了?

2 个答案:

答案 0 :(得分:9)

助焊剂式架构的主要特征大致如下:

  1. 商店是应用程序状态的唯一真实来源
  2. 只有动作才能触发商店状态的突变
  3. 存储状态不应该直接变异,即通过分配对象值,而是通过克隆/解构来创建新对象
  4. 就像饮食一样,使用这种类型的建筑如果你滑倒并且间歇性地回到过去的方式,那么它确实不起作用。

    回到你的例子。在这里使用动作的好处不是广播或记录方面,而仅仅是People类应该只能消费来自商店的数据并表达其希望通过动作改变所述商店的状态的事实。 。想象一下,例如Elves想要对食人魔唱歌,因此有兴趣知道所说的食人魔还活着。与此同时,People想要礼貌,并且不希望在小夜曲中杀死食人魔。助焊剂式架构的好处很明显:

    class People {
      kill(creature) {
        if (creatureStore.getSerenadedCreature() !== creature)
          store.dispatch({ type: 'KILL', payload: { target: creature } })
        return `The ${creature} is being serenaded by those damn elves, let's wait until they've finished.`
      }
    }
    
    class Elves {
      singTo(creature) {
        if (!creatureStore.getCreatures().includes(creature))
          return store.dispatch({ type: 'SING_TO', payload: { target: creature } })
        return `Oh no, the ${creature} has been killed... I guess there will be no serenading tonight..`
      }
    }
    

    如果类People要包装商店,那么您需要Elves类来包装同一个商店,创建两个相同状态将在一个商店中变异的地方方式或其他。现在假设有10个其他类需要访问该商店并想要更改它:添加这些新功能正在变得很痛苦,因为所有这些类现在都受到其他类的摆布,从而使状态从它们下面变形,迫使你处理大量不太可能甚至与这些类的业务逻辑相关的边缘情况。

    使用flux样式架构,所有这些类只会使用creatureStore中的数据和基于该状态的调度操作。商店会处理与州相关的不同操作,以便所有订户在正确的时间拥有正确的数据。

    当您只有一个商店被一个或两个实体消费时,这种模式的好处可能并不明显。如果您有数十(或数百)个商店,其中有数十(或数百)个组件,每个商店都会消耗多个商店的数据,这种架构可以让您更轻松地开发新功能而不会破坏现有功能,从而为您节省时间和金钱。

    希望这个墙上的文字有助于澄清!

答案 1 :(得分:2)

  

我没有看到的是如何以JSON对象的形式放置动作,突然强制或帮助“单向”通信流,这是我在任何地方阅读的是具有动作的大优势,以及通量。   在我看来,无论我如何给猪打气,我仍然有效地将信息发回商店。当然行动现在经历了几层间接(动作创建者,调度员)到达商店之前,但除非我遗漏了某些事情,为所有实际目的发送该动作的组件正在更新任何正在监听的商店。杀死消息。   我在这里缺少什么?

Facebook Flux从事件驱动的GUI系统中汲取了这一想法。 即使您移动鼠标,也可以获得消息。这被称为消息循环,现在我们有动作调度。

此外,我们还有商店内的订阅者列表。

在Redux中你有一个商店的原则是一样的,而在Flux你可能有多个商店。

现在很少数学。拥有2个组件A和B,您需要只有几个可能的更新链A更新B和B更新A,或自我更新(此处不包括应用程序外部的更新)。这是可能的情况。

enter image description here

只有三个组件,我们有更多可能的链。

enter image description here

随着更多的组件,它变得复杂。因此,为了抑制可能的组件交互的指数复杂性,我们有这个Flux模式,如果您使用其他编程语言中的这些接口,则只能IDispatchIObservable。一个用于吐出动作,另一个用于进入商店内存在的监听器链。

使用此模式,您的React代码将以与常见React方法不同的方式进行组织。您不必再使用React.Component州。相反,您将使用将保存应用程序状态的商店。

您的组件只能通过调度操作来显示改变应用程序状态的愿望。例如:onClick可以调度操作来增加计数器。动作是具有属性type:的对象,通常是一个字符串,通常是大写的,但动作对象可能有许多其他道具,如ID,值,......

由于组件负责基于应用程序状态进行呈现,因此我们需要以某种方式向它们提供应用程序状态。它可以通过props = store.getState()或我们可以使用context。但也请检查this

最后,甚至不禁止组件使用内部状态(this.state)以防这对应用程序没有影响。你应该认识到这些情况。