redux-form (1) - Simple Form Example
redux-form (2) - Synchronous Validation Example
redux-form (3) - Field-Level Validation Example
redux-form (4) - Submit Validation Example
redux-form (5) - Initialize From State
redux-form (6) - 사용자 등록

React로 Form component를 만들 때 매우 편리한 redux-form 설명입니다.

redux-form의 개요는 먼저 다음 기사를 참고하십시오.

redux-form (1) - Simple Form Example

Submit Validation Example

Submit Validation Example - Getting Started With redux-form

이번은 Submit시의 에러 처리에 대해입니다.

이번에는 onSubmit이 prop로 지정되어 있지 않으므로 다음 onSubmit 함수(submit)를 handleSubmit()의 인수로 제공합니다.

src/submit.js

import { SubmissionError } from 'redux-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

function submit(values) {
  return sleep(1000).then(() => {
    // simulate server latency
    if (!['john', 'paul', 'george', 'ringo'].includes(values.username)) {
      throw new SubmissionError({
        username: 'User does not exist', // 個別のfieldエラー
        _error: 'Login failed!'          // form全体のエラー
      })
    } else if (values.password !== 'redux-form') {
      throw new SubmissionError({
        password: 'Wrong password', // 個別のfieldエラー
        _error: 'Login failed!'     // form全体のエラー
      })
    } else {
      window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
    }
  })
}

export default submit

여기서 주목해야 할 것은 다음 코드입니다. submit 함수가 promise이고 reject에서 new SubmissionError({ field1: 'error', field2: 'error' }) 라는 에러를 던지면, 각각의 field (field1, field2)에 에러가 추가됩니다. 아래 코드는 사용자 이름 필드에 오류를 추가합니다. _error는 개별 필드가 아니며 전체 양식 오류를 표시하려는 경우 추가합니다.

      throw new SubmissionError({
        username: 'User does not exist', // 個別のfieldエラー
        _error: 'Login failed!'          // form全体のエラー
      })

wrapped component는 다음과 같이 되어 있습니다. this.props.onSubmit은 전달되지 않았으므로 직접 submit 함수를 import하고 handleSubmit의 인수로 만듭니다.

src/SubmitValidationForm.js

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

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

const SubmitValidationForm = props => {
  const { error, handleSubmit, pristine, reset, submitting } = props
  return (
    // onSubmitがpropとして渡ってきていないので引数として与える
    <form onSubmit={handleSubmit(submit)}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      {error && <strong>{error}</strong>}
      <div>
        <button type="submit" disabled={submitting}>
          Log In
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'submitValidation' // a unique identifier for this form
})(SubmitValidationForm)

index.js는 원본을 변경하여 최소한으로 수정했습니다.

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'

const dest = document.getElementById('content')
const reducer = combineReducers({
  form: reduxFormReducer // mounted under "form"
})
const store = createStore(reducer)

let render = () => {
  const SubmitValidationForm = require('./SubmitValidationForm').default
  ReactDOM.hydrate(
    <Provider store={store}>
        <h2>Form</h2>
        <SubmitValidationForm />
    </Provider>,
    dest
  )
}

render()

실행 결과

submit 버튼을 클릭했을 때의 화면입니다.

password 에러시의 화면입니다. password field 개별 오류 'Wrong password'가 표시됩니다. 또한 양식 전체 오류 'Login failed!'가 표시됩니다.


오류없이 성공시 화면입니다.


이번은 이상입니다.