登录ajax请求Flux React



我该怎么做
登录后提交表单(React Component)
使用通量结构
提供响应的ajax请求
你能举个例子吗?

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

以下是我制作的方法

当我的组件启动时,我向Store启动一个INIT操作,该操作最初获取我需要的数据。以下是简化的数据流

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

图书馆:

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

正如您所看到的,当我的组件挂载时,我启动了一个新的操作,我的存储将处理这个操作。

商店:

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

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

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

最新更新