React Flux Webpack

Question

试图用Flux构建一个非常简单的CRUD应用程序。为什么这个console.log不能在我的ServerStore.js注册函数中工作？它似乎webpack甚至没有捆绑它？

ServerStore.js

var AppDispatcher = require('../dispatcher/dispatcher'); 
var AppConstants = require('../actions/constants'); 
var assign = require('react/lib/Object/assign'); 
var EventEmitter = require('events').EventEmitter; 

var CHANGE_EVENT = 'change'; 

var ServerStore = assign(EventEmitter.prototype, { 
    emitChange: function(){ 
    this.emit(CHANGE_EVENT) 
}, 
addChangeListener:function(callback){ 
    this.on(CHANGE_EVENT, callback) 
}, 
removeChangeListener: function(callback){ 
    this.removeListener(CHANGE_EVENT, callback) 
}, 


}); 
AppDispatcher.register(function(payload){ 
    var action = payload.action; 
    console.log('hhhhhhhhhhh'); //<----------------NOT WORKING! 

}); 

Dispatcher.js

var Dispatcher = require('flux').Dispatcher; 
var assign = require('react/lib/Object.assign'); 

var AppDispatcher = assign(new Dispatcher(), { 
    handleViewAction: function(action){ 
     console.log('action', action)//<------THIS WORKS OK! 
     this.dispatch({ 
     source:'VIEW_ACTION', 
     action: action 
     }) 
    } 
}); 

module.exports = AppDispatcher; 

webpack.config.js

module.exports ={ 
    entry: "./app-client.js", 
    output: { 
     filename: "public/bundle.js" 
    }, 
module:{ 
    loaders:[ 
     { 
      exclude: /(node_modules|app-server.js)/, 
      loader: 'babel' 
     } 
    ] 
    } 
    }; 

Answer 1

看来你实际上并没有导出调度本身，而不是动作。尝试分离调度程序和操作。这样您也可以创建新的操作集并在需要时重新使用调度程序。

Dispatcher.js

var Dispatcher = require('flux').Dispatcher; 

module.exports = new Dispatcher(); 

AppActions.js

var AppDispatcher = require('../dispatcher/Dispatcher'); 

var AppActions = { 

    handleViewAction: function(data) { 
     AppDispatcher.dispatch({ 
      actionType: 'VIEW_ACTION', 
      data: data 
     }); 
     console.log('VIEW_ACTION dispatched.') 
    } 

}; 

module.exports = AppActions; 

Answer 2

与流量阵营，这里是我的github仓库希望它会有助于理解与焊剂反应的基本https://github.com/TameshwarNirmalkar/ES6Babel它有：

• 的WebPack
• ES6
• 通天
• Eslint
• 阵营
• 流量
• JSON-服务器REST API完整
• CRUD操作

希望这将是有益的。