score: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.


Related Query

More Query from same tag