[RxJS] Scan - manage the state

export class PageClickCounterComponent {
  reset$ = new Subject<void>();
  clicks$ = merge(
    fromEvent<PointerEvent>(document, 'click').pipe(
      map(accumulationHandler)
    ),
    this.reset$.pipe(
      map(resetHandler)
    )
  ).pipe(
    scan(state: PointerEvent[], stateHandlerFn) => stateHandlerFn(state), []
  )
}

const accumlationHanlder = (event: PointerEvent) => (state: PointerEvent[]) => [...state, event];
const resetHandler = (event: void) => (state: PointerEvent[]) => []

The idea is attach hanlder function to each event then we just need to pass the hanlder function down to the stream instead of pass the state itself down to the steam.

posted @   Zhentiw  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2022-06-24 [HTML 5] Page Visibility API
2019-06-24 [Spring] Spring Data JPA
2019-06-24 [Cypress] Assert on XHR Requests in Cypress
2019-06-24 [Cypress] Assert on Database Snapshots in Cypress
2018-06-24 [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
2016-06-24 [Angular 2] Handle Reactive Async opreations in Service
2015-06-24 [Javascript + rxjs] Introducing the Observable
点击右上角即可分享
微信分享提示