Sign in Component using updated redux-form.

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:email,password: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"/>
				<button type="submit" className="btn btn-primary">Sign in</button>
			</form>
		)
	}
}

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);

//Use connect from react-redux to gain access to actions
Signin = connect(null, actions)(Signin);

export default Signin;

This gist was so helpful - Thank You.

I'd arrived at almost all of it on my own, but was not finding help anywhere with this last bit that was stumping me:

From the gist, v6 code:
handleSignin( { email, password } ){ ... // << YES

My blind spot was: What parameters to pass to that helper method was not clear to me, as I worked through understanding how to "migrate" from the course's ReduxForm v5 to the latest v6.

From looking over the course (v5) code, it looked like ReduxForm was going to take care of, for me, behind the scenes, the grouping of form fields into this object, formProps:

From course, v5 code:
handleSignin( formProps ){ ... // << NO (not if you're using v6)
(actually, the method there is called handleFormSubmit - but, same idea)

And from looking at the v6 migration online documentation I was not finding an example that used a helper method as we do in signin.js, signup.js (for our client-side validation, then our async server-side call).

So I was a little lost, not realizing what the heck you need to do with your form fields, if you need to sling them around, pass them to a function like this.

And this was especially confusing (or at least non-intuitive to me) in that ReduxForm v6 is happy to let you pass an object that collects together your form fields to the validate() function.

Both v5 and v6:
validate( formProps ){ ... // << OH YEAH, NO PROBLEM, PASS ME A NICE OBJECT OF ALL THOSE FORM FIELDS

So once again, MANY THANKS for a working example gist that showed me the bit I needed to complete this:

handleSignin ( { email, password } ) { ... // << I GUESS IF YOU WRITE YOUR OWN METHOD, YOU GOT TO PASS THOSE FORM FIELDS IN BY NAME INDIVIDUALLY

Cheers. Thanks.
William R.

Hope you don't mind a link to the Udemy course Q&A where this was discussed ... (password-protected resource)
https://www.udemy.com/react-redux-tutorial/learn/v4/questions/1644420