는 어떻게 REDUX 형식 V6.5.0을 사용하고 부모

Question

에서 상태 확인을 트리거에서 REDUX 형태의 필드 이벤트를 방지합니다. RecordForm 구성 요소가있는 RecordFormPage 구성 요소가 있습니다. RecordForm 그것은 내가 처음 initialValues={ this.props.record }했다이

<RecordForm onSubmit={ this.saveRecord } /> 

같은 RecordForm 구성 요소를 렌더링하지만, 디버깅 perposes에 대한 REDUX-형성 RecordFormPage 구성 요소가 REDUX 저장

function mapStateToProps(state){ 
    console.log('state check on FormPage'); //every event in RecordForm checks state. 
    return { 
     record: state.records.record 
    }; 
} 

에 연결

RecordForm = reduxForm({ 
    form: 'recordform' 
})(RecordForm); 

에 결합 그것을 제거했다.

이제 제 질문은;

그것은 RecordForm (초점, 키 누름 등) RecordFormPage mapStateToProps의 모든 필드 이벤트에서 호출되어 원하는 동작/예상된다? 예방할 수 있습니까? 양식이 상점에서 분리되어 있으므로 불필요하다고 생각합니다. 한마디로

Answer 1

:이 react-redux 작품, 즉 당신의 connect 소품 기능 mapStateToProps, mapDispatchToProps 및 mergeProps 본질적으로 REDUX 저장소의 상태가 변경 매번라고하는 방법입니다.

connect에 몇 가지 기본 최적화가 구워졌지만 더 이상 최적화하려면 the options argument of connect을 사용해야합니다. 네 가지 동등 검사 기능을 제공합니다. 당신이 connect 소품 기능에 따라서 render 불필요한 호출을 방지하기 위해 사용할 수있는 areStatesEqual, areOwnPropsEqual, areStatePropsEqual 및 areMergedPropsEqual. 귀하의 경우에는

당신이 뭔가를 할 수 있습니다 :

const isRecordUnchanged = (prev, next) => { 
    return prev.records.record === next.records.record 
} 

const connectOptions = { areStatesEqual: isRecordUnchanged } 

@connect(mapStateToProps, null, null, connectOptions) 

예를 들어 당신이 상점 상태의 작은 조각을 확인 areStatesEqual를 사용하는 경우 이러한 평등 검사기를 변경하면 일부 펑키 행동으로 이어질 수 있음을 기억하라 동등하지만, mapStateToProps은 평등을 검사하는 데 사용하는 해당 조각의 범위를 벗어난 상태를 처리합니다.

희망이 도움이됩니다. 당신의 설명은