Mapping actions and state to ReduxForm - reactjs

Question

I recently upgraded from Redux Form 5.3.1 to Redux Form 6.2 and I've not been able to dispatch my custom action creator on the form submit; it shows up as not a function. The formProps are however, correct when inspected and the handleFormSubmit is called correctly. It's just that it doesn't recognize any actions as mapped to properties.
Update
Fairly confident, it's the change in the api of reduxForm call. https://github.com/erikras/redux-form/issues/2013
This might be a solution:
https://gist.github.com/insin/bbf116e8ea10ef38447b
The code from Redux Form 6.2:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Field, reduxForm } from 'redux-form';
import InputField from '../input-field/index.js';
class Signup extends Component {
handleFormSubmit(formProps) {
// PROBLEM -> Uncaught TypeError: this.props.signupUser is not a function
this.props.signupUser(formProps);
}
render() {
const { handleSubmit, submitting } = this.props;
return (
<form onSubmit={ handleSubmit(this.handleFormSubmit.bind(this)) } >
<Field name="username" type="text" component={ InputField } label="Username" />
<Field name="email" type="email" component={ InputField } label="Email" />
<Field name="password" type="password" component={ InputField } label="Password" />
<Field name="password_confirmation" type="password" component={ InputField } label="Confirmation" />
<div>
<button type="submit" disabled={ submitting }>Submit</button>
</div>
</form>
);
}
}
function mapStateToProps({ auth }) {
return { errorMessage: auth.errors };
}
export default reduxForm({
form: 'signup',
warn,
validate
}, mapStateToProps, actions)(Signup);
signupUser action creator
export function signupUser(props) {
return dispatch => {
axios.post(`${apiRoot}users`, { user: { ...props } })
.then(response => {
const { status, errors, access_token, username } = response.data;
if (status === 'created') {
// handler
}
else {
dispatch(authError(errors));
}
})
.catch(err => dispatch(authError(err.message)));
}
}
Previously working code (5.3.1):
class Signup extends Component {
handleFormSubmit(formProps) {
this.props.signupUser(formProps);
}
render() {
const {
handleSubmit,
fields: {
email,
password,
password_confirmation,
username,
}
} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Username:</label>
<input className="form-control" {...username} />
{username.touched && username.error && <div className="error">{username.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Email:</label>
<input className="form-control" {...email} />
{email.touched && email.error && <div className="error">{email.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Password:</label>
<input type="password" className="form-control" {...password} />
{password.touched && password.error && <div className="error">{password.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Confirm Password:</label>
<input type="password" className="form-control" {...password_confirmation} />
{password_confirmation.touched && password_confirmation.error && <div className="error">{password_confirmation.error}</div>}
</fieldset>
<button action="submit">Sign up</button>
</form>
);
}
As you can see, apart from error handling they're very similar. Obviously, it's a major version change, I'm just not seeing why the action creator will be undefined. I attempted to change the connect call to use a mapDispatchToProp function but had the same result. When I inspect the props by throwing a debugger, none of the functions are mapped to the props. What happened?
Is there a way to capture the form handler submit? I can't think of a situation where you wouldn't want to capture the form submit.

Answer 1

The 6+ version introduced a change to how the reduxForm api works. Instead of it taking the form
export default reduxForm({
form: 'name-of-form',
fields: ['field1', 'field2'],
// other configs
}, mapStateToProps, actions)(ComponentName);
Instead, you should use the redux connect function like this if you want to connect redux properties and actions:
const form = reduxForm({
form: 'name-of-form',
// other configs
});
export default connect(mapStateToProps, actions)(form(ComponentName));
This is working for me now.

Answer 2

My way of connecting:
import { connect } from 'react-redux';
class Signup extends Component {
// ...
}
const SignupForm = reduxForm({
form: 'signup',
warn,
validate
})(Signup);
export default connect(
({ auth }) => ({
errorMessage: auth.errors
}),
{
...actions
}
)(SignupForm);

Answer 3

The API for reduxForm() changed from 5.x to 6.x.
With 5.x you use to be able to do exactly what you're doing now:
import * as actions from '../../actions';
function mapStateToProps({ auth }) {
return { errorMessage: auth.errors };
}
export default reduxForm({
form: 'signup',
warn,
validate
}, mapStateToProps, actions)(Signup);
With 6.x they only let you pass in the config object. However, the official redux-form documentation for 6.2.0 (see bottom of page) recommends the following:
import * as actions from '../../actions';
function mapStateToProps({ auth }) {
return { errorMessage: auth.errors };
}
Signup = reduxForm({
form: 'signup',
warn,
validate
})(SupportForm);
export default connect(mapStateToProps, actions)(Signup);