什么是Reat TODO示例中使用的dispatcherIndex

Question

全部，

我刚开始使用Facebook TODO示例Here

学习React FLUX

TODO Store中有一个名为dispatcherIndex的字段，我想知道该字段用于什么？

由于

Answer 1

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。

Answer 2

在该页面的代码片段中，他们已将Dispatcher捆绑到Store定义中的Store，这就是dispatcherIndex正在执行的操作。

但是，在code that has been put on github中，这超出了商店定义。在该代码中，商店定义从第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组件触发操作，然后将此操作调度到已为该操作注册回调的那些商店。