example

prova.js

// first component:

var React = require('react');
var RouteHandler = require('react-router').RouteHandler;
var AccountStore = require('../stores/AccountStore');
import router from '../router';
var State = require('react-router').State;

var App = React.createClass({
  mixins: [State],

  getInitialState () {
    return AccountStore.getState();
  },

  componentWillMount () {
    AccountStore.listen(this.onChange);
    AccountStore.fetch();
  },

  componentDidMount () {
    this.state.entryUrl= this.getPath();
  },

  componentWillUpdate(props, state) {
    if(!state.logged && this.getPathname() != '/signup' && this.getPathname() != '/reset-password') {
      router.transitionTo('login');
    }
  },

  onChange(state){
    console.log('yes!'); // here it is called!
    this.setState(state);
  },

  render () {
    if(this.state.loading) {
      return (
        <div className="loading">loading....</div>
        )
    }else{
      return (
        <div className="container">
          <RouteHandler/>
        </div>
      )
    }
    
  }
});


// component 2

var React = require('react');
var AccountStore = require('../stores/AccountStore');
import router from '../router';
var Form = require('./Form.js.jsx');
var Alert = require('./Alert.js.jsx');
var Modal = require('./Modal.js.jsx');
import AltContainer from 'alt/AltContainer';

var Login = React.createClass({
  getInitialState() {
    //alt.recycle(AccountStore);
    return AccountStore.getState();
  },

  componentDidMount() {
    AccountStore.listen(this.onChange);
    if(this.state.logged) {
      router.transitionTo('add-domain');
    }
  },

  componentDidUpdate() {
    if(this.state.verifyOTP){
      $(`#${React.findDOMNode(this.refs.configureModal).id}`).modal('show');
      $(`#${React.findDOMNode(this.refs.configureModal).id}`).on('hidden.bs.modal', ()=>{
        console.log('eccolo');
      });
    }
  },

  componentWillUpdate(props, state) {
    console.log('ciaoooooo', state);
  },

  componentWillUnmount() {
    if(this.state.verifyOTP) {
      $(`#${React.findDOMNode(this.refs.configureModal).id}`).modal('hide');
    }
  },

  onChange(state) {
    console.log('noo!', state); // here not!
    this.setState(state);
  },

  _handleLogin(e) {
    e.preventDefault();
    let email = document.querySelector('#email-field').value;
    let password = document.querySelector('#password').value;
    AccountStore.login(email, password);
  },

  _verify() {
    let code = document.querySelector('#otp-code').value;
    AccountStore.verifyOtp(code);
  },

  _handleForgottenPassword() {
    $(`#${React.findDOMNode(this.refs.forgottenPasswordModal).id}`).modal();
  },

  _recoverPassword() {
    let email = document.querySelector('#forgot-email-address').value;
    if(!email) {
      //this.state.errors.forgotPassword = 'Insert a valid email address';
      //this.forceUpdate();
    }
    AccountStore.forgotPassword(email);
  },

  render() {
    let modal= '';
    if(this.state.verifyOTP) {
      modal = 
        <Modal ref="configureModal" name="configureModal">
          <h2>Verifica codice</h2>
          <Alert errors={this.state.errors.otp} />
          <Form errors={this.state.errors.otp}>
            <div className="form-group">
              <label>inserisci il codice di verifica generato dal tuo dispositivo</label>
              <input type="text" name="" id="otp-code" className="form-control" required="required" title="" />
            </div>
          </Form>
          <div className="footer">
            <button htmlFor="no" type="button" className="btn btn-primary"  onClick={this._verify}>Verifica</button>
          </div>
        </Modal>;
    }
    return (
      <div>
        <Alert errors={this.state.errors.login || this.state.errors.changePasswordToken} />
        <Form errors={this.state.errors.login}>
          <div className="form-group">
            <label htmlFor="email-field">Email</label>
            <input type="email" className="form-control" id="email-field" placeholder="Enter email" ref="email" />
          </div>
          <div className="form-group">
            <label htmlFor="email-field">Password</label>
            <input type="password" className="form-control" id="password" placeholder="Enter password" ref="password"/>
          </div>
          <button type="submit" className="btn btn-default" onClick={this._handleLogin}>Login</button>
        </Form>
        <a onClick={this._handleForgottenPassword}>Forgot your password?</a>
        <Modal ref="forgottenPasswordModal" name="forgottenPasswordModal">
          <h2>Recover your password</h2>
          <Alert errors={this.state.errors.login} />
          <Form errors={this.state.errors.login}>
            <div className="form-group">
              <label>insert your email address</label>
              <input type="text" name="" id="forgot-email-address" className="form-control" required="required" title="" />
            </div>
            <p>We will send a link where you will be able to set a new password to this email address</p>
          </Form>
          <div className="footer">
            <button htmlFor="no" type="button" className="btn btn-primary"  onClick={this._recoverPassword}>Recover my password</button>
          </div>
        </Modal>
        {modal}
      </div>
    );
  }
});

module.exports = Login;



// the action handler in the store:


handleLoggedIn(account) {
    this.logged = true;
    this.verifyOTP = false;
    this.loading = false;
    this.errors = {};
    this.errors.otp = '';
    this.errors.login = '';
    this.account = account.data.resources;
  }