title: callback function is not being called on event fire
body: <p>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 <code>this.on(CHANGE_EVENT, callback);</code> and as a result of that, the new record is not being displayed on screen. Therefore please tell, why this <code>callback</code> function is not being called? And how to resolve this issue?</p>
  
  <p><strong>Store.js</strong></p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>View.jsx</strong></p>
  
  <pre><code>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 (
              &lt;div className="container" style={{marginTop:'25px'}}&gt;
                  &lt;ul className="list-group"&gt;
                      &lt;li style={{backgroundColor:'#696969', color:'#f5f5f5', textAlign:'center', padding:'5px', fontSize:'16px', borderRadius:'5px 5px 0px 0px'}}&gt;&lt;b&gt;Records&lt;/b&gt;&lt;/li&gt;
                      {this.state.records.map((eachRecord,index) =&gt;
                          &lt;ListItem key={index} singleRecord={eachRecord} /&gt;
                      )}
                  &lt;/ul&gt;
                  &lt;input type="text" ref="input"/&gt;
                  &lt;button  onClick={()=&gt;addRecord(this.refs.input.value)}&gt;Add&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  
      componentWillMount() {
          this.Store.addChangeListener("change", this.updateStore);
      }
  
      updateStore() {
          this.setState({
              records: this.Store.getRecords()
          });
      }
  }
  
  class ListItem extends React.Component {
      render() {
          return (
              &lt;li className="list-group-item" style={{cursor:'pointer'}}&gt;
                  &lt;b&gt;{this.props.singleRecord.name}&lt;/b&gt;
                  &lt;button style={{float:'right'}}&gt;Delete&lt;/button&gt;
              &lt;/li&gt;
          );
      }
  }
  
  export default View;
  </code></pre>