从输入延迟 React Redux 动作调度答案

【问题标题】：Delaying React Redux Action Dispatching From Input从输入延迟 React Redux 动作调度
【发布时间】：2017-09-15 05:16:32
【问题描述】：

如下代码所示，我在 onChange 事件中调用调度动作函数。所以每次当我按下任何键时，它都会调度 redux 动作。我认为这不是一个好方法。因为如果我写 'aaaa'，那么动作将被调度 4 次并通过 reducer 更新状态。

我不想使用 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;
}

【问题讨论】：

@ShubhamKhatri 你能在这里写下去抖动语法吗？我正在使用 lodash 库。

标签： javascript reactjs redux

【解决方案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);
  }

【讨论】：