redux-form onSubmit function not firing - redux-form

Question

I've been looking at many ways to do this and have even made a HOC and changed it to a class component. I've tried the few ways I have seen such as invoking handleSubmit with the prop. I am using redux tools and I am used to seeing something such as submit_failed or submit_success, but I don't see that and I don't know why the onSubmit function doesn't fire. Here is a sample of one of the ways I did it where I follow the simple example in redux-form docs:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button, Grid } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {signup} from '../../actions/user-actions';
import { required, minValue7, email, renderField } from '../helpers/validations';
let SignupForm = (props) => {
const { handleSubmit } = props.signup;
return (
<Grid centered columns={2}>
<Grid.Column className="home">
<Form className="forms" onSubmit={ handleSubmit }>
<Form.Field inline>
<Field
name="username"
component={renderField}
type="text"
placeholder="Username"
label="Username"
validate={[required]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="email"
component={renderField}
type="email"
placeholder="Email"
label="Email"
validate={[required, email]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="password"
component={renderField}
type="password"
placeholder="Password"
label="Password"
validate={[required, minValue7]}
/>
</Form.Field>
<Link to={'/signup2'}>
<Button type="submit">Save</Button>
</Link>
</Form>
</Grid.Column>
</Grid>
)
}
SignupForm = reduxForm({
form: 'form1'
})(SignupForm)
const mapStateToProps = (state, ownProps) => {
return {
userSignup: state.userSignup
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({signup}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(SignupForm)
Also I have tried it where I do const {handleSubmit} = props and then change ```onSubmit={handleSubmit(this.props.signup)}

Answer 1

I ended up having to go with my tactic of using the class syntax with the help of #Mister Epic the redirect was occurring before the action.
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button, Grid } from 'semantic-ui-react';
import { required, minValue7, email, renderField } from '../helpers/validations';
class SignupForm extends React.Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
}
submit(values) {
this.props.signup(values)
this.props.history.push('/form2')
}
render () {
return (
<Grid centered columns={2}>
<Grid.Column className="home">
<Form className="forms" onSubmit={ this.props.handleSubmit(this.props.submit) }>
<Form.Field inline>
<Field
name="username"
component={renderField}
type="text"
placeholder="Username"
label="Username"
validate={[required]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="email"
component={renderField}
type="email"
placeholder="Email"
label="Email"
validate={[required, email]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="password"
component={renderField}
type="password"
placeholder="Password"
label="Password"
validate={[required, minValue7]}
/>
</Form.Field>
<Button type="submit">Save</Button>
</Form>
</Grid.Column>
</Grid>
)
}
}
SignupForm = reduxForm({
form: 'form1'
})(SignupForm)
export default SignupForm