redux-form에서 어떻게 값을 업데이트하는지 망설였다.

개요

이 기사에서 다루는 내용

주목하고 있는 폼(FirstName or LastName or Email)이 변경되면, 주목하고 있지 않는 폼(check box)의 값을 갱신하는 방법. (아래 참조)

구현

Redux-form의 최소 구성 만들기

기본 React 앱을 만듭니다.

먼저 create-react-app your-app-name 명령을 실행하여 기본 react 앱을 만듭니다.
또한 yarn add redux react-redux redux-form 명령을 실행하여 필요한 것을 설치합니다.
　
2. 여기에서 Redux-form 공식에 설명된 절차에 따라 네 단계를 수행합니다.

(공식대로이므로 생략. 베이스가 되는 React 앱 소스 코드 Github )
　

주목 받는 양식(FirstName or LastName or Email)이 변경되면 주목 받지 않은 양식(check box)의 값을 갱신

실패

고민한 점

어떻게 form의 입력 이외에 Redux-form에서 관리하고 있는 값을 변경하는 것일까

주목하고 있는 폼의 값이 변경되었는지 어떤지를 검지하는 방법은 어떻게 합니까?

touched? active? visited?라든지 사용?

내용이 다시 작성되었는지 비교?

생각한 안

Redux-form이 좋은 느낌으로 랩 해 주는 Action Creator등을 써, 그것을 무리하게 적용한다?

해결책

내가 안고있는 문제에 대해 검색을 해도 히트하지 않습니다.
따라서 처음에는 위의 방안으로 골고루 실장했습니다. 일단 움직이는 상태는 만들 수 있었지만, 더러운, Redux-form 사용하는 의미 있는 것인가,,, 등등 여러가지 생각했습니다.
공식을 재검토하면, redux-form의 props로서, 왠지 change function이라고 쓰여진 좋은 느낌의 것이 있었습니다. ( 공식 )



이것을 사용하면 Redux-form 등이 좋은 느낌으로 랩 해준 채 Action Creator 등을 사용하지 않고 갈 수있는 것은? 라고 생각해, 사용해 보면, 이하와 같이, onChange・・・라고, 3행 추가하는 것만으로, 실현하고 싶었던 것을 실현할 수 있었습니다. (소스 코드 Github))

        <Field
          name="firstName"
          component="input"
          type="text"
          onChange={(event, field) => {
            props.change('check', false);
          }}
        />

결론

Redux-form은 지금도 유지보수되고 있으므로, 하고 싶은 것은 공식을 읽어 진행하면 대다수 실현할 수 있다.
Redux-form을 사용하면 그렇게 노력하지 않아도 좋아진다.