[RxJS] Sharing Streams with Share
A stream will run with each new subscription added to it. This lesson shows the benefits of using share
so that the same stream can be shared across multiple subscriptions.
const timer$ = starters$ .switchMap(intervalActions) .startWith(data) .scan((acc, curr)=> curr(acc)) timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ) .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat() .subscribe( (x)=> document.querySelector('#score').innerHTML = ` ${x} `, err=> console.log(err), ()=> console.log('complete') );
Current code has a problem every time we type in the input, we need to click delete keyborad to delete the input. This is not conveninet.
So what we want is every time when the code check whether the value match, then we clean the input:
const runningGame$ = timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ); runningGame$ .subscribe( (x) => input.value = ""); runningGame$ .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat() .subscribe( (x)=> document.querySelector('#score').innerHTML = ` ${x} `, err=> console.log(err), ()=> console.log('complete') );
So we split the code and add another subscribe to clean the input, but now the problem is everytime it console log twice. This is because we have two subscribe on the runningGame$.
TO solve this problem, we need to share() the stream:
const runnintGame$ = timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ) .share();
Now it only log out once, but it doesn't clean the input when we click start again. THis is because we only repeat() this part of code:
runningGame$ .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat()
What we need to do is also make runningGame$ (clean the input) stream repeat itself:
// To clean the input runningGame$ .repeat() .subscribe( (x) => input.value = "");
----------------------------
Code:
const timer$ = starters$ .switchMap(intervalActions) .startWith(data) .scan((acc, curr)=> curr(acc)) const runningGame$ = timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ) .share(); // To clean the input runningGame$ .repeat() .subscribe( (x) => input.value = ""); runningGame$ .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat() .subscribe( (x)=> document.querySelector('#score').innerHTML = ` ${x} `, err=> console.log(err), ()=> console.log('complete') );
相关文章
- ORA-26021: index string.string partition string loaded successfully with string keys ORACLE 报错 故障修复 远程处理
- ORA-30734: cannot specify scope constraint on ref column with rowid ORACLE 报错 故障修复 远程处理
- ORA-39251: Importing a SecureFile LOB with metadata into a scalar, column string, is not allowed. ORACLE 报错 故障修复 远程处理
- ORA-53216: cannot export the ORDDataSource object with an external source ORACLE 报错 故障修复 远程处理
- ORA-55712: XA transactions on RAC are not supported with GLOBAL_TXN_PROCESSES set to 0 ORACLE 报错 故障修复 远程处理
- ORA-00397: instance recovery process terminated with error ORACLE 报错 故障修复 远程处理
- ORA-13377: invalid combination of elements with orientation ORACLE 报错 故障修复 远程处理
- ORA-13549: invalid input for create baseline with time range (string) ORACLE 报错 故障修复 远程处理
- ORA-14114: partitioned table cannot have column with object, REF, nested table, array datatype ORACLE 报错 故障修复 远程处理
- ORA-15469: VBG process terminated with error ORACLE 报错 故障修复 远程处理
- ORA-15477: cannot communicate with the volume driver ORACLE 报错 故障修复 远程处理
- Maximizing Oracle Performance with Proper Run Commands(oraclerun)
- Boost Your Database Skills with These MustRead MySQL EBooks(mysql电子书)
- Redis: Explore and Manage All Databases with Ease(redis查看所有库)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)