Jon Lambson Jon Lambson - 1 month ago 14
React JSX Question

Uncaught ReferenceError: FluxDispatcher is not defined

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.

enter image description here

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

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

var AppDispatcher = new Flux.Dispatcher();

just put "." between Flux and Dispatcher.