React & Redux : simple async login

Question

I'm a beginner with React & Redux and I'm trying to set up a very simple login form & redirection. I'll add react-router or react-router-redux later.

I don't really understand where i have to put my 'logic code' (an ajax call and a redirection).

Here is what I've write.

index.js (entry point) :

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(
   <Provider store={store}>
      <App />
   </Provider>,
   rootElement
);

containers/App.js :

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 (
         <div>
            <LoginForm onSubmit={(id, pass) =>
               dispatch(login(id, pass))
            } />
         </div>
      )
   }
}

const mapStateToProps = (state) => {
   return {

   }
};
const mapDispatchToProps = (dispatch) => {
   return {

   }
};
export default connect(mapStateToProps)(App);

components/LoginForm.js :

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
   render () {
      return (
         <div>
            <form action="#" onSubmit={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }

   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmit(this.login.value, this.password.value);
   }
}

LoginForm.propTypes = {
   onSubmit: PropTypes.func.isRequired
};

export default LoginForm;

reducers/root.js :

import { combineReducers } from 'redux'
import user from './user'

const rootReducer = combineReducers({
   user
});

export default rootReducer;

reducers/user.js :

import { LOGIN, BAD_LOGIN, LOGOUT } from '../actions/actions'

const initialState = {
   cid: null,
   username: '',
   logo: ''
};

const user = (state = initialState, action) => {
   switch (action.type) {
      case LOGIN:
         const api = new loginApi; //simple version
         api.login(action.login, action.password)
            .done(res => {
               //Right here ?
            })
            .fail(err => console.error(err));

         return state;

      case LOGOUT:
         //...
         return state;

      default:
         return state;
   }
};

export default user;

actions/actions.js :

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export function login(login, password) {
   return {
      type: LOGIN,
      login,
      password
   }
}

following this link : http://redux.js.org/docs/advanced/AsyncActions.html 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 REQUEST_LOGIN and LOGIN_SUCCES / LOGIN_FAILURE for example.

Thanks.

Answer 1

You are correct, reducers are only for mapping data to the state. Create your async logic in the action creator. The key is to use a store enhancer to make async actions possible.

• redux-thunk
• redux-promise

A tutorial on async redux can be found in the redux documentation.