React Reduxアクションディスパッチ

Question

以下のコードに示すように、私はonChangeイベントでディスパッチアクション関数を呼び出しています。だから私はいつでもキーを押すと、それはreduxアクションをディスパッチします。私はそれが良いアプローチではないと思う。なぜなら私は 'aaaa'と書くと、アクションが4回&が減速機で状態を更新することになるからです。

いつか動作しないため、onBlurイベントを使用したくありません。コードを最適化するための最良の方法は何でしょうか？

成分

class abc extends Component { 
    constructor(props) { 
    super(props); 
    } 

    onFieldChange(fieldName, e) { 
    e.persist(); 
    this.props.updateFields(`fields.${fieldName}`, e.target.value); 
    } 

    render() { 
    const {fields} = this.props.facilityFormStates; 

    return (
     <div>   
     <div className='col-md-12'>   
      <TextField 
      defaultValue={fields && fields.fullLegalName} 
      onChange={(e) => this.onFieldChange('fullLegalName', e)} 
      floatingLabelText="Full Legal Name *" 
      floatingLabelFixed={true} 
      fullWidth={true} 
      /> 

      <TextField 
      hintText="" 
      defaultValue={fields && fields.businessName} 
      onChange={(e) => this.onFieldChange('businessName', e)} 
      floatingLabelText="Business or Assumed Name, if any" 
      floatingLabelFixed={true} 
      fullWidth={true} 
      /> 

      <TextField 
      hintText="" 
      defaultValue={fields && fields.employerNumber} 
      onChange={(e) => this.onFieldChange('employerNumber', e)} 
      floatingLabelText="Federal Employer Identification Number" 
      floatingLabelFixed={true} 
      fullWidth={true} 
      /> 

      <TextField 
      hintText="" 
      defaultValue={fields && fields.address} 
      onChange={(e) => this.onFieldChange('address', e)} 
      floatingLabelText="Street Address" 
      floatingLabelFixed={true} 
      fullWidth={true} 
      /> 
     </div> 
     <br /> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    facilityFormStates: state.facilityFormStates, 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    updateFields: (path, data) => dispatch(updateFieldsFormField(path, data)) 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(abc); 

処置

import {UPDATE_FORM_ACTION} from './action-types.js' 

export const updateFormField = (ObjKeyPath, value) => { 
    return { 
    type: UPDATE__FORM_ACTION, 
    ObjKeyPath, 
    value, 
    } 
} 

減速

import {UPDATE_FORM_ACTION} from '../../actions/action-types.js'; 

import _ from 'lodash'; 

export default function (state = {}, action) { 
    switch (action.type) { 
    case UPDATE_FORM_ACTION: 
     return _.set(state, action.ObjKeyPath, action.value) 
    } 
    return state; 
} 

Answer 1

debounceを利用し、特定のデバウンス間隔後にアクションディスパッチを呼び出します。したがって、ユーザーが引き続き結びついている場合は、アクションをディスパッチせず、少し休止したときに実行します。

constructor(props) { 
    super(props); 
    this.onFieldChange = _.debounce(
     this.onFieldChange, 
      150 
    ); 
    } 

    onFieldChange = (fieldName, e) => { 
    e.persist(); 
    this.props.updateFields(`fields.${fieldName}`, e.target.value); 
    }