直接监听 Component 中的 Reflux Actions答案

【问题标题】：Listening directly to Reflux Actions in Component直接监听 Component 中的 Reflux Actions
【发布时间】：2015-07-21 21:12:08
【问题描述】：

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

也就是说，我是否向这个通知组件的渲染添加逻辑，如果它订阅的对象中有某个标志属性，它只会显示它自己？然后在一段时间后自行删除。这听起来不对。

更新

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

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

Store 与 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'stalk onflux api 模式，api 交互应该发生在 Action 中，但回流并不允许这样做。

更新 2

组件将数据传递给名为createItemRequest的Action

Action 有一个实际执行 api 调用的 preEmit 钩子。 createItemRequest 继续到 Store 以便商店可以更改模型以反映发送状态，然后将其显示在组件中（可能显示微调器）。 Action 还负责根据 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);
        }
    });
}

【问题讨论】：

关于您的更新，我不确定您所说的“将应用程序移动到新的步伐”是什么意思。你的意思是你想重定向到另一个路由/页面？或者您的意思是您需要在经过一段时间后最终停止显示通知？
要注意的另一件事是，Flux 中的一个原则是，您永远不会直接改变存储中的状态作为对某些异步操作（例如 ajax 回调）的响应，就像您在示例中所做的那样。相反，您触发了另一个操作（例如 createItemCompleted），然后您的商店也侦听 that 操作并在那里改变商店。在 Reflux 中，您可以使用 preEmit 钩子，这是 createAction 的一个选项来完成 Colin 所说的。
第一个问题：是的，重定向到新页面。第二条评论：我想我明白你的意思是将每个改变状态的意图分成自己的行动。只是为了清楚preEmit 钩子。什么时候解决？如果 api 调用失败，那么 Actions 是否负责触发不同的 Action？
是的，您在第二次更新中正确执行了此操作，但如果您将操作设置为 asyncResult 为 true，您会自动获得“成功”和“失败”子操作，如解释的那样在有关异步操作部分的 Reflux 文档中。关于路由转换，我绝对不会在商店中进行（应该只包含应用程序数据状态 imo 的逻辑），但是从哪个组件来做这件事真的取决于你。我认为父母听起来像是我会选择的东西。

标签： javascript reactjs refluxjs

【解决方案1】：

对此有不同的方法。例如，在Reflux 中，如果您选择直接监听操作非常容易，因为每个操作实际上都是一个“调度程序”。

但是，一般的、纯粹的 Flux 原则是仅存储向调度程序注册，并且组件仅侦听存储更新。并且存储只是触发一个通知 something 已更改的事件，而不提供任何有效负载。然后由组件来读取存储的状态并确定如何呈现它。

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

我能想到的另一种方法是在收到商店更新通知时区分组件中的状态。然后只在组件中保留flags，甚至在state中将新添加的item分别保存在一个单独的list中，分别渲染。

这里没有硬性规定，除了如果你想遵循核心的 Flux 原则，组件应该从不直接改变 store 的状态，因为那应该只由 store 自己响应来改变到行动。这允许单向数据流和关于数据的单一事实来源，这是 Flux 的主要目标。

【讨论】：