Using React with Flux, you need to register a callback from your Component so that it can be called when the Store emits an event. For an ExampleComponent and ExampleStore, this might look like:
class ExampleComponent extends Component {
constructor(props) {
super(props);
}
componentWillMount(){
ChatStore.on('change', this.handleUserNameChange);
}
...
}
I’ve seen some examples where a helper function is declared in the Store that registers your Component as a listener, so the call from the Component to register with the Store might look like:
componentWillMount(){
ChatStore.registerChangeListener(this.handleUserNameChange);
}
and in your ExampleStore you’ll declare registerChangeListener() (and similar to remove) like this:
addChangeListener(callback) {
this.on('change', callback);
}
removeChangeListener(callback) {
this.removeListener('change', callback);
}
All good so far, but here’s the issue I just ran into:
Uncaught TypeError: _ExampleStore2.default.addChangeListener is not a function at ExampleComponent.componentWillMount (ExampleComponent.jsx:19) at ReactCompositeComponent.js:348
Initially this is confusing, since it’s clear we did already declare addChangeListener, so why is this error saying it’s not a function?
The catch is in how we export the Store. The cause of my issue above was that I had exported it like this:
class ExampleStore extends EventEmitter {
..
}
export default ExampleStore;
This is how you would typically export a module but what we’re trying to do is treat the Store as a singleton instance. To do this the export should be:
export default new ExampleStore();
This approach is described in many Flux related articles (here’s an example), but it’s an easy mistake to miss.