为什么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);
这成了比我预期的更长的答案,我希望它有帮助,如果不是,那么请随时问!