在 React TODO 示例中使用 dispatcherIndex 是什么答案

【问题标题】：What is dispatcherIndex used for in React TODO example在 React TODO 示例中使用 dispatcherIndex 是什么
【发布时间】：2015-12-21 07:37:21
【问题描述】：

全部，

我刚开始学习 React FLUX 和 Facebook TODO 示例 Here

TODO Store中有一个字段叫dispatcherIndex，不知道这个字段是干什么用的？

谢谢

【问题讨论】：

标签： reactjs flux

【解决方案1】：

在该页面的代码 sn-p 中，他们在 Store 定义中包含了 Dispatcher 到 Store 的绑定，这就是 dispatcherIndex 正在做的事情。

但是，在code that has been put on github 中，这超出了商店定义。在该代码中，Store 定义从第 77 行开始

var TodoStore = assign({}, EventEmitter.prototype, {

并在第 117 行结束，之后您将注册回调

    removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
}); //Todo Store definition ends here

// Register callback to handle all updates
AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== '') {
        create(text);
        TodoStore.emitChange();
      }
      break;

基本上，在 Flux 架构中，流是单向的，因此从 React 组件触发动作，然后将该动作分派到为该动作注册回调的那些商店。

【讨论】：

谢谢，我想我对 React 太陌生了，无法理解您的意思，您能否简要介绍一下 dispatcherIndex 在哪里以及如何使用？ OR：这是否意味着dispatcherIndex本身用处不大，但它的初始化过程很重要？
我也有同样的疑问。有一个dispatcherIndex 的定义，但是这个方法在项目的其他地方没有被引用。尽管在每个动作发生时都会调用它。如上面的评论所述，这个答案是关于 Flux 架构的广泛答案，但没有回答 OP 的疑问。

【解决方案2】：

dispatcherIndex 永远不会像您通常期望的那样从函数中调用，即 TodoStore.dispatcherIndex()。

但由于dispatcherIndex 的值是一个函数调用（不仅仅是一个函数，而是一个函数调用），所以该函数调用发生在对象的初始化中。所以当TodoStore被初始化时，这段代码（函数调用）就会运行：

AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== '') {
        create(text);
        TodoStore.emitChange();
      }
      break;

    case TodoConstants.TODO_DESTROY:
      destroy(action.id);
      TodoStore.emitChange();
      break;
  // add more cases for other actionTypes, like TODO_UPDATE, etc.
  }
  return true; // No errors. Needed by promise in Dispatcher.
})

您正在调用AppDispatcher.register 并向其传递一个回调函数。您传递的这个回调现在不执行，它已注册（添加到_callbacks 数组）以便稍后调用，每当您调用调用AppDispatcher.handleViewAction 的方法之一，即TodoActions.create 和TodoActions.destroy。

【讨论】：