2016-01-24 3 views
-1

Попытка создать чрезвычайно простое приложение CRUD с Flux. Почему этот console.log не работает в моей регистрационной функции ServerStore.js? Кажется, что веб-пакет даже не связывает его?React Flux 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' 
     } 
    ] 
    } 
    }; 

ответ

0

Кажется, вы на самом деле не экспортирует диспетчеру сам, скорее действия. Попробуйте отделить диспетчера и действия. Таким образом, вы также можете создавать новые наборы действий и повторно использовать диспетчер, когда это необходимо.

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

React с Flux вот мое хранилище GitHub надеюсь, что это будет помогает понять основные из реагируют с флюсом https://github.com/TameshwarNirmalkar/ES6Babel имеет:

  • Webpack
  • ES6
  • Бабель
  • Eslint
  • Реагировать
  • Flux
  • Json-сервер для отдыха апи полного
  • операция CRUD

Надеется, что это было бы полезно ,

Смежные вопросы