[英]How to debounce redux action inside of react component
So I am trying to debounce some actions inside react component. 所以我试图在反应组件内部去除一些动作。
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
}
}
So the modified debouncedAction
is not called. 因此不会调用修改后的debouncedAction
。 Is there a way to do that without creating extra action in mapStateToProps
? 有没有办法在mapStateToProps
创建额外的操作而不做? I need to keep both because one for filtering second(debounced) for search. 我需要保留两者,因为一个用于过滤第二次(去抖动)用于搜索。
It's definitely possible to debounce the event handler, which then uses the action. 绝对有可能去除事件处理程序,然后使用该操作。
class SomeClass extends Component {
// Debounce the event handler here instead
onSomeEvent = debounce((...args) => {
const { someAction } = this.props;
someAction(...args);
}, 300)
// ...
}
It also ensures that each time the event callback is executed, it uses the current prop value, so it's always up to date. 它还确保每次执行事件回调时,它都使用当前的prop值,因此它始终是最新的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.