I am using react-router-dom for routing and redux-form for validation . I did validation for if form is pristine or is not matching the validation rules. the submit button is disabled . I need to make it so if the request is sent successfully. I redirect it to the '/' page.
Main component Page
import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {Link, Redirect} from 'react-router-dom';
import {createPost} from '../actions/index';
//Validation rules here
const renderField = ({input,label,type,className,meta: {touched,error,}}) => (<div className="form-group">
<label>{label}</label>
<input {...input} placeholder={label} type={type} className={className}/> {touched && ((error && <span>{error}</span>))}
</div>);
class PostsNew extends Component {
render() {
const {handleSubmit, pristine, submitting} = this.props;
return (<form onSubmit={handleSubmit}>
<h3>Create a New Post</h3>
<Field component={renderField} label="Title" type="text" name="title" validate={[required, title]} className="form-control"/>
<Field component={renderField} label="Category" type="text" name="categories" validate={[required, nan, category]} className="form-control"/>
<Field component={renderField} label="Content" name="content" validate={[required, textarea]} className="form-control"/>
<button type="submit" disabled={pristine | submitting} className="btn btn-primary">
Submit</button>
<Link to="/" className="btn btn-danger">Cancel</Link>
</form>);
}
}
export default reduxForm({
form: 'PostsNewForm',
onSubmit: createPost
}, null)(PostsNew);
Redux action page
export function createPost(props) {
const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);
return {type: CREATE_POST, payload: request};
}