2017-03-02 41 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

相关问题