Ruby on rails 未捕获引用错误:未定义FluxDispatcher
这是我第一次尝试使用react。我遇到下面显示的以下错误<代码>未捕获引用错误:未定义FluxDispatcher。我相信我需要所有正确的gems和javascript文件,但我不明白为什么没有定义FluxDispatcher。下面我列出了一些文件,如果我需要提供更多信息,请告诉我 GemfileRuby on rails 未捕获引用错误:未定义FluxDispatcher,ruby-on-rails,reactjs,flux,Ruby On Rails,Reactjs,Flux,这是我第一次尝试使用react。我遇到下面显示的以下错误未捕获引用错误:未定义FluxDispatcher。我相信我需要所有正确的gems和javascript文件,但我不明白为什么没有定义FluxDispatcher。下面我列出了一些文件,如果我需要提供更多信息,请告诉我 Gemfile source 'https://rubygems.org' gem 'rails', '4.2.2' gem 'sqlite3' gem 'sass-rails', '~> 5.0' gem 'ug
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 .
//
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
});
}
});
app.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 .
//
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\u 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
})
}
});
var CommentList=React.createClass({
componentDidMount:function(){
Store.addChangeListener(this.\u onChange);
},
componentWillUnmount:function(){
Store.removeChangeListener(this.\u onChange);
},
render:function(){
console.log('rendering');
返回(
{[].map(函数(注释){
返回;
})}
);
},
_onChange:function(){
这个.forceUpdate();
}
});
//行动
var Actions=new{.extend({}{
addComment:函数(参数){
AppDispatcher.dispatch({
actionType:Constants.ADD\u注释,
评论: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>
标题:
评论:
我正在做同样的教程=)。我所做的代码更改是-
var AppDispatcher = new Flux.Dispatcher();
在Flux和Dispatcher之间加上“.”