How addChangeListener works in Facebook React Todo example

Question

All:

I am pretty new to React. When I follow its TodoMVC example, there is one question confuses me so much:

Inside TodoApp component, it registers its handler using TodoStore.addChangeListener:

componentDidMount: function() {
    TodoStore.addChangeListener(this._onChange);
  },
_onChange: function() {
    this.setState(getTodoState());
  }

And let CHANGE_EVENT in TodoStore.addChangeListener to trigger that _onChange callback:

addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

What confuses me here is:

1. How "this.on" knows the context of that callback( I mean how does it remember the "this" from _onChange )

2. What if there are multiple TodoApp register their _onChange, so the todoStore will maintain a list of all callbacks?

Thanks

Answer 1

1. It doesn't. the this in this.on refers to the Store. The provided callback references the _onChange function, which uses its own this. For it to work it will need to have been bound to the TodoApp. I think that example comes from the autobinding era of React. Nowadays you would use a .bind either in the componentDidMount or the class constructor.

Local Bind

componentDidMount: function() {
    TodoStore.addChangeListener(this._onChange.bind(this));
  },

OR class bind (the = () => creates an arrow function for the class, closing this at the constructor scope)

class TodoApp extends React.Component {
  componentDidMount = () => {
   TodoStore.addChangeListener(this._onChange);
  }

  _onChange = () => {
    this.setState(getTodoState());
  }
}

2. Yes. In Flux Stores are EventEmitters, and are designed to have multiple listeners for each event.