Delaying React Redux Action Dispatching From Input

javascript reactjs redux

136 观看

1回复

508 作者的声誉

As shown in the below code, I'm calling dispatch action function in onChange event. So everyTime when I press any key, It will dispatch the redux action. I think it is not a good approach. because If I write 'aaaa', Then action would be dispatch 4 times & update the state through reducer.

I don't want to use onBlur event because sometime it doesn't work. What would be best approach to optimizing the code ?

component

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);

Action

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

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

Reducer

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;
}
作者: Shubham 的来源 发布者: 2017 年 9 月 15 日

回应 1


1

119499 作者的声誉

决定

Make use of debounce and call the action dispatch after a certain debounce interval, so if the user is continuously tying you don't dispatch the action, but do it when there is a slight pause.

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

  onFieldChange = (fieldName, e) => {
    e.persist();
    this.props.updateFields(`fields.${fieldName}`, e.target.value);
  }
作者: Shubham Khatri 发布者: 2017 年 9 月 15 日
32x32