React Flux Store emitChange在两个组件中都没有触发

Question

我有两个不同的组件，它们使用相同的AuthStore，FacebookUser和Quiz。

FacebookUser组件通过执行AuthStore操作更新login，并且该操作会导致其执行emitChange。但是，onChange的{​​{1}}处理程序不会触发。

AuthStore.js

Quiz

FacebookUser.jsx

console.log("AuthStore::CREATED");

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var AuthConstants = require('../constants/AuthConstants');
var assign = require('object-assign');

var CHANGE_EVENT = 'change';

var _user = undefined;

var AuthStore = assign({}, EventEmitter.prototype, {

  isLoggedIn: function() {
    return _user !== undefined;
  },

  getUser: function() {
    return _user;
  },

  emitChange: function() {
    console.log('AuthStore::emitChange');
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function(callback) {
    console.log('AuthStore::addChangeListener', callback);
    this.on(CHANGE_EVENT, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
});

// Register callback to handle all updates
AuthStore.dispatchToken = AppDispatcher.register(function(action) {
  console.log('AuthStore::action', action);

  switch(action.actionType) {
    case AuthConstants.AUTH_LOGIN:
      _user = action.user;
      AuthStore.emitChange();
      break;

    case AuthConstants.AUTH_LOGOUT:
      _user = undefined;
      AuthStore.emitChange();
      break;

    default:
      // no op
  }
});

module.exports = AuthStore;

Quiz.jsx

var AuthActions = require('../../actions/AuthActions');
var AuthStore = require('../../stores/AuthStore');

function componentWillMount() {
  AuthStore.addChangeListener(this.onChange);
}

function onChange() {
  console.log('FacebookUser::onChange');

  var user = AuthStore.getUser();
  this.setState(user);
}

function populateUserProfile(userId) {
  FB.api('/' + userId, {fields: 'email,name'}, function(response) {
    console.log('FacebookUser::populateUserProfile', response);
    AuthActions.login(response);
  }.bind(this));
}

AppDispatcher.js

var AuthStore = require('../../stores/AuthStore');
var QuizStore = require('../../stores/QuizStore');

function componentWillMount() {
  AuthStore.addChangeListener(this.onChange);
  QuizStore.addChangeListener(this.onChange);
}

function onChange() {
  console.log('Quiz::onChange');

  var quiz = QuizStore.getQuiz();

  if (!quiz.person.email) {
    var user = AuthStore.getUser();
    quiz.person.email = user.email;
  }

  this.setState(quiz);
}

我认为商店是Singleton的，然而，事实并非如此。我知道我错过了一些愚蠢的东西。期待着答案！

控制台输出

下面你可以看到var Dispatcher = require('flux').Dispatcher; module.exports = new Dispatcher(); 发生火灾。我很确定问题是两个组件的FacebookUser::onChange都是创建的。从AuthStore日志中可以看出这一点。

AuthStore::CREATED

Answer 1

不是暴露构造函数，而是在商店中公开实例调用new并公开该实例。这样它将是一个单例，在测试中我暴露了一个非默认导出，所以我可以为每个测试重新初始化一个商店。

Answer 2

所以问题最终有点深奥。我将此用户组件包含在另一个ReactDOM渲染器中。有效地像它自己的应用程序。这就是导致问题的原因。因为他们在不同的范围内，他们没有共享相同的商店。将组件移动到由应用程序的根组件呈现以修复它。