AppStore.js

import Dispatcher from '../dispatchers/dispatcher';
import AppConstants from '../constants/appConstants';
import { EventEmitter } from 'events';
import { findIndex } from 'lodash';


var names = [{firstName: "jonathan", lastName: "sevold"}];

function addNameToStore(name) {
  names.push(name);
  console.log("we logging the names", names);
}

const AppStore = Object.assign({}, EventEmitter.prototype, {
  emitChange(){
    this.emit( 'change' )
  },

  addChangeListener(callback){
    this.on( 'change', callback)
  },

  removeChangeListener(callback){
    this.removeChangeListener('change', callback )
  },

  getNames(){
    return names;
  }
});


Dispatcher.register( function(action){
    switch(action.actionType){
      case AppConstants.ADD_NAME:
        let name = action.name;
        addNameToStore(name)
        break;

      case AppConstants.REMOVE_NAME:
        let name1     = action.name;
        let firstName = name1.firstName;
        let lastName  = name1.lastName;
        let names     = AppStore.getNames();
        let index     = findIndex(names,{firstName: firstName, lastName: lastName});
        names.splice(index,1);
        break;
    }

    AppStore.emitChange();

  })

export default AppStore;

Form.js

import React from 'react';
import List from './list';
import AppStore from '../stores/appStore';
import AppActions from '../actions/appActions'



class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      names: []
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.removePerson = this.removePerson.bind(this);
  }

  _onChange(){
    this.setState({names: AppStore.getNames()});
  }

  componentWillMount(){
    AppStore.addChangeListener(this._onChange.bind(this));
  }

  componentWillUnMount(){
    AppStore.removeChangeListener(this._onChange.bind(this));
  }

  handleSubmit(){
    let firstName = this.refs.firstName.value;
    let lastName  = this.refs.lastName.value;
    let person = {firstName: firstName, lastName: lastName};
    this.refs.firstName.value = "";
    this.refs.lastName.value = "";
    AppActions.addName(person);
  }

  removePerson(name){
    AppActions.removeName(name)
  }

  render(){
    return(
      <div>
        <input type="text" ref="firstName" />
        <input type="text" ref="lastName" />
        <button onClick={this.handleSubmit}> Submit</button>
        <List people = {this.state.names}
          removePerson={this.removePerson}/>
      </div>
    );
  }
}


export default Form