Search code examples
reactjsreactjs-flux

How to identify component in FLUX of React

I am pretty new to FLUX, so I started with the TODO example on their website: https://facebook.github.io/flux/docs/todo-list.html

In the Listening to Changes with a Controller-View part:

There is on event binding in TodoApp:

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

and this._onChange is like:

 _onChange: function() {
    this.setState(getTodoState());
}

The addChangeListener from TodoStore is like:

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

What confused me here is:

It seems that the store just simply register that _onChange(), but how does the TodoStore know whose _onChange() need to be called if there are multiple TodoApps rendered on the page.

Solution

  • TodoStore simply emits the event and every component that is listening to that store will update. So if you have two TodoApps on page, both will update.