登录ajax请求Flux React？

Posted 2023-02-22

【中文标题】登录ajax请求Flux React？

【英文标题】：Login ajax request Flux React?

【发布时间】：2014-12-21 04:20:26

【问题描述】：

我该怎么办 登录后提交表单（React 组件） 使用通量结构 提供响应的 ajax 请求？ 可以举个例子吗？

【问题讨论】：

可能和这个问题一样：***.com/questions/26567401/…

其实，我有一个不同的问题，但是这个，我想我已经“解决”了:)

【参考方案1】：

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

【讨论】：

你能看看gist.github.com/ButuzGOL/707d1605f63eef55e4af是你的意思吗？

我认为您基本上走在正确的轨道上，但是您正在使用 SIGNIN_SUCCESS_EVENT 将自己逼入绝境。如果你只是保持抽象——只是一个“改变”事件——那么你就有一个更灵活的系统。试图知道哪种类型的事件被触发会导致更紧密的耦合。示例：当您遇到错误时会发生什么？现在您需要一个新事件，并且您的视图需要知道如何处理每个事件。保持简单，将状态保存在 store 中，而不是 event 中，也不是 view 中。当更改事件发生时，您的视图只要求存储的新状态。

@fisherwebdev，我可以请你在这里看看一个与 reat 相关的问题 - ***.com/questions/27913004/… 吗？

【参考方案2】：

我是这样制作的：

当我的组件启动时，我会向 Store 发起一个 INIT 操作，该操作最初会获取我需要的数据。这是简化的数据流

登录后我的图书馆组件被渲染，所以我需要初始化数据（书籍、用户等）

图书馆：

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

如您所见，当我的组件确实挂载时，我触发了一个新操作，我的商店将处理此操作。

商店：

switch(action.actionType) 

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

我正在调用私有函数_init()，它将返回一个promise 对象。当 Promise 实现时，Store 准备好发出它的 change 事件。

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