Javascript 为什么Dispatcher在Flux上启动不必要的事件？

我有一个React/Flux应用程序，可以查看以下组件：

• header.js
• subnav-area.js
• feed-area.js

我也有相应的商店：

• navbar-store.js（标题）
• subnav-store.js
• feed-store.js

…和行动：

• navbar-actions.js（标题）
• subnav-actions.js
• feed-actions.js

按下subnav上的按钮时，馈送和subnav都应更新，设置正确的馈送类型并突出显示激活的subnav元素。我成功地实现了这一目标，但我也多次启动onChange事件，也使用header.js组件，尽管它不应该受到操作的影响

在操作中，我会像这样调用dispatcher：

AppDispathcer.handleViewAction({

  actionType: AppConstants.SUBNAV_SET_ACTIVE,
  _id: subnavItemId
})

…当然，这取决于目的。我的调度程序如下所示：

AppDispathcer.handleViewAction({

  actionType: AppConstants.SUBNAV_SET_ACTIVE,
  _id: subnavItemId
})

HandleWiction:函数（操作）{

这是调度({ 资料来源：“查看行动”， 行动：行动 }) }

在商店里，我有这样的东西来处理调度器：

dispatcherIndex: AppDispatcher.register(function(payload) {

  var action = payload.action;

  switch(action.actionType) {

    case AppConstants.FILTER_SET_CAT:

        FeedStore.selectVisibleFeedItems();
      break;

    case AppConstants.FEED_SHOW_MORE:

        FeedStore.showMoreItems(filterCatName);
      break;
  }

  FeedStore.emitChange();

  return true;
})

所有组件都具有以下功能（但具有不同的侦听器名称）：

现在，当所需的操作发生时，会在所有组件上启动更改：header、subnav区域和feed区域组件

---

我从哪里开始寻找bug？我不完全理解dispatcher是如何工作的，我是否应该以某种方式分离处理视图的功能？我以为Flux会以某种方式侦听存储并根据它更新视图，但现在它似乎在侦听其他内容，我真的不明白是什么。

我将开始描述一个示例，说明总体思路，然后继续介绍如何调试内容

假设我有一个购物车和一个项目

组件

每当从

Item

组件触发

add

事件时，它应该触发

操作

，比如，向服务器发出AJAX请求，然后发送一个名为

CART\u Item\u ADDED

的事件（在您的情况下，我想您应该执行

Dispatcher.handlewiction（'CART\u Item\u ADDED'））

。dispatcher将告诉其订阅者已收到一个事件，每个订阅者将查看其是否对该事件感兴趣。订阅者对添加的

CART\u ITEM\u事件感兴趣的用户可以更新
CartStore
，并告诉它从服务器重新提取购物车。完成后，商店将触发一个事件，只说“OK.我已更改”然后订阅
CartStore
的每个视图都有责任从CartStore中重新提取所需的信息

关于调试：

在我的dispatchers中，当运行调试模式时，我总是打印要调度的事件。因此，在
HandleWiction
中，您可以执行
console.log（“[DISPATCH]”，action）；
这将为您提供一个关于要调度的事件以及顺序的清晰概览

当你的商店发出一个变更事件时，你也可以做同样的事情。记录它，你就会知道发生了什么

我很难在没有更多内容的情况下告诉您确切的问题，但通常很容易混淆和混合调度程序回调和ActionCreator的常量。也许您正在错误的地方侦听错误的事件

我还看到你在做这样的事情

FeedStore.addFeedListener(this._onChange, 'feed-area.js');

是否有任何理由不使用通用的
addEventListener

通过执行
FeedStore.addEventListener（this.\u onChange）；

这是一个比我预期的更长的答案，我希望它有帮助，如果没有，那么请随意提问！
我很快就拼凑出了这个小伪代码。也许这有助于理解这个概念：@JaakkoKarhu：我不是100%的答案，但我想我明白了。你应该只启动
FeedStore.emitChange（）；
当FeedStore中发生实际变化时。你的调度程序回调可能是这样的：我会尽力帮助你，直到你得到正确的结果，所以请继续提供反馈&我们会解决这个问题的！@JaakkoKarhu：我开始使用一些现有的JSFIDLE并重写它，这样你就可以看到基本的概念在起作用：希望它有帮助！回复：dispatc她的回调决定如何处理通过dispatcher发送的事件。如果它对某个内容感兴趣，它将使用数据更新存储。一旦存储中的某个内容发生更改，该存储应发出更改事件（
.emitChange（）
）来通知组件。因此
存储
应该只执行
.emitChange（）
如果它已经用新数据更新。那么监听该存储的组件将知道它们应该调用类似于
FeedStore.getFeed（）的东西。
我不确定我的评论是否足够。但是继续问，我会尽力帮助你！下面是对你的粘贴站的一些回复：它解释了为什么addChangeListener不适合你！