Below is my RequestAnInvite
redux-form. The problem is when I submit the form, submitting
is never changed to true
. You can see I have a log below, which is always outputting false
.
What am I doing wrong with redux-form to cause submitting to never set to true when I submit the form?
class RequestAnInvite extends React.Component {
componentDidMount() {
this.props.dispatch(loadTitles());
}
handleSubmit(data) {
console.log(data);this.props.dispatch(requestInvitationsActions.createInvitationRequest(data));
}
render() {
const { handleSubmit, submitting } = this.props;
console.log('submitting: ' + submitting);
return (
<div className="container-fluid h-100">
<form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
<Field
name="email"
type="text"
component={renderField}
label="Email"
placeholder="xxx@acme.com"
/>
<p>submitting: {submitting}</p>
<div className="form-group form-group-actions">
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? 'Requesting...' : 'Request an Invite'}
</button>
</div>
</form>
</div>
);
}
}
RequestAnInvite = reduxForm({
form: 'RequestAnInvite',
validate,
})(RequestAnInvite);
const mapStateToProps = state => {
return {
titles: state.titles
};
};
const mapDispatchToProps = (dispatch) => bindActionCreators({
...requestInvitationsActions,
}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(RequestAnInvite);
handleSubmit(data) {
this.props.createInvitationRequest(data)
.then((response) => {
console.log(response)
}, (error) => {
});
}
From redux-form docs:
Whether or not your form is currently submitting. This prop will only work if you have passed an onSubmit function that returns a promise. It will be true until the promise is resolved or rejected.
Your handleSubmit
is just dispatching an action so it has no way of knowing when it is submitting