2017-03-02 53 views
0

我正在使用redux-form v6.5.0。我有一個RecordFormPage組件與RecordForm組件。該RecordForm結合Redux的形式如何防止在父級中觸發狀態檢查的Reduce表單事件

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

的RecordFormPage組件連接到終極版店內

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

它呈現這樣

<RecordForm onSubmit={ this.saveRecord } /> 

我最初有initialValues={ this.props.record }的RecordForm組件,但用於調試perposes刪除它。

現在,我的問題是;

它是預期的/期望的行爲,在RecordForm(focus,keypress等)的每個Field事件中調用RecordFormPage mapStateToProps?可以預防嗎?我認爲這是沒有必要的,因爲表格與商店分離。

回答

2

簡而言之:這是怎麼react-redux的作品,也就是你的connect道具功能mapStateToPropsmapDispatchToPropsmergeProps基本上是所謂的每一次的終極版店內的狀態發生變化。

connect有一些基本的優化,但是如果你想進一步優化它,你需要利用the options argument of connect。它爲您提供四種平等檢查功能; areStatesEqual,areOwnPropsEqual,areStatePropsEqualareMergedPropsEqual,您可以使用它來避免對支持函數connect的不必要調用,從而避免對render的不必要調用。

在你的情況,你可以做這樣的事情:

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

const connectOptions = { areStatesEqual: isRecordUnchanged } 

@connect(mapStateToProps, null, null, connectOptions) 

記住,改變這些平等跳棋可能會導致一些時髦的行爲,例如,如果你使用areStatesEqual只檢查商店狀態的一個小切片平等,但是您的mapStateToProps處理您用於檢查相等性的片段範圍之外的狀態。

希望這會有所幫助!

+0

感謝您的解釋,它確實讓我清楚,我不知道。我仍然認爲,當一個領域獲得焦點並且改變一個redux形式的特定屬性(.touched)時,不應該觸及該州/商店。它與商店或(記錄)狀態無關。 – jar0m1r

+1

庫的名稱爲'redux-form',在redux存儲中存儲表單狀態的便利性與表單中的每個小動作都觸發與存儲相關的函數調用級聯的不便之處有關。軟件工程面臨的挑戰是選擇正確的技術與正確的優點和缺點,以適應您的使用情況。 – jakee

+0

謝謝。我將保留這種權益(基本上就是redux形式的驗證的簡易性)。 – jar0m1r

相關問題