Uncaught ReferenceError: FluxDispatcher ist nicht definiert

Question

Dies ist mein erstes Mal versucht, reagieren zu verwenden. Ich stoße auf den folgenden Fehler, der unten angezeigt wird. Uncaught ReferenceError: FluxDispatcher is not defined. Ich glaube, ich habe alle richtigen Edelsteine ​​und Javascript-Dateien benötigt, aber ich kann nicht herausfinden, warum FluxDispatcher nicht definiert ist. Im Folgenden habe ich einige Dateien aufgelistet, bitte lassen Sie mich wissen, wenn ich weitere Informationen zur Verfügung stellen muss.

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

ich das gleiche Tutorial tue =). Die Änderung in Code, den ich tat, war -

var AppDispatcher = new Flux.Dispatcher(); 

setzen Sie einfach "." zwischen Flux und Dispatcher.