callback function is not being called on event fire - reactjs

Question

I am learning Flux in ReactJS. I have written a simple code in ReactJS using Flux pattern. In this code some records are being displayed and there is an option to add a new record. The problem is that when I fire an event i.e. when I click the add button, the callback function is not being called from this.on(CHANGE_EVENT, callback); and as a result of that, the new record is not being displayed on screen. Therefore please tell, why this callback function is not being called? And how to resolve this issue?
Store.js
import React from 'react';
import Dispatcher from './Dispatcher.js';
import { EventEmitter } from "events";
class Store extends EventEmitter {
constructor() {
super();
this.records = [
{
id: 1,
name: 'First Record'
},
{
id: 2,
name: 'Second Record'
},
{
id: 3,
name: 'Third Record'
},
{
id: 4,
name: 'Fourth Record'
},
{
id: 5,
name: 'Fifth Record'
}
]
};
createRecord(name, id) {
this.records.push({
id: id,
name: name
});
this.emit("change");
}
addChangeListener(CHANGE_EVENT, callback) {
this.on(CHANGE_EVENT, callback);
}
handleActions(action) {
switch(action.type) {
case "ADD_RECORD": {
this.createRecord(action.name, action.id);
break;
}
}
}
getRecords() {
return this.records;
}
};
const recordsStore = new Store();
Dispatcher.register(recordsStore.handleActions.bind(recordsStore));
export default Store;
View.jsx
import React from 'react';
import Store from './Store.js';
import {addRecord} from "./Action.js";
class View extends React.Component {
constructor() {
super();
this.Store = new Store();
this.state = {records: this.Store.getRecords()};
}
render() {
return (
<div className="container" style={{marginTop:'25px'}}>
<ul className="list-group">
<li style={{backgroundColor:'#696969', color:'#f5f5f5', textAlign:'center', padding:'5px', fontSize:'16px', borderRadius:'5px 5px 0px 0px'}}><b>Records</b></li>
{this.state.records.map((eachRecord,index) =>
<ListItem key={index} singleRecord={eachRecord} />
)}
</ul>
<input type="text" ref="input"/>
<button onClick={()=>addRecord(this.refs.input.value)}>Add</button>
</div>
);
}
componentWillMount() {
this.Store.addChangeListener("change", this.updateStore);
}
updateStore() {
this.setState({
records: this.Store.getRecords()
});
}
}
class ListItem extends React.Component {
render() {
return (
<li className="list-group-item" style={{cursor:'pointer'}}>
<b>{this.props.singleRecord.name}</b>
<button style={{float:'right'}}>Delete</button>
</li>
);
}
}
export default View;

Answer 1

This is how I would set up a flux store -- the key points are:
register the dispatch callback in the constructor
It makes it easier to have a single CHANGE_EVENT constant and hide it inside the store.
Typically you'll want your stores to only have one instance. So when you export it you would export default new Store(). That way all components will be able to use the same store.
Store
const CHANGE_EVENT = 'change';
class Store extends EventEmitter {
constructor() {
super();
Dispatcher.register(this.handleActions.bind(this));
}
createRecord(name, id) {
// code..
this.emitChange();
}
emitChange() {
this.emit(CHANGE_EVENT);
}
addChangeListener(callback) {
this.on(CHANGE_EVENT, callback);
}
removeChangeListener(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
handleActions(action) {
switch (action.type) {
case 'ADD_RECORD': {
this.createRecord(action.name, action.id);
break;
}
}
}
getRecords() {
return this.records;
}
}
export default new Store();
--
In the view, you should bind your listeners in componentDidMount and remember to remove the listeners in componentWillUnmount.
View
import Store from './Store';
class View extends React.Component {
constructor() {
super();
this.state = {records: Store.getRecords()};
}
render() {
// code..
}
componentDidMount() {
Store.addChangeListener(this.updateStore);
}
componentWillUnmount() {
Store.removeChangeListener(this.updateStore);
}
// use this syntax to keep context or use .bind in the constructor
updateStore = () => {
this.setState({
records: Store.getRecords()
});
}
}