javascript - 如何在 React 组件内部去抖动 redux Action

Question

所以我正在尝试对 React 组件中的一些 Action 进行去抖。

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 中创建额外操作的情况下做到这一点？ 我需要保留两者，因为一个用于过滤第二个(去抖动)以进行搜索。

Answer 1

绝对有可能去抖事件处理程序，然后使用该操作。

class SomeClass extends Component {

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

  // ...
}

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