我可以发送几个关于不断变化的行动的事件吗

Can I send several events on action in flux?

本文关键字：变化 于不断 事件 几个 我可以      更新时间：2023-09-26

我想在进行身份验证时显示加载程序。我有sendAuthCredentials动作。关于这个动作，我想做几个动作：

  1. 显示加载器
  2. 向服务器发送身份验证请求
  3. 处理响应并通知UserStore是否已通过用户身份验证
  4. 隐藏加载器

我有Loader反应组件，LoaderStore和LoaderAction用于处理组件。

所以我的sendAuthCredentials方法看起来像：

UserActions = {
/**
 * @param {string} username
 * @param {string} password
 */
  sendAuthCredentials: function(username, password) {
    return Q.all(
      [
        LoaderActions.showLoader(),
        authenticateUser(username, password)
          .then(function( data ) {
            if( data ) {
              AppDispatcher.handleViewAction({
                type: ActionTypes.USER_LOGIN_SUCCESS,
                data: data
              });
              return Q( "succcess" );
            } else {
              AppDispatcher.handleViewAction({
                type: ActionTypes.USER_LOGIN_FAIL
              });
              return Q( "failed" );
            }
          })
      ]
    ).then(LoaderActions.hideLoader);
  }
};

它是有效的，但我不确定在Flux中使用Actions是否正确。

谢谢你的回答。

您的解决方案很好，但正如您所提到的，您没有利用Flux中的潜力。如果您使用Flux，就不需要使用promise来跟踪异步调用。您提到的动作的编号列表只是一个常规的Flux数据流。

使用Flux，您将有一个UserStore，您可以在其中存储该用户是否经过身份验证（以及您希望存储的关于该用户的其他数据）。然后，您可以只提示加载程序，直到从UserStore发出一个事件，告诉您用户是否已通过身份验证。

var authenticateUser = function(username) {
  <getRequestToAuthentticationResource>
  .then(function(data){
    <storeDataInUserStore>
    emitAuthenticated();
  })
}
var UserStore = _.extend({}, EventEmitter.prototype, {
  dispatcherIndex: AppDispatcher.register(function(payload) {
  var action = payload;
  switch (action.actionType) {
    case UserConstants.AUTHENTICATE:
      authenticateUser(action.username);
      break;
  }
}

下面是您的应用程序如何监听和处理事件的示例。澄清一下，这是一个非常简单的组成部分。您可以使用比if-else更好的方式检查authCode。

 var YourApp = React.createClass({
  getInitialState: function() {
    return {
       authCode: "loading"
    }
  },
  componentDidMount: function() {
    UserStore.addAuthListener(this._onChange);
  },       
  _onChange: function() {
    setState({
       authCode: UserStore.getAuthCode() //Sucess or fail
    });
  }
  render: function() {
    if(this.state.authCode === "loading"){
      return <load information>
    } else if(this.state.authCode === "success") {
      return <success information>
    } else {
      return <fail>
    }
 }

然后你的React组件只需要看看它会得到什么数据，并显示用户信息、错误或加载程序。

请记住，您的商店中需要一个addAuthListener和一个emitAuthenticated来实现这一点。

最佳实践是执行getRequest，在那里分派操作，当返回时通知商店。但是，如示例中所示，您也可以在商店中执行此操作。

相关文章：