如何在反应组件内消除redux动作答案

【问题标题】：How to debounce redux action inside of react component如何在反应组件内消除redux动作
【发布时间】：2019-10-16 08:37:36
【问题描述】：

所以我试图在 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 中创建额外的操作？我需要保留两者，因为一个用于过滤第二个（去抖动）以进行搜索。

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

绝对可以对事件处理程序进行去抖动，然后使用该操作。

class SomeClass extends Component {

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

  // ...
}

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

【讨论】：