我可以发送多个活动事件吗？

Question

我想在身份验证发生时显示加载程序。 我有sendAuthCredentials动作。 对于此操作，我要执行几个操作：

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

我已经有了Loader react组件， 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是否正确。

感谢您的回答。

Answer 1

您的解决方案固然不错，但是正如您提到的，您没有利用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，并需要一个generateAuthenticated来完成这项工作。

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