如何使用Flux + React.js从数据库回调中呈现组件-电脑我帮您

如何使用Flux + React.js从数据库回调中呈现组件

我正在使用React.js（使用Material-UI）开发一个Web应用程序，遵循Flux架构。在我的项目中，我有两个文件夹：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的简单调用不起作用？

谢谢！

回答如下：

您需要在动作文件中创建一个函数，如下所示 -

 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;
    }
});