[RxJS] Changing Behavior with MapTo
with Rxjs Behavior Changing
2023-09-14 09:00:54 时间
You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo
to pass functions into the scan
operator and have completed control over you data.
Current Code:
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const stopButton = document.querySelector('#stop'); const start$ = Observable.fromEvent(startButton, 'click'); const interval$ = Observable.interval(1000); const stop$ = Observable.fromEvent(stopButton, 'click'); const intervalThatStops$ = interval$ .takeUntil(stop$); const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need () const data = {count: 0}; start$ .switchMapTo(intervalThatStops$) .startWith(data) .scan( inc ) .subscribe((x)=> console.log(x));
Everytime the number 1,2,3... will be passed to the scan function.
If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.
start$ .switchMapTo(intervalThatStops$) .mapTo( inc ) .startWith(data) .scan( (acc, curr) => { console.log(curr); //(acc) => ({count: acc.count + 1})return curr(acc) } ) .subscribe((x)=> console.log(x));
Now we get full control over the scan() method, we can let it reset after 10:
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const stopButton = document.querySelector('#stop'); const start$ = Observable.fromEvent(startButton, 'click'); const interval$ = Observable.interval(200); const stop$ = Observable.fromEvent(stopButton, 'click'); const intervalThatStops$ = interval$ .takeUntil(stop$); const data = {count: 0}; const inc = (acc) => { return Object.assign({}, data, {count: count + 1})}; // avoid modifying data object const resetAfterTen = (acc) => { if(acc.count == 10){ return data; }else{ return Object.assign({}, acc, {count: acc.count + 1}) } } start$ .switchMapTo(intervalThatStops$) .mapTo( resetAfterTen ) .startWith(data) .scan( (acc, curr) => { return curr(acc) } ) .subscribe((x)=> console.log(x));
相关文章
- 【Kotlin】标准库函数 ③ ( with 标准库函数 | also 标准库函数 )
- ORA-19603: cannot backup or copy active file with KEEP .. UNRECOVERABLE option ORACLE 报错 故障修复 远程处理
- ORA-23290: This operation may not be combined with any other operation ORACLE 报错 故障修复 远程处理
- MySQL Error number: 4071; Symbol: ER_CANT_USE_GTID_ONLY_WITH_GTID_MODE_NOT_ON; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-01093: ALTER DATABASE CLOSE only permitted with no sessions connected ORACLE 报错 故障修复 远程处理
- ORA-01463: cannot modify column datatype with current constraint(s) ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-011042; Symbol: ER_INNODB_FAILED_TO_FIND_IDX_WITH_KEY_NO; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-14143: CREATE INDEX INVISIBLE may not be used with this type of index ORACLE 报错 故障修复 远程处理
- Demystifying Linux Error Codes with errno: A Comprehensive Guide(linuxerrno)
- Efficient Cryptocurrency Mining Made Easy with Minerd Linux(minerdlinux)
- Boost Your File Transfer Efficiency with Linux Wput The Ultimate Tool for Uploading Large Files!(linuxwput)
- 语句Oracle中简洁的With语句(oracle 中with)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)