Question

从我读过的模式中，组件将数据传递给传递给商店的操作，其值更改会触发订阅商店的组件中的更新。我的问题是如何以通知的形式对这些触发的更新做出“反应”？（即成功保存的通知）

即我在这个通知组件的渲染中添加逻辑，只有在它订阅的对象中有一些标志属性时才会显示自己？然后在一段时间后删除自己。这听起来不对。

更新

感谢Hannes Johansson，我想我对模式有了更好的把握。我的工作如下：

组件通过操作将数据传递到商店

商店与api交互并向模型添加一个标志，该组件现在会通知更新的模型。

createItem: function (item) {
    $.ajax({
        url: '/items', 
        method: 'POST',
        data: item,
        success: function (item) {
            CurrentBrandActions.addCampaign(item);
            this.item = item;
            item.newlyCreated = true;
            this.trigger(item);
        }.bind(this)
    })
}

组件会看到该标志并呈现“通知子组件”

var newlyCreated = this.state.item.newlyCreated === true;
if (newlyCreated) {
  newlyCreated = <ItemCreatedNotification item={this.state.item} />
} else {
  newlyCreated = '';
}
return (
  <form onSubmit={this.createItem} className="form">
    {newlyCreated}

有些东西需要根据此事件将应用移动到新的位置。这应该是a）通知子组件b）父组件c）商店？

根据Colin Megill's关于flux api模式的讨论，api相互作用应该在Action中发生，但回流并不能真正实现。

更新2

组件将数据传递给名为createItemRequest

Action有一个preEmit挂钩实际上执行api调用。 createItemRequest继续存储，以便商店可以更改模型以反映发送状态，然后显示在组件中（可能显示微调器）。该行动还负责根据api结果发射另外两个事件。

ItemActions.createItemRequest.preEmit = function (data) {
    $.ajax({
        url: '/items', 
        method: 'POST',
        data: data,
        success: function (item) {
            ItemActions.itemCreatedSuccess(item);
        },
        error: function (error) {
            ItemActions.itemCreatedError(error);
        }
    });
}

Answer 1

有不同的方法。例如，在Reflux中，如果您选择，则很容易直接听取操作，因为每个操作实际上都是＆＃34;调度员＆＃34;。

然而，一般的，纯粹的Flux原则是只有商店向调度员注册，而且组件只监听商店更新。并且商店只会触发一个事件，通知某些内容已更改，而不提供任何有效负载。然后由组件来读取商店的状态并确定如何呈现它。

一种方法是您描述的方法，在商店中的项目上放置一些标记以表示更新已经发生，但如果组件本身随后更新存储的项目，则会违反Flux原则。标志，因为只有商店才会改变状态，并且只响应行动而不是来自任何其他来源。所以在这种情况下，＆＃34; Flux事情＆＃34;要做的可能是触发另一个事件，表明新添加的项目已被记录，以便商店可以重置标志以响应该行动。

我能想到的另一种方法是在获得商店更新通知时将组件中的状态区分开来。然后只在组件中保留标志，甚至将新添加的项保存在状态的单独列表中，并单独渲染它们。

这里没有硬规则，除非你想要遵循核心Flux原则，组件应该从不直接改变商店＆＃39; state，因为只有商店自己才能对行为做出反应。这允许单向数据流和关于数据的单一真实来源，这是Flux的主要目标。

直接倾听组件中的Reflux Actions

1 个答案: