Uncaught ReferenceError: FluxDispatcher is not defined

Question

This is my first time attempting to use react. I am running into the following error which is being displayed below. Uncaught ReferenceError: FluxDispatcher is not defined. I belive I have required all the correct gems and javascript files but, I can't figure out why FluxDispatcher is not being defined. Below I have listed out some of files, please let me know if I need to provide any more information.

Gemfile

source 'https://rubygems.org'

gem 'rails', '4.2.2'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 2.0'
gem 'awesome_print', '~> 1.7'
gem 'bootstrap', '~> 4.0.0.alpha5'
gem 'ancestry'
gem 'rails_admin'
gem 'react-rails'
gem 'flux-rails-assets'
gem 'lodash-rails'

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end

group :development, :test do
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

appliction.js

//= require jquery
//= require jquery_ujs
//= require tether
//= require bootstrap
//= require lodash
//= require react
//= require react_ujs
//= require flux
//= require eventemitter
//= require components
//= require app
//= require_tree .

app.js

//
var Constants = {
  CHANGE_EVENT: 'change',
  ADD_COMMENT: 'comments.add'
};

var Store = new _.extend({}, EventEmitter.prototype, {
  _comments: [],

  addComment: function(comment) {
    this._comments[comment.id] = comment;
  },

  comments: function() {
    return this._comments;
  },

  addChangeListener: function(callback) {
    this.on(Constants.CHANGE_EVENT, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(Constants.CHANGE_EVENT, callback);
  },

  emitChange: function() {
    this.emit(Constants.CHANGE_EVENT);
  }
});

var AppDispatcher = new FluxDispatcher();

AppDispatcher.register(function(payload) {
  var action = payload.actionType;
  switch(action) {
    case Constants.ADD_COMMENT:
      Store.addComment(payload.comment);
      Store.emitChange();
      break;
    default:
      // NO-OP
  }
});

// Actions
var Actions = new _.extend({}, {
  addComment: function(params) {
    AppDispatcher.dispatch({
      actionType: Constants.ADD_COMMENT,
      comment: params
    });
  }
});

comment_list.js.jsx

var CommentList = React.createClass({

  componentDidMount: function() {
    Store.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    Store.removeChangeListener(this._onChange);
  },

  render: function() {
    console.log('rendering');
    return (
      <div>
        {[].map(function(comment) {
          return <Comment key={comment.id} {... comment} />;
        })}
      </div>
    );
  },

  _onChange: function() {
    this.forceUpdate();
  }
});

//Actions
var Actions = new _.extend({}, {
  addComment: function(params) {
    AppDispatcher.dispatch({
      actionType: Constants.ADD_COMMENT,
      comment: params
    })
  }
});

show.html.erb

<div class="row">
  <h1>Title: <%= @post.title %></h1>
</div>
<div class="row">
  <div class="col-md-6">
    <p>
      <%= @post.description %>
    </p>
  </div>
  <div class="col-md-6">
    <p>Comments:</p>
    <%= react_component('CommentList') %>
  </div>
</div>

Answer 1

I am doing the same tutorial =) . The change in code I did was -

var AppDispatcher = new Flux.Dispatcher();

just put "." between Flux and Dispatcher.