Redux form "submiting" value not goes true on form submit - reactjs

Question

When I am submiting the form submitSucceeded props goes true, pristine is also working fine but submitting props not change on submit form. I have attached related code. Please suggest me how I can fix this issue.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import FileInput from '../FileInput'
import 'react-widgets/dist/css/react-widgets.css';
import './reactForm.css';
const EditForm = (props) => {
const { handleSubmit, submitSucceeded, pristine, submitting, owners, cities, compound, avatarUrl, changeAvatar } = props;
return (
<form onSubmit={handleSubmit}>
<div className="row padding-20-0">
<div className="col-md-4">
<div className="box-upfile cursor" style={{backgroundImage: `url(${avatarUrl})`}} >
<div className="editImgComp" >
<i className="sprite-icon icon-030" onClick={()=>{changeAvatar(null); props.change('avatar', null)}}/>
<label html="imageBrowse">
<FileInput
onDone={(file)=> {changeAvatar(file.file); props.change("avatar", file.file)}}
type="file" className="hidden" id="imageBrowse"/>
<i className="sprite-icon icon-031"/>
</label>
</div>
</div>
</div>
</div>
<div className="row">
<div className="text-right col-xs-6">
{
submitSucceeded ?
<button type="button" className="btn ls-btn-red cursor" disabled={pristine || submitting || submitSucceeded}>
<i className='fa fa-circle-o-notch fa-spin'></i> Saving
</button>
:
<button type="submit" className="btn ls-btn-red cursor" disabled={pristine || submitting} onClick={handleSubmit} >Save</button>
}
</div>
</div>
</form>
)
}
export default reduxForm({
form: 'compoundForm' // a unique identifier for this form
})(EditForm)
Container:-
handleSubmit(data) {
this.props.dispatch(compoundSave(data));
}
Action:-
export function compoundSave(data) {
const id = data.id;
const config = {
method: 'put',
body: JSON.stringify({compound: data}),
};
return callApi('/v1/compounds/'+id, {}, config, compoundSaveRequest, compoundSaveSuccess, compoundSaveFailure);
}
Call Api method:-
`export function callApi(path, params, config, request, onRequestSuccess, onRequestFailure) {
const API_ROOT = 'http://api.dev.leasing.clicksandbox.com:8080';
const idToken = localStorage.getItem('id_token');
let url = API_ROOT+path;
url = buildUrlWithQueryString(url, params);
return dispatch => {
dispatch(request);
return fetch(url, config)
.then(checkStatus)
.then(parseJSON)
.then((json) => {
if (!json.success) { // (response.status < 200 || response.status > 300)
json.error &&
Toastr.error(json.error);
dispatch(onRequestFailure(json));
} else {
json.message &&
Toastr.success(json.message);
dispatch(onRequestSuccess(json));
}
}).catch((error) => {
const exceptionMessage = {
success: false,
error: "Something went wrong!"
}
dispatch(onRequestFailure(exceptionMessage));
});
};
}`
Please let me know if I need to explain more.

Answer 1

For any one else arriving here a year later like me looking for answers, and without seeing the Container code... i can infer that the problem is that you defined the method handleSubmit in the Container and send it as a prop to EditForm. The problem with that is that a Component that has the reduxForm() HOC applied, in this case EditForm, will generate its own handleSubmit prop, and therefore a conflict arises, leading to wrong behaviour of the form when submitting.
In order to fix the issue, you should have send the prop to EditForm with a different name say
<EditForm onSubmit={this.onSubmit} />
And then inside the EditForm component use it like:
...
<form onSubmit={handleSubmit(onSubmit)}>
That way the prop submitting of the reduxForm component will work if the submit handler returns a promise.

Answer 2

you should call handleSubmit() method with handler passed to component :
<form onSubmit={handleSubmit(this.props.onSubmit)}>