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

Question

I want to show loader when authentication happens. I've got sendAuthCredentials action. On this action I want to do several actions:

1. Show Loader
2. Send auth request to server
3. Handle response and inform UserStore is user authenticated or not
4. Hide Loader.

I've got Loader react component, LoaderStore and LoaderAction for working with component.

So my sendAuthCredentials method looks like:

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

It's works but I'm not sure Is it right way to use Actions in Flux.

Thanks for the answer.

Answer 1

Your solution is fine as it is, but as you mention you are not utilizing the potential in Flux. If you utilize Flux you do not need to use promises to keep track of your async calls. The numbered list of actions you mention is just a regular Flux data flow.

With Flux you would have a UserStore where you could store if this user was authenticated or not (plus other data you would want to store about a user). You could then just prompt the loader until you got an event dispatched from the UserStore telling you that the user is authenticated or not.

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

Under is an example of how your app would listen and handle the event. Just to clarify, this is a very simple component. You could check the authCode in a better way than with an if-else.

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

Then your React-component would just have to see what data it would get and show either the user information, error or the loader.

Just remember you need an addAuthListener in your store and an emitAuthenticated to make this work.

Best practice is to do the getRequest where you dispatch the actions, and when that returns you notify the store. However, as seen in the example, you can do it in the store as well.