未捕获的ReferenceError：未定义FluxDispatcher

Question

这是我第一次尝试使用反应。我遇到了下面显示的以下错误。 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 。我相信我已经要求所有正确的宝石和javascript文件但是，我无法弄清楚为什么没有定义FluxDispatcher。下面我列出了一些文件，如果需要提供更多信息，请告诉我。

的Gemfile

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

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

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
    })
  }
});

comment_list.js.jsx

<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>

show.html.erb

boundary

Answer 1

我正在做相同的教程=）。我所做的代码更改是 -

Geolocation.getCurrentPosition

只需输入“。”在Flux和Dispatcher之间。