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

Question

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

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

我也有对应的店铺：

navbar-store.js (header)
subnav-store.js
feed-store.js

...和操作：

navbar-actions.js (header)
subnav-actions.js
feed-actions.js

在子导航上按下按钮时，提要和子导航都应更新，设置正确的提要类型并突出显示活动的子导航元素。我成功实现了这个目标，但我也多次启动了一个 onChange 事件，同样使用 header.js 组件，即使它不应该受到该操作的影响。

在操作中我这样调用调度程序：

AppDispathcer.handleViewAction({

  actionType: AppConstants.SUBNAV_SET_ACTIVE,
  _id: subnavItemId
})

...当然取决于目的。我的调度员看起来像这样：

handleViewAction：函数（动作）{

this.dispatch({ 来源：'VIEW_ACTION'，行动：行动 }) }

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

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;
})

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

  componentWillMount:function(){

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

  componentWillUnmount:function() {

    FeedStore.removeFeedListener(this._onChange)
  },

  _onChange: function(){

    this.setState(getVisibleFeedItems())
  },

现在，当所需操作发生时，_onChange 将在所有组件上启动：header、subnav-area 和 feed-area 组件。

我从哪里开始寻找错误？我不完全理解调度程序是如何工作的，我应该以某种方式分离处理视图的功能吗？我以为 Flux 会以某种方式监听存储并根据它更新视图，现在它似乎在监听其他东西，我不太明白是什么。

Answer 1

我将开始描述一个总体思路的示例，然后继续介绍如何进行调试。

假设我有一个购物车和一个商品 Component。

每当 add 事件从 Item 组件触发时，它应该触发一个 Action，比方说，向您的服务器发出一个 AJAX 请求，然后调度一个名为 CART_ITEM_ADDED 的事件（在你的情况下，我想你会做 Dispatcher.handleViewAction('CART_ITEM_ADDED')。调度程序会告诉它的订阅者收到了一个事件，每个订阅者都会看看它是否对该事件感兴趣。订阅者（ s) 对 CART_ITEM_ADDED 事件感兴趣然后可以更新 CartStore 并告诉它从服务器重新获取购物车。一旦完成，商店将触发一个事件说不超过 "OK. I've changed"然后订阅 CartStore 的每个视图都有责任从 CartStore 重新获取他们需要的信息。

开始调试：

在我的调度程序中，当运行调试模式时，我总是打印正在调度的事件。因此，在您的 handleViewAction 中，您可以执行 console.log('[DISPATCH]', action);，这将使您清楚地了解正在分派的事件以及分派的顺序。

当您的商店发出更改事件时，您可以做同样的事情。记录下来，你就会知道发生了什么。

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

我还看到你在做类似的事情

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

你有什么理由不使用通用的 addEventListener？

您只需通过 FeedStore.addEventListener(this._onChange);

告诉商店 "Hey! Run this function whenever something has happened, ok?"

这个答案比我预期的要长，希望对您有所帮助，如果没有，请随时提问！

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

Why is Dispatcher launching unnecessary events on Flux?

javascript

flux

node.js

reactjs

reactjs-flux