2
this.on('change', callback);

and

this.removeListener('change', callback);

are not working on my addChangeListener and removeChangeListener. I've imported the EventEmitter and used it with object-assign ("object-assign": "^4.1.1").

But it produces an error:

bundle.js:41229 Uncaught TypeError: this.on is not a function
at Object.addChangeListener (bundle.js:41229)
at Authors.componentWillMount (bundle.js:40504)
at callComponentWillMount (bundle.js:26260)
at mountClassInstance (bundle.js:26356)
at updateClassComponent (bundle.js:27725)
at beginWork (bundle.js:28366)
at performUnitOfWork (bundle.js:31198)
at workLoop (bundle.js:31227)
at HTMLUnknownElement.callCallback (bundle.js:19504)
at Object.invokeGuardedCallbackDev (bundle.js:19542)

Here's my code:

"use strict";

import AppDispatcher from '../dispatcher/AppDispatcher';
import ActionTypes from '../constants/actionTypes';
import { EventEmitter } from 'events';
import assign from 'object-assign';
import _ from 'lodash';

var CHANGE_EVENT = 'change';
var _author = [];

var AuthorStore = assign({}, EventEmitter.protoType, {
  addChangeListener(callback) {
    this.on(CHANGE_EVENT, callback);
  },
  removeChangeListener(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  },
  emitChange() {
    this.emit;
  },
  getAllAuthors() {
    return _author;
  },
  getAuthorById(id) {
    return _.find(_author, {
      id: id
    });
  }
});

AppDispatcher.register(function(action) {
  switch (action.actionType) {
    case ActionTypes.INITIALIZE:
      _author = action.initialData.authors;
      AuthorStore.emitChange();
      break;
    case ActionTypes.UPDATE_AUTHOR:
      var existingAuthor = _.find(_author, {
        id: action.author.id
      });
      var existingAuthorIndex = _.indexOf(_author, existingAuthor);
      _author.splice(existingAuthorIndex, 1, action.author);
      AuthorStore.emitChange();
      break;
    case ActionTypes.CREATE_AUTHOR:
      _author.push(action.author);
      AuthorStore.emitChange();
      break;
    case ActionTypes.DELETE_AUTHOR:
      _.remove(_author, function(author) {
        return action.id === author.id;
      });
      AuthorStore.emitChange();
      break;
    default:

  }
});

export default AuthorStore;

I can't figure out why it's not working, I've been referring on this documentation. Thank You.

zx485
  • 28,498
  • 28
  • 50
  • 59
  • try console.log(this.on) and see what it is and whether its available – Fatah May 06 '18 at 15:10
  • it returns **undefined**... @fatahn – Aries Brylle Ventura May 06 '18 at 15:11
  • what does `this` refer to when you console.log(this) just below `var AuthorStore = assign({}, EventEmitter.protoType, { `? – Fatah May 06 '18 at 15:17
  • `{addChangeListener: ƒ, removeChangeListener: ƒ, emitChange: ƒ, getAllAuthors: ƒ, getAuthorById: ƒ} addChangeListener : ƒ addChangeListener(callback) emitChange : ƒ emitChange() getAllAuthors : ƒ getAllAuthors() getAuthorById : ƒ getAuthorById(id) removeChangeListener : ƒ removeChangeListener(callback) __proto__ : Object ` it can't be done after `var AuthorStore = assign({}, EventEmitter.protoType, {` it returns an error. – Aries Brylle Ventura May 06 '18 at 15:20

1 Answers1

0

I have solved it by changing all items into named object properties like this:

// BEFORE
addChangeListener(callback) {
// AFTER
addChangeListener: function (callback) {

// BEFORE
removeChangeListener(callback) {
// AFTER
removeChangeListener: function (callback) {

...and so on.

DJ Gruby
  • 159
  • 1
  • 2
  • 11