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中不做任何额外的动作？我需要保留两者，因为一个用于过滤第二个（去抖动的）搜索。

Answer 1

绝对有可能对事件处理程序进行反跳，然后使用该操作。

class SomeClass extends Component {

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

  // ...
}

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

如何在React组件内部消除Redux动作

1 个答案: