What is dispatcherIndex used for in React TODO example - reactjs

Question

All,
I just start learning React FLUX with Facebook TODO example Here
There is a field in TODO Store called dispatcherIndex, I wonder what that field used for?
Thanks

Answer 1

The dispatcherIndex is never invoked as you normally would expect from a function, i.e., TodoStore.dispatcherIndex().
But since the value of dispatcherIndex is a function call (no just a function, but a function call), that function call happens in the initialization of your object. So when the TodoStore is initialized, this code (the function call) is run:
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.
})
You're calling AppDispatcher.register and passing it a callback function. This callback you are passing is not executed now, it is registered (added to the _callbacks array) to be called later, whenever you call one of the methods that calls AppDispatcher.handleViewAction, that are TodoActions.create and TodoActions.destroy.

Answer 2

In the code snippet in that page, they have included the tying up of the Dispatcher to the Store within the Store definition and that is what the dispatcherIndex is doing.
However, in the code that has been put on github, this is outside the store definition. In that code, Store definition starts at line 77
var TodoStore = assign({}, EventEmitter.prototype, {
and ends at line 117 after which you are registering the callback
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;
Basically, in Flux architecture, flow is unidirectional, so from the React components action is triggered and this action is then dispatched to those stores where the callback has been registered for that action.