title: React & Redux : simple async login
body: <p>I'm a beginner with React &amp; Redux and I'm trying to set up a very simple login form &amp; redirection.
  I'll add react-router or react-router-redux later.</p>
  
  <p>I don't really understand where i have to put my 'logic code' (an ajax call and a redirection).</p>
  
  <p>Here is what I've write.</p>
  
  <p>index.js (entry point) :</p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import App from './containers/App'
  import rootReducer from './reducers/reducers'
  
  let store = createStore(rootReducer);
  let rootElement = document.getElementById('root');
  
  render(
     &lt;Provider store={store}&gt;
        &lt;App /&gt;
     &lt;/Provider&gt;,
     rootElement
  );
  </code></pre>
  
  <p>containers/App.js :</p>
  
  <pre><code>import { Component } from 'react'
  import { connect } from 'react-redux'
  import { login } from '../actions/actions'
  import LoginForm from '../components/LoginForm'
  
  class App extends Component {
     render () {
        const { dispatch } = this.props;
  
        return (
           &lt;div&gt;
              &lt;LoginForm onSubmit={(id, pass) =&gt;
                 dispatch(login(id, pass))
              } /&gt;
           &lt;/div&gt;
        )
     }
  }
  
  const mapStateToProps = (state) =&gt; {
     return {
  
     }
  };
  const mapDispatchToProps = (dispatch) =&gt; {
     return {
  
     }
  };
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p>components/LoginForm.js :</p>
  
  <pre><code>import { Component, PropTypes } from 'react'
  
  class LoginForm extends Component {
     render () {
        return (
           &lt;div&gt;
              &lt;form action="#" onSubmit={(e) =&gt; this.handleSubmit(e)}&gt;
                 &lt;input type="text" ref={node =&gt; { this.login = node }} /&gt;
                 &lt;input type="password" ref={node =&gt; { this.password = node }} /&gt;
                 &lt;input type="submit" value="Login" /&gt;
              &lt;/form&gt;
           &lt;/div&gt;
        )
     }
  
     handleSubmit(e) {
        e.preventDefault();
        this.props.onSubmit(this.login.value, this.password.value);
     }
  }
  
  LoginForm.propTypes = {
     onSubmit: PropTypes.func.isRequired
  };
  
  export default LoginForm;
  </code></pre>
  
  <p>reducers/root.js : </p>
  
  <pre><code>import { combineReducers } from 'redux'
  import user from './user'
  
  const rootReducer = combineReducers({
     user
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>reducers/user.js :</p>
  
  <pre><code>import { LOGIN, BAD_LOGIN, LOGOUT } from '../actions/actions'
  
  const initialState = {
     cid: null,
     username: '',
     logo: ''
  };
  
  const user = (state = initialState, action) =&gt; {
     switch (action.type) {
        case LOGIN:
           const api = new loginApi; //simple version
           api.login(action.login, action.password)
              .done(res =&gt; {
                 //Right here ?
              })
              .fail(err =&gt; console.error(err));
  
           return state;
  
        case LOGOUT:
           //...
           return state;
  
        default:
           return state;
     }
  };
  
  export default user;
  </code></pre>
  
  <p>actions/actions.js : </p>
  
  <pre><code>export const LOGIN = 'LOGIN';
  export const LOGOUT = 'LOGOUT';
  
  export function login(login, password) {
     return {
        type: LOGIN,
        login,
        password
     }
  }
  </code></pre>
  
  <p>following this link : <a href="http://redux.js.org/docs/advanced/AsyncActions.html" rel="noreferrer">http://redux.js.org/docs/advanced/AsyncActions.html</a> 
  I hesitate between write my login stuff inside the reducer (but I think reducer's purpose is just to reduce the state object) or to create multiple actions with one 'main' action which call <code>REQUEST_LOGIN</code> and <code>LOGIN_SUCCES</code> / <code>LOGIN_FAILURE</code> for example.</p>
  
  <p>Thanks.</p>