如何使用rxjs在reactjs中去除用户输入

Question

我的问题可能是微不足道的,但到目前为止我找不到答案.

如何在用户输入时推迟(去抖)更新React中的状态,以避免不必要的更新？

有<input onChange={this.onChange} .../>,我怎么能用rxjs绑定onChange事件？我应该尝试使此输入可观察,还是应该使用FromEventPattern？

在这两种情况下,我都不知道如何使用rxjs绑定React事件.第二个问题是用户是否会在去抖期间看到任何输入变化？

Answer 1

解决方案#1

使用科目:小提琴

const state = new Rx.Subject()
              .debounceTime(1000)
              .scan((acc) => {
                return ++acc
              }, 0).do(::console.log)


const handler = (e) => {        
  state.next(e)
}

state.startWith(0).subscribe((clicks) => {
  ReactDOM.render(<button onClick={handler}>Clicked {clicks}</button>, document.querySelector('#app')) 
})

解决方案#2

使用rxjs的fromEvent:Fiddle

// Intial render so element exists in dom (there is probably a better pattern)
ReactDOM.render( <button id='clickMe'>Click Me</button>, document.querySelector('#app')) 

const clicks = Rx.Observable
                .fromEvent(document.getElementById('clickMe'), 'click')
                .do(::console.log)
                .debounceTime(1000)
                .scan((acc) => {
                  return ++acc
                }, 0)

clicks.subscribe((clicks) => {
  ReactDOM.render( <button id='clickMe'>Click Me {clicks}</button>, document.querySelector('#app')) 
})

解决方案#3

注意:高度实验性,而且我试图为了好玩而做的事情.

这更适用于基于动作的体系结构,您可以在其中执行更改状态(通量)的操作.这是一个完全独立的处理程序.它与自定义运算符'fromEventArgs'一起使用:小提琴(查看控制台)

const handler = (e) => {        
  Rx.Observable
    .fromEventArgs(e, 'UniqueKey') 
    .debounceTime(1000)        
    .subscribe(x => console.log('Send an action', x))
}

Answer 2

基于omerts命题,(特别是解决方案#1)这是我的最终代码

input: Rx.Subject<any>;

constuctor(...){
   this.input = new Rx.Subject();
   this.input.debounce(1000).subscribe(this.processInput);
}

handleChange = event => {
   event.persist();
   this.input.onNext(event);

    };

processInput = x => {
   // invoke redux/flux action to update the state
}

render(){
   ...
   <input onChange={this.handleChange} ... />
   ...
}