index.jsx

var React = require('react/addons');
var Reflux = require('reflux');
var when = require('when');

var UserAPI = {
  signin: function(username, password) {
    var deferred = when.defer();

    setTimeout(function() {
      if (Math.random() >= 0.5) {
        localStorage.setItem('token', 'abc');
        deferred.resolve({
          token: 'abc'
        });
      } else {
        deferred.reject(new Error('nope'));
      }
    }, 500);

    return deferred.promise;
  },

  getToken: function() {
    return localStorage.getItem('token');
  },

  signout: function() {
    localStorage.removeItem('token');
  }
};

var Actions = Reflux.createActions([
  'signin',
  'signinResponse',
  'signinError',
  'signout'
]);

Actions.signin.listen(function(username, password) {
  console.log(['signin', username, password]);

  UserAPI.signin(username, password)
    .then(Actions.signinResponse, Actions.signinError)
});

Actions.signinResponse.listen(function(response) {
  console.log(['response', response.token]);
})

Actions.signinError.listen(function(error) {
  console.log(['error', error]);
});

Actions.signout.listen(function() {
  console.log(['signout']);

  UserAPI.signout();
});

var SigninStore = Reflux.createStore({
  listenables: Actions,

  init: function() {
    this.requesting = false;
    this.error = null;
    this.token = UserAPI.getToken();
  },

  onSignin: function() {
    this.requesting = true;
    this.error = null;
    this.token = null;
    this.distribute();
  },

  onSigninResponse: function(response) {
    this.requesting = false;
    this.error = null;
    this.token = response.token;
    this.distribute();
  },

  onSigninError: function(error) {
    this.requesting = false;
    this.error = error;
    this.token = null;
    this.distribute();
  },

  onSignout: function() {
    this.requesting = false;
    this.error = null;
    this.token = null;
    this.distribute();
  },

  distribute: function() {
    this.trigger({
      requesting: this.requesting,
      error: this.error,
      token: this.token
    });
  },

  getDefaultData: function() {
    return {
      requesting: this.requesting,
      error: this.error,
      token: this.token
    };
  }
});

var App = React.createClass({
  mixins: [
    Reflux.connect(SigninStore),
    React.addons.PureRenderMixin,
    React.addons.LinkedStateMixin
  ],

  getInitialState: function() {
    return {
      username: '',
      password: ''
    };
  },

  render: function() {
    console.log(this.state)

    return (
      <form onSubmit={this._handleSubmit}>
        <input valueLink={this.linkState('username')}
               disabled={this.state.requesting} />
        <input valueLink={this.linkState('password')}
               disabled={this.state.requesting} />
        <button disabled={this.state.requesting}>
          Signin
        </button>
        {this.state.error &&
          <span style={{color: 'red'}}>{this.state.error.message}</span>
        }
        {this.state.token &&
          <span style={{color: 'green'}}>{this.state.token}</span>
        }
        {this.state.requesting &&
          <span style={{color: 'blue'}}>Loading...</span>
        }
        {this.state.token &&
          <button onClick={this._handleSignout}>Signout</button>
        }
      </form>
    )
  },

  _handleSubmit: function(event) {
    event.preventDefault();
    Actions.signin(this.state.username, this.state.password);
  },

  _handleSignout: function(event) {
    event.preventDefault();
    Actions.signout();
  }
});

document.addEventListener('DOMContentLoaded', function() {
  React.render(<App />, document.getElementById('app'));
});