登录ajax请求Flux React?

时间:2014-10-25 13:37:30

标签: reactjs flux reactjs-flux

我该怎么办? 登录表单提交后(React Component)
使用焊剂结构
ajax请求提供响应?
你能提供一些例子吗?

2 个答案:

答案 0 :(得分:7)

基本上,您需要发出Ajax请求,然后创建成功/错误处理程序。在这些处理程序中,您将创建操作以通知商店结果。拥有AppStore或SessionStore或者保存与当前用户和身份验证令牌相关的数据的东西可能是个好主意。当前用户通过身份验证时,您的控制器视图可以侦听该存储并呈现其子级。

答案 1 :(得分:3)

这是我的表现:

当我的组件引导时,我向Store发起一个INIT动作,它最初获取我需要的数据。这是简化的数据流

登录后我的库组件被渲染,所以我需要初始化数据(书籍,用户等..)

库:

componentDidMount: function() {
  Store.addChangeListener(this._onChange);
  Actions.initialize();
},

正如您所看到的,当我的组件安装时,我启动了一个新操作,我的商店将处理此操作。

商店:

switch(action.actionType) {

    case Constants.INIT:
      _init().done(function() {
        Store.emitChange();
      });
      break;

我正在调用将返回promise对象的私有函数_init()。当承诺实现时,商店已准备好发出它的更改事件。

_init我模拟了一些异步数据加载,这就是我做出承诺的原因,这里是:

function _init() {

  var loadBooksDeferred = new jQuery.Deferred(),
      loadUsersDeferred = new jQuery.Deferred(),
      loadCategoriesDeferred = new jQuery.Deferred(),
      stateReadyDfd = new jQuery.Deferred();

  _loadBooks(loadBooksDeferred);
  _loadUsers(loadUsersDeferred);
  _loadCategories(loadCategoriesDeferred);

  jQuery
    .when(loadBooksDeferred, loadUsersDeferred, loadCategoriesDeferred)
    .then(stateReadyDfd.resolve, stateReadyDfd.reject);

  return stateReadyDfd;
}