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

希望這將是有益的。