title: React: AppStore listener must be a function
body: <p>fellow devs!</p>
  
  <p>I have been digging into Flux / React with thanks to the tutorials over at Egghead. Although I have heard that React is moving, I have met with some changes in the React library while following said tutorials. </p>
  
  <p>Up until now I have been able to fix them all. Now, I have run into a brick wall concerning the Store. As the tutorial states, I am making a shopping cart, in which the user can add things to their cart. Not that complicated. The actual adding works, but the re-rendering is not triggered. The following code gives the added error (full code will be listed below as well):</p>
  
  <pre><code>addChangeListener: function(callback) {
      this.on(CHANGE_EVENT, callback);
  },
  </code></pre>
  
  <p>Which results in <em>Uncaught TypeError: listener must be a function</em>. The callback parameter is undefined (so that's where the problem lies). However, because I am more than new React's way of working, I'm having trouble in locating the problem. The following snippet is the Store from the tutorial:</p>
  
  <pre><code>var AppStore = assign(EventEmitter.prototype, {
  
      emitChange: function() {
          this.emit(CHANGE_EVENT);
      },
      addChangeListener: function(callback) {
          this.on(CHANGE_EVENT, callback);
      },
      removeChangeListener: function(callback) {
          this.removeChangeListener(CHANGE_EVENT, callback);
      },
      getCart: function() {
          return _cartItems;
      },
      getCatalog: function() {
          return _catalog;
      },
      getCartTotals: function() {
          return _cartTotals();
      },
      dispatcherIndex: AppDispatcher.register(function (payload) {
          var action = payload.action;
  
          switch(action.actionType) {
              case AppConstants.ADD_ITEM:
                  _addItem(payload.action.item);
                  break;
              case AppConstants.REMOVE_ITEM:
                  _removeItem(payload.action.index);
                  break;
              case AppConstants.INCREASE_ITEM:
                  _increaseItem(payload.action.index);
                  break;
              case AppConstants.DECREASE_ITEM:
                  _decreaseItem(payload.action.index);
                  break;
          }
  
          AppStore.emitChange();
  
          return true;
      })
  });
  </code></pre>
  
  <p>Take note that this is code from a tutorial at Egghead.io and I am in no-way the owner (and if they so wish I will remove said code). </p>
  
  <p>If more code or explanation is required, I'll be happy to oblige!</p>
  
  <p>Thanks people :)</p>
  
  <p>EDIT 1: The component that is supposed to listen to change, but does not:</p>
  
  <pre><code>var Cart = React.createClass({
  
      getInitialState: function() {
          return cartItems();
      },
      componentWillMount: function() {
          debugger;
          AppStore.addChangeListener(this.onChange);
      },
      componentDidMount: function() {
          debugger;
          AppStore.addChangeListener(this.handleChange);
      },
      handleChange: function() {
          debugger;
          this.forceUpdate();
      },
      _onChange: function() {
          debugger;
          this.setState(cartItems());
      },
      render: function() {
          var total = 0;
          var items = this.state.items.map(function (item, i) {
              var subtotal = item.cost * item.qty;
              total +=subtotal;
              return (
                  &lt;tr key={i}&gt;
                      &lt;td&gt;&lt;RemoveFromCart index={i} /&gt;&lt;/td&gt;
                      &lt;td&gt;{item.title}&lt;/td&gt;
                      &lt;td&gt;{item.qty}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;Increase index={i} /&gt;
                          &lt;Decrease index={i} /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;${subtotal}&lt;/td&gt;
                  &lt;/tr&gt;
              );
          });
  
          return (
              &lt;table className="table table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Item&lt;/th&gt;
                          &lt;th&gt;Qty&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Subtotal&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {items}
                  &lt;/tbody&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;td colSpan="4" className="text-right"&gt;Total&lt;/td&gt;
                          &lt;td&gt;${total}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
              &lt;/table&gt;
          );
      }
  });
  </code></pre>