잡히지 않은 ReferenceError : FluxDispatcher가 정의되지 않았습니다.

Question

반응을 처음 사용했습니다. 아래에 표시되는 다음 오류가 발생합니다. Uncaught ReferenceError: FluxDispatcher is not defined. 필자는 모든 올바른 보석과 자바 스크립트 파일을 필요로했지만 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 

는

//= 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 . 

appliction.js

,691을 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 사이.