如何使用 Flux+React.js 从数据库回调渲染组件
How to render a component from a DB callback using Flux+React.js
我正在按照Flux
架构使用React.js
(带Material-UI
)开发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();
});
};
通知操作.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 的简单调用不起作用?
谢谢!
你需要在你的动作文件中创建一个函数,如下所示 -
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 数据返回到客户端。无论是安卓应用程序,管理应用程序还是面向用户的应用程序。我们的后端服务将为每个客户提供相同的数据。
所以你的 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;
}
});
相关文章:
- React ClickDrag子组件回调
- 在foreach中加载所有项后,Knockoutjs组件回调
- 反应.js:将回调传递给子组件并删除组件
- React.js如何将回调传递给子组件
- 如何绑定'这'到react类之外的函数,后者是来自其他组件的回调
- 如何获取 Ember 组件对象内部承诺成功或错误回调
- 将数据从回调传递到 React 组件
- 如何在回调函数的 Angular 1.5 组件中处理这个问题
- 如何使用 Flux+React.js 从数据库回调渲染组件
- 反应组件 JSON 回调范围
- 角度组件语法,回调函数使用错误的上下文调用
- 如何从WebSocket回调访问React中的组件方法
- 如何获取模型内部的组件引用保存回调函数
- 处理多个组件实例的回调
- onChange回调未在React组件中启动
- 如何在$.ajax的回调函数中更改组件视图中的变量
- -父组件回调如何通过子道具接收参数顺序/值
- 如果不在主代码流中,ActiveX组件调用的回调函数不会触发
- 如何用第三方组件和回调测试EmberJS ?
- 希望通过一个回调函数与参数的子组件在聚合物