如何在 React 组件内部防抖 Redux 动作

Question

我正在尝试在 React 组件中消抖一些操作。

import React, {Component} from "react";
import debounce from "lodash/debounce";
...

@connect(
  mapStateToProps,
  {someAction}
)
class SomeClass extends Component {
  constructor(props) {
    ...
    this.debouncedAction = debounce(props.someAction, 300);// someAction works ok
  }

  onSomeEvent = (...args) => {
   this.debouncedAction(args); // this does not work
  }
}

所以修改后的debouncedAction没有被调用。有没有一种方法可以在不在mapStateToProps中创建额外的action的情况下实现呢？

我需要保留两者，因为一个用于过滤，第二个（debounced）用于搜索。

- Talgat Saribayev

Answer 1

肯定可以对事件处理程序进行防抖操作，然后再使用该操作。

class SomeClass extends Component {

  // Debounce the event handler here instead
  onSomeEvent = debounce((...args) => {
    const { someAction } = this.props;
    someAction(...args);
  }, 300)

  // ...
}

它还确保每次执行事件回调时，都使用当前属性值，因此始终是最新的。

- Emile Bergeron