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

我有一个React / Flux应用程序,其中包含以下组件:

  • header.js
  • subnav-area.js
  • 饲料area.js

我也有相应的商店:

  • navbar-store.js(header)
  • subnav-store.js
  • 饲料store.js

…和行动:

  • navbar-actions.js(header)
  • subnav-actions.js
  • 饲料actions.js

当按下subnav上的一个button时,feed和subnav都应该被更新,设置正确的进给types并突出显示激活的subnav元素。 我成功地实现了这个目标,但是我也多次启动一个onChange事件,同样也使用header.js组件,尽pipe它不应该受到这个动作的影响。

在行动中,我打电话给这样的调度员:

AppDispathcer.handleViewAction({ actionType: AppConstants.SUBNAV_SET_ACTIVE, _id: subnavItemId }) 

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

handleViewAction:function(action){

this.dispatch({source:'VIEW_ACTION',action: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; }) 

所有组件都具有以下function(但具有不同的侦听器名称):

  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组件上启动。

我从哪里开始寻找错误? 我不完全理解调度员是如何工作的,我是否应该分开处理视图的function? 我以为Flux会以某种方式听商店并更新视图,现在看起来它正在倾听其他内容,而我并不真正了解。

我将开始描述一般想法的一个例子,然后继续如何debugging。

比方说,我有一个购物车和一个项目Component

每当从Item组件中触发一个add事件时,它应该触发一个Action ,可以说,向你的服务器发出一个AJAX请求,然后发送一个名为CART_ITEM_ADDED的事件(在你的情况下,我想你会做Dispatcher.handleViewAction('CART_ITEM_ADDED') ,调度员会告诉订户收到了一个事件,并且每个订户都会看到它是否对这个事件感兴趣,对CART_ITEM_ADDED事件感兴趣的CART_ITEM_ADDED可以更新CartStore并告诉它从服务器一旦完成,商店就会触发一个事件,说“没事,我已经改变了”,然后每个视图的责任是订阅CartStore从CartStore重新获取他们需要的信息。

在debugging时:

在我的调度员,运行debugging模式,我总是打印什么事件被派遣。 所以在你的handleViewAction你可以做一个console.log('[DISPATCH]', action); 这会给你一个清楚的概述,哪些事件正在发送,以什么顺序。

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

我很难告诉你确切的问题没有更多的继续,但通常很容易混淆和混合调度器callback和actioncreators的常量。 也许你是在错误的地方听错了事?

另外我看到你正在做类似的事情

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

有没有什么原因,你不使用通用的addEventListener

所有你应该告诉商店是“嘿!运行这个function,每当发生什么事情,好吗? 通过做FeedStore.addEventListener(this._onChange);

这成了比我预期的更长的答案,我希望它有帮助,如果不是,那么请随时问!