NOT_WORKING_components_signin.js

import React, { Component } from 'react';
import {Field,reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';

class Signin extends Component {
	
	handleSignin({ email, password }){
		// Log values
		console.log('Email', email);
		console.log('Password', password);

		// Call action creator
		this.props.signInUser({email,password})
	};

	render(){
		// Get handleSubmit of the props, supplied by redux-form
		const { handleSubmit } = this.props

		return (
			<form onSubmit={ handleSubmit(this.handleSignin.bind(this))}>
				<h3>Sign in</h3>
				<Field component={renderField} type="text" name="email" label="Email"/>
				<Field component={renderField} type="password" name="password" label="Password"/>
				{ this.renderAlert() }
				<button type="submit" className="btn btn-primary">Sign in</button>
			</form>
		)
	}
	renderAlert() {
		if(this.props.error){
      //CHANGE:	if(this.props.errorMessage){
			return(
				<div className="alert alert-danger">
					<strong>
						HELP: {this.props.error}
            //CHANGE:	HELP: {this.props.errorMessage}
					</strong>
				</div>
			)
		}
	}
}

const validate = values => {
	const errors = {}
	
	//Check email value for empty
	if (!values.email) {
		errors.email = 'Email is required'
	}

	//Check password value for empty
	if (!values.password) {
		errors.password = 'Password is required'
	}
	
	return errors
}

const renderField = ({ input, label, type, meta: { touched, error , invalid} }) => {
	//Construct form-group class depending on form state
	const groupClass = touched ? (invalid ? 'form-group has-danger':'form-group has-success') : 'form-group';
	//Construct form-control class depending on form state
	const inputClass = touched ? (invalid ? 'form-control form-control-danger':'form-control form-control-success') : 'form-control';
	
	return (
		<div className={groupClass}>
			<label>{label}</label>
			<input {...input} placeholder={label} type={type} className={inputClass} />
			<div className="form-control-feedback">
				{touched ? <span>{error}</span> : ''}
			</div>
		</div>
	)
}



//Hookup redux form
Signin = reduxForm({
	form:'signin',
	validate	
})(Signin);


function mapStateToProps(state){
	return { error:state.auth.error }
  //CHANGE: return { errorMessage:state.auth.error }
}

//Use connect from react-redux to gain access to actions
export default connect(mapStateToProps, actions)(Signin);

reducers_auth_reducer.js

import {AUTH_USER, UNAUTH_USER, AUTH_ERROR } from '../actions/types';

export default function(state = {}, action){
	switch(action.type){
		case AUTH_USER:
			return {...state, authenticated:true};
		case UNAUTH_USER:
			return {...state, authenticated:false};
		case AUTH_ERROR:
			return {...state, error: action.payload};
		default:
			return state;
	}
}

reducers_index.js

import { combineReducers } from 'redux';
import { reducer as formReducer} from 'redux-form';
import authReducer from './auth_reducer';

const rootReducer = combineReducers({
  form: formReducer,
  auth: authReducer
});

export default rootReducer;

WORKING_components_signin.js

import React, { Component } from 'react';
import {Field,reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';

class Signin extends Component {
	
	handleSignin({ email, password }){
		// Log values
		console.log('Email', email);
		console.log('Password', password);

		// Call action creator
		this.props.signInUser({email,password})
	};

	render(){
		// Get handleSubmit of the props, supplied by redux-form
		const { handleSubmit } = this.props

		return (
			<form onSubmit={ handleSubmit(this.handleSignin.bind(this))}>
				<h3>Sign in</h3>
				<Field component={renderField} type="text" name="email" label="Email"/>
				<Field component={renderField} type="password" name="password" label="Password"/>
				{ this.renderAlert() }
				<button type="submit" className="btn btn-primary">Sign in</button>
			</form>
		)
	}
	renderAlert() {
		if(this.props.errorMessage){
			return(
				<div className="alert alert-danger">
					<strong>
						HELP: {this.props.errorMessage}
					</strong>
				</div>
			)
		}
	}
}

const validate = values => {
	const errors = {}
	
	//Check email value for empty
	if (!values.email) {
		errors.email = 'Email is required'
	}

	//Check password value for empty
	if (!values.password) {
		errors.password = 'Password is required'
	}
	
	return errors
}

const renderField = ({ input, label, type, meta: { touched, error , invalid} }) => {
	//Construct form-group class depending on form state
	const groupClass = touched ? (invalid ? 'form-group has-danger':'form-group has-success') : 'form-group';
	//Construct form-control class depending on form state
	const inputClass = touched ? (invalid ? 'form-control form-control-danger':'form-control form-control-success') : 'form-control';
	
	return (
		<div className={groupClass}>
			<label>{label}</label>
			<input {...input} placeholder={label} type={type} className={inputClass} />
			<div className="form-control-feedback">
				{touched ? <span>{error}</span> : ''}
			</div>
		</div>
	)
}



//Hookup redux form
Signin = reduxForm({
	form:'signin',
	validate	
})(Signin);


function mapStateToProps(state){
	return { errorMessage:state.auth.error }
}

//Use connect from react-redux to gain access to actions
export default connect(mapStateToProps, actions)(Signin);