Redux Form

• 리듀서 : formReducer _ 리덕스 액션으로 인해 어플리케이션에서 일어나는 변화를 리덕스 스토어에 업데이트하라고 지시하는 함수

• HOC : reduxForm _ config 객체를 받아서 새로운 함수를 반환. form 컴포넌트를 감싸고, 액션의 디스패치에 유저 인터랙션을 바인딩

• 컴포넌트 : <Field /> _ 위에서 HOC로 감싸진 form 컴포넌트 내부의 컴포넌트. redux-form 로직에 input 컴포넌트를 연결하는 데 쓰임

 

---

 

• Form 리듀서 _ 우선, 스토어에 formReducer를 연결한다. 내 모든 폼 컴포넌트와 연결된다.

• Form 컴포넌트 _ 폼 컴포넌트를 스토어와 연결하려면 해당 컴포넌트를 reduxForm( )으로 감싸면 된다. submit 프로세스를 핸들링하는 함수와 form state에 관한 props를 제공할 것이다.

• Form <Field /> 컴포넌트 _ 각각의 input을 스토어에 연결한다.

//...
ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

export default ContactForm

 

submit에 대한 리액션

import React from 'react'
import ContactForm from './ContactForm'

class ContactPage extends React.Component {
  submit = values => {
    // print the form values to the console
    console.log(values)
  }
  render() {
    return <ContactForm onSubmit={this.submit} />
  }
}

 

submit으로 들어오는 values는 JSON 객체