反应通量 Webpack

Posted 2023-02-22

【中文标题】反应通量 Webpack

【英文标题】：React Flux 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'
        
    ]
    
  ;

【参考方案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 操作

希望对您有所帮助。