Flux React gulp

Question

Попытка создания магазина Flux. Когда я бегу глотка и проверить мой index.html я получаю сообщение об ошибке «Uncaught TypeError: слушатель должен быть функцией»

var AppDispatcher = require('../dispatchers/app-dispatcher'); 
var AppConstants = require('../constants/app-constants'); 
var assign = require('object-assign'); 
var EventEmitterProto = require('events').EventEmitter.prototype; 
var CHANGE_EVENT = 'CHANGE'; //broadcast this everytime there is a change 

var _catalog = []; 
var _cartItems = []; 

var AppStore = assign(EventEmitterProto, { 
    emitChange: function(){ 
    this.emit(CHANGE_EVENT) 
}, 
addChangeListener: function(callback){ 
    this.on(CHANGE_EVENT, callback); //<---if I comment this out code runs perfect 
}, 
removeChangeListener: function(callback){ 
    this.removeListener(CHANGE_EVENT, callback) 
}, 
getCart: function(){ 
    return _cartItems 
}, 
getCatalog: function(){ 
    return _catalog 
}, 
getCartTotals: function(){ 
    return _cartTotals() 
} 

}); 
module.exports = AppStore; 

Ниже является единственным компонентом с слушателем

var React = require('react'); 
var AppStore = require('../stores/app-store.js'); 
var RemoveFromCart = require('./app-removefromcart.js'); //this is a component 
var Increase = require('./app-increaseitem'); //this is a component 
var Decrease = require('./app-decreaseitem'); //this is a component 

function cartItems(){ 
    return {items: AppStore.getCart()} 
} 

var Catalog = React.createClass({ 
    getInitialState:function(){ 
     return cartItems(); 
    }, 
    componentWillMount: function(){ 
     AppStore.addChangeListener(this.onChange) 
}, 
_onChange: function(){ 
    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 (
       <tr key={i}> 
        <td><RemoveFromCart /></td> 
        <td>{item.title}</td> 
        <td>{item.qty}</td> 
        <td> 
         <Increase index={i} /> 
         <Decrease index={i} /> 
        </td> 
        <td>${subtotal}</td> 
       </tr> 
       ); 
     })//end map 

    return (
     <table className="table table-hover"> 
      <thead> 
       <tr> 
       <th></th> 
       <th>Item</th> 
       <th>Qty</th> 
       <th></th> 
       <th>Subtotal</th> 
       </tr> 
      </thead> 
      <tbody> 
       {items} 
      </tbody> 
      <tfoot> 
       <tr> 
        <td colSpan="4" className="text-right">Total</td> 
       </tr> 
      </tfoot> 
     </table> 
     ); 
} 
}); 

module.exports = Catalog; 

Пожалуйста, помогите. Это действительно больно моя голова

Answer 1

вам может понадобиться изменить

AppStore.addChangeListener(this._onChange) 

логику функции componentDidMount как

componentDidMount:function(){ 
     AppStore.addChangeListener(this._onChange) 
    }