How can validate form duplicate name in the Name Field using Redux form?

Question

 import React from 'react'
 import { Field, reduxForm } from 'redux-form'

 const required = value => value ? undefined : 'Required'

 const renderField = ({ input, label, type, meta: { touched, error, warning } })=> (
                 <div>
                    <label>{label}</label>
                 <div>
                     <input {...input} placeholder={label} type={type}/>

                     {touched && ((error && <span>{error}</span>) ||  
                     (warning && <span>{warning}</span>))}
                      </div>
                     </div>
                 )

             const FieldLevelValidationForm = (props) => {
             const { handleSubmit, pristine, reset, submitting } = props
           return (
                <form onSubmit={handleSubmit}>
                  <Field name="username" type="text"
                   component={renderField} label="Username"
                   validate={[ required, maxLength15 ]}
                   />
                  <div>
                 <button type="submit" disabled={submitting}>Submit</button>
                 <button type="button" disabled={pristine || submitting}    
                    onClick={reset}>Clear Values</button>
                 </div>
                 </form>
                  )
               }

         export default reduxForm({form: 'fieldLevelValidation'})                   
           (FieldLevelValidationForm)

The current implementation is missing the duplicate username entry input validation. I would like to know how can I define the logic to validate the duplicate username field input in the form?

Answer 1

You could use the asyncValidate in reduxForm here. In addition you should use dispatch in your validation. You should do it same as bellow:

const asyncValidate = (values, dispatch) => {
  //using dispatch here
}