反应通量 Webpack答案

【问题标题】：React Flux Webpack反应通量 Webpack
【发布时间】：2016-04-30 12:02:22
【问题描述】：

尝试使用 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'
        }
    ]
    }
  };

【问题讨论】：

标签： reactjs webpack flux

【解决方案1】：

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

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;

【讨论】：

【解决方案2】：

React with Flux 这是我的 github 存储库，希望它有助于理解 React with Flux https://github.com/TameshwarNirmalkar/ES6Babel 的基础知识：

网页包
ES6
通天塔
埃斯林特
反应
通量
Json-server for rest api 完成
CRUD 操作

希望对您有所帮助。

【讨论】：