首页 > 解决方案 > 将 Remote Dev 添加到 Facebook Flux Store 应用程序,帮助列出 Action Creator

问题描述

https://www.npmjs.com/package/remotedev 我正在尝试将 remotedev 工具扩展添加到使用 Facebook Flux 的遗留反应项目中;它显示已连接,但每次都不显示动作创建者。只有单词改变

这是下面的商店代码。

import { connectViaExtension, extractState } from 'remotedev';

var EventEmitter = require('events').EventEmitter;
var Base = require('backbone-extend-node');
var remotedev = connectViaExtension();


/**
 * Abstract store implementation, this class has two goals:
 * - Implements handlers for dispatcher actions
 * - Registers change events
 *
 * @abstract
 */

// Initial state is {}
remotedev = connectViaExtension();
// Subscribe to remotedev


remotedev.init({}, { name: 'Facebook Flux' });
// Subscribe to RemoteDev

export var AbstractStore = Base.extend({
  constructor: function() {
    this.emitter = this.buildEmitter();
    this.assignAllHandlers();
    remotedev.sub
  },

  /**
   * Actuall magic responsible for assigning all handlers to corresponding dispatcher actions
   */
  assignAllHandlers: function() {
    var actionHandlers = this.getActionHandlers();
    dispatcher.register(function(action) {
      if (actionHandlers[action.actionType]) {
        remotedev.send(actionHandlers[action.actionType]);
        actionHandlers[action.actionType].call(this, action.payload);
      }
    }.bind(this));
  },

  /**
   * This is not in const as we use this for testing
   * @access private
   * @visibleForTesting
   */
  getChangeEvent: function() {
    return 'change';
  },

  /**
   * We should seperate it for easy testing
   * @access private
   * @visibleForTesting
   */
  buildEmitter: function() {
    var eventEmitter = new EventEmitter();
    eventEmitter.setMaxListeners(0);

    return eventEmitter;
  },

  emitChange: function() {
    this.emitter.emit(this.getChangeEvent(), this);
  },

  addChangeListener: function(listener) {
    this.emitter.on(this.getChangeEvent(), listener);
  },

  /**
  * It's essential to remove listeners to prevent memory leaks
  */
  removeChangeListener: function(listener) {
    this.emitter.removeListener(this.getChangeEvent(), listener);
  },

  removeAllListeners: function() {
    this.emitter.removeAllListeners(this.getChangeEvent());
  }
});


// reducers

到目前为止显示的图片如下

Redux 开发工具仅显示更改

试图显示动作创建者而不是“更新”这个词

标签: javascriptreactjsfluxreactjs-flux

解决方案


推荐阅读