reduxForm의 하위 구성 요소를 redux 상태에 어떻게 연결해야합니까?

Question

reduxForm()을 사용하여 React/Redux에 연결된 꽤 복잡한 다중 레벨/중첩 된 양식이 있습니다. 양식이 매우 크기 때문에이 부분을 하위 구성 요소로 분해했습니다. 이러한 구성 요소 중 일부는 Redux 상태에 대한 액세스가 필요하므로 연결을 소품을 통해 전달하거나 connect()ed이어야합니다. 그러나 정상적인 Redux connect() 함수를 사용하여 자식 구성 요소를 연결하면 그 안에있는 redux-form 필드를 편집 할 수 없게됩니다. 그래서 reduxForm()을 사용하여 부모 구성 요소와 하위 구성 요소를 연결하려고 시도했지만, 부모는 잘못 생각했지만 작동하는 것처럼 보였습니다.

그러나 지금은 removeField()과 같은 일부 기능이 연결된 하위 구성 요소에서 작동하지 않는 것을 발견했습니다. child_form.removeField(index)은 색인과 일치하는 항목이 아닌 모든 child_form을 제거합니다.

reduxForm() 구성 요소의 하위 구성 요소를 redux 상태로 연결하는 올바른/최선의 방법은 무엇입니까? 예를 들어, - 소품을 사용하여 계층 구조를 통해 모든 것을 전달하면

Answer 1

것은 내가 지금 removeField() 같은 일부 기능은 연결된 하위 구성 요소에서 작동하지 않는 것을 발견하고 있습니다 그러나 ... 매우 신속하게 다루기가 될 것입니다 child_form.removeField(index)은 색인과 일치하는 것만이 아니라 모든 child_forms을 제거합니다.

1. 사용 액션 제작자

   removeField 방법은 removeArrayValue 행동 작성자을 래핑 :

이 문제를 해결하는 두 가지 방법이있다. 이 작업을 보내면 양식 항목을 제거 할 수 있습니다.

// Removes the 4th row 
dispatch(removeArrayValue("myform", "myarrayfield", 3)) 

는 감속기 플러그인 내 플러그인

를 사용하여, 당신은 행동을 차단하고 양식 상태의 변경을 트리거 할 수 있습니다. 액션을 보내면 액션을 가로 채서 필드 배열을 업데이트 할 수 있습니다. 소품을 사용하여 계층 구조를 통해

전달 모든 나는이에 대한 몇 가지 해결 방법을 본 적이

... 매우 신속하게 다루기가 될 것입니다.

1. 동일한 양식 이름을 사용하여 여러 양식을 작성하십시오. 내부 Redux 양식은이를 병합하여 상점에 동일한 오브젝트 내의 모든 서브 양식 데이터를 포함시킵니다.

2. connect을 사용하여 하위 양식을 연결하고 작업 작성자를 사용하여 상태를 조작하십시오.

3. 양식을 더 작은 부분으로 나누고 fields을 전달하십시오. 이것은 내가 좋아하는 해결책입니다. 우리는 우리의 응용 프로그램에서 백 가지 형태로 성공적으로이 작업을 수행합니다.

   const MainForm = reduxForm({ 
       form: "main", 
       fields: [ 
       SubForm1.fields, 
       SubForm2.fields, 
       SubForm3.fields, 
       ] 
   })(
       props => (
       <form onSubmit={props.handleSubmit}> 
        <SubForm1 fields={props.fields} /> 
        <SubForm2 fields={props.fields} /> 
        <SubForm3 fields={props.fields} /> 
        <button type="submit">Send</button> 
       </form> 
   ) 
   ) 
   
   const SubForm1 = ({fields}) => (
       <div> 
       <TextField {...fields.foo} /> 
       <TextField {...fields.bar} /> 
       </div> 
   ) 
   
   SubForm1.fields = ["foo", "bar"]