title: Understanding how to implement a Flux architecture using Flummox
body: <p>I currently have a very simple React app that uses state to determine a couple of views. Clicking on the submit element fires a simple call to an endpoint passing either login or registration credentials. I could continue down this road to use React and JSON returned from the server to determine my views, but I am aware this is not proper the way to handle data.</p>
  
  <p>My question is, from here, how do I implement a Flux pattern using Flummox? Do I fire an action with the payload and make my API call in the action or the store? I'm trying to understand the proper way to make this roundtrip from an action in my UI, to my API call, to getting the response and the UI responding to a change on the store.</p>
  
  <p>Below is code for my Auth component. I would like to see an example on how to use Flummox in a situation as simple as this, so I can understand what's needed to scale and add features.</p>
  
  <p><strong>Auth.jsx</strong>
      </p>
  
  <pre><code>'use strict';
  
  var React  = require('react');
  var request = require('request');
  
  var Auth = React.createClass({
  
    getInitialState: function() {
      return {
        name: '',
        email: '',
        pass: '',
        passConfirm: '',
        login: true,
        register: false
      };
    },
  
    handleLogin: function(){
      this.setState({
        login: true,
        register: false
      });
    },
  
    handleRegister: function(){
      this.setState({
        register: true,
        login: false
      });
    },
  
    handleName: function(event){
      this.setState({
        name: event.target.value
      });
    },
  
    handleEmail: function(event){
      this.setState({
        email: event.target.value
      });
    },
  
    handlePass: function(event){
      this.setState({
        pass: event.target.value
      });
    },
  
    handlePassConfirm: function(event){
      this.setState({
        passConfirm: event.target.value
      });
    },
  
    handleSubmit: function(){
  
      var register = {
        name: this.state.name,
        email: this.state.email,
        password: this.state.pass,
        confirmPassword: this.state.passConfirm
      };
  
      var endpoint = 'http://localhost:3000';
  
      request({
         uri: endpoint + '/register',
         method: 'POST',
         json: register
     }, function(error, response, body){
         if (error) {
           console.log(error);
         } else {
           console.log(response);
         }
     });
    },
  
    renderLogin: function () {
      return (
        &lt;form className="login"&gt;
          &lt;div className="input-container"&gt;
            &lt;input type='text' value={this.state.email} onChange={this.handleEmail} placeholder="email" /&gt;
            &lt;input type='password' value={this.state.password} onChange={this.handlePass} placeholder="password" /&gt;
          &lt;/div&gt;
  
          &lt;div className="auth-submit" onClick={this.handleSubmit}&gt;Login&lt;/div&gt;
        &lt;/form&gt;
      );
    },
  
    renderRegister: function(){
  
      return (
        &lt;form className="register"&gt;
          &lt;div className="input-container"&gt;
            &lt;input type='text' value={this.state.name} onChange={this.handleName} placeholder="name" /&gt;
            &lt;input type='email' value={this.state.email} onChange={this.handleEmail} placeholder="email" /&gt;
            &lt;input type='password' value={this.state.pass} onChange={this.handlePass} placeholder="password" /&gt;
            &lt;input type='password' value={this.state.passConfirm} onChange={this.handlePassConfirm} placeholder="confirm password" /&gt;
          &lt;/div&gt;
  
          &lt;div className="auth-submit" onClick={this.handleSubmit}&gt;Register&lt;/div&gt;
        &lt;/form&gt;
      );
    },
  
    render: function(){
  
      var auth = null;
      if (this.state.login) {
        auth = this.renderLogin();
      } else if (this.state.register) {
        auth = this.renderRegister();
      }
  
      return (
        &lt;div className="auth-container"&gt;
          &lt;div className="auth-logo"&gt;Flow&lt;/div&gt;
          {auth}
          &lt;div className="auth-select"&gt;
            &lt;div className="auth-label-container"&gt;
              &lt;div className="auth-label" onClick={this.handleLogin}&gt;Login&lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="auth-label-container"&gt;
              &lt;div className="auth-label" onClick={this.handleRegister}&gt;Register&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    },
  });
  
  module.exports = Auth;
  </code></pre>