キャッチされていないReferenceError：FluxDispatcherが定義されていません

Question

これは私の初めての反応です。私は以下に表示されている以下のエラーに遭遇しています。 Uncaught ReferenceError: FluxDispatcher is not defined。私は正しい宝石とjavascriptファイルをすべて必要としましたが、なぜFluxDispatcherが定義されていないのかわかりません。以下にいくつかのファイルを記載しました。詳細を提供する必要がある場合は、私に知らせてください。

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

私は）=同チュートリアルをやっています。私がしたコードの変更は -

var AppDispatcher = new Flux.Dispatcher(); 

ちょうど "。" FluxとDispatcherの間。