我正在React.js
架构之后使用Material-UI
(Flux
)开发Web应用程序。在我的项目中,我有两个文件夹: app ,其中components
,actions
,stores
,dispatcher
和index.html
文件是和服务器文件夹,其中有server.js
文件,用于侦听连接,database.js
,用于处理数据库连接。我已经定义了一个简单的组件,AppBar
,带有一个简单的右图标。此图标的状态为:{notify:false}
。在database.js
文件中,我创建了一个简单的store
调用,如下所示:
this.executeQuery = function(){
this.connection.query('SELECT * FROM account', function(err, results) {
if(err) throw err;
NotificationsAction.newNotification();
});
};
NotificationsAction.js 包含以下代码行:
module.exports = {
newNotification : function(){
console.log("new notification in actions");
Dispatcher.dispatch({
actionType : 'NEW_NOTIFICATION'
});
}
};
最后, NotificationsIconStore.js 是:
Dispatcher.register(function(action) {
console.log("action is "+action.actionType);
switch (action.actionType){
case 'NEW_NOTIFICATION':
console.log("new notification in dispatcher");
Store.newNotification();
break;
}
});
var Store = assign({}, EventEmitter.prototype, {
newNotification : function(){
console.log("new notification in store");
this.emit('change');
},
addChangeListener: function(callback) {
this.on("change", callback);
},
removeChangeListener: function(callback) {
this.removeListener("change", callback);
}
});
考虑到AppBar组件已注册以更改事件,为什么通过executeQuery
函数对DB进行简单调用不起作用?
谢谢!
答案 0 :(得分:0)
您需要在动作文件中创建一个函数,如下所示 -
receiveAccounts: function() {
ApiUtils.getAccounts(function(result) {
Dispatcher.dispatch({
actionType: ActionTypes.RECEIVE_ACCOUNTS,
accounts: result.accounts
});
});
}
现在您需要为后端api创建一个ajax调用。您应该为此创建一个单独的文件。我们假设您将其命名为ApiUtils.js
function getAccounts(callback) {
$.ajax({
type: 'GET',
url: '/accounts',
dataType: 'json',
contentType: 'application/json; charset=UTF-8',
success: callback,
error: function(result) {
}
});
}
现在您需要将json数据返回给客户端。无论是Android应用程序,管理应用程序还是面向用户的应用程序我们的后端服务将为每个客户提供相同的数据。
所以你的executeQuery方法可以像这样修改 -
this.executeQuery = function(){
this.connection.query('SELECT * FROM account', function(err, results) {
if(err) {
return res.json({'accounts': [], 'message': 'error' + error.toString()});
} else {
return res.json({'accounts': results, 'message': 'success'});
}
});
};
现在您需要从操作中提取数据并将其保存在您的商店中,如下所示 -
var _accounts = [];
function _setAccounts(accounts) {
_accounts = accounts;
}
var Store = assign({}, EventEmitter.prototype, {
newNotification : function(){
console.log("new notification in store");
this.emit('change');
},
getAll: function() {
return _accounts;
},
addChangeListener: function(callback) {
this.on("change", callback);
},
removeChangeListener: function(callback) {
this.removeListener("change", callback);
}
});
Dispatcher.register(function(action) {
console.log("action is "+action.actionType);
switch (action.actionType){
case 'RECEIVE_ACCOUNTS':
_setAccounts(action.accounts);
Store.newNotification();
break;
}
});