Question

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

header.js
subnav-area.js
馈area.js

我也有相应的商店：

navbar-store.js（header）
subnav-store.js
馈store.js

......和行动：

navbar-actions.js（标题）
subnav-actions.js
馈actions.js

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

在行动中，我这样称呼调度员：

AppDispathcer.handleViewAction({

  actionType: AppConstants.SUBNAV_SET_ACTIVE,
  _id: subnavItemId
})

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

handleViewAction：function（action）{

this.dispatch（{ 来源：＆＃39; VIEW_ACTION＆＃39;，行动：行动 }） }

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

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请求，然后调度一个名为{{的事件1}}（在你的情况下，我猜你会做CART_ITEM_ADDED。调度员会告诉它的订阅者收到一个事件，每个订阅者都会看到它是否对该事件感兴趣。然后，Dispatcher.handleViewAction('CART_ITEM_ADDED')事件可以更新CART_ITEM_ADDED并告诉它从服务器重新提取购物车。一旦完成，商店将触发一个事件，说不过“好了。我已经改变了”然后它订阅CartStore的每个视图都有责任从CartStore中重新获取所需信息。

开启调试：

在我的调度员中，当运行调试模式时，我总是打印正在调度的事件。因此，在您的CartStore中，您可以执行handleViewAction，这样可以清楚地了解正在调度哪些事件以及按什么顺序发送事件。

当您的商店发出更改事件时，您可以执行相同的操作。记录它，你会知道发生了什么。

我很难告诉你确切的问题，没有更多的继续，但通常很容易混淆和混合你的调度员回调的常数和＆amp; actioncreators。也许你正在某个地方的错误地方听错事件？

我也看到你在做像

这样的事情

console.log('[DISPATCH]', action);

您是否有任何理由不使用通用FeedStore.addFeedListener(this._onChange, 'feed-area.js');？

所有你应该告诉商店的是“嘿！发生什么事情时运行这个功能，好吗？”通过addEventListener

这变成了一个比我预期的更长的答案，我希望它有所帮助，如果没有那么请随时问！

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

1 个答案: