Redux-form: [6.0.0-rc.3] How to display error messages from Redux

Created on 22 Jul 2016  路  2Comments  路  Source: redux-form/redux-form

code:

const submit = (values,dispatch)=>{
  dispatch(sendSMS(values.phone,values.ccap))
}
const renderField = field => (
  <div>
    <label>{field.input.placeholder}</label>
    <div className={field.asyncValidating ? 'async-validating' : ''}>
      <input {...field.input}/>
      {field.touched && field.error && <span>{field.error}</span>}
    </div>
  </div>
)
let form = (props) => {
  const { handleSubmit,phone, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit(submit)}>
      <Field name="phone" type="text" component={renderField} placeholder="phone"/>
      <Field name="ccap" type="text" component={renderField} placeholder="ccap"/>
      <div>
        <button type="submit" disabled={pristine || submitting}>Get SMS Code</button>
      </div>
    </form>
  )
}
function mapStateToProps(state) {
  const {smsServer} = state
  if(smsServer.error){
    console.log(smsServer.error)
  }
  .....
}
export default connect(mapStateToProps)(form)

Redux smsServer reduce has already obtain server side error message.

i want to show error messages at phone field.

 console.log(smsServer.error) 

I've searched the redux-form's examples, not a description of that. Ask for help, thank you.

All 2 comments

I gave up the way to use Redux to check the server side through dispatch.Submit data directly through submit.I think this is more clear than Redux.

const submit = (values,dispatch)=>{
  dispatch(sendSMS(values.phone,values.ccap))
}

---->

const submit = (values)=>{
  return  request('sms',{num:values.phone,ccap:values.ccap}).then((data)=>{
    if(data.code==409){
      //throw server error
      let error = errorTip(data.error)
      error['_error']='failed'      
      throw new SubmissionError(error)
    }
  })
}

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings