[RxJS] Share vs ShareReply

https://www.learnrxjs.io/learn-rxjs/operators/multicasting/sharereplay

https://www.learnrxjs.io/learn-rxjs/operators/multicasting/share

 

Share and ShareReplay, they are mainly the same. Just for ShareReplay, the subscriber subscribe after event emitted can also get value, similar to ReplaySubject.

 

复制代码
// simulate url change with subject
const routeEnd = new Subject();

// grab url and share with subscribers
const lastUrl = routeEnd.pipe(
  pluck('url'),
  share()
);

// initial subscriber required
const initialSubscriber = lastUrl.subscribe(console.log); // nothing

// simulate route change
routeEnd.next({data: {}, url: 'my-path'});

// nothing logged
const lateSubscriber = lastUrl.subscribe(console.log); // my-path
复制代码

In the code, only lateSubscribe got the value. initialSubscribe didn't get the value.

 

复制代码
import { Subject } from 'rxjs/Subject';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { pluck, share, shareReplay, tap } from 'rxjs/operators';

// simulate url change with subject
const routeEnd = new Subject<>();

// grab url and share with subscribers
const lastUrl = routeEnd.pipe(
  tap(_ => console.log('executed')),
  pluck('url'),
  // defaults to all values so we set it to just keep and replay last one
  shareReplay(1)
);

// requires initial subscription
const initialSubscriber = lastUrl.subscribe(console.log);

// simulate route change
// logged: 'executed', 'my-path'
routeEnd.next({data: {}, url: 'my-path'});

// logged: 'my-path'
const lateSubscriber = lastUrl.subscribe(console.log);
复制代码

Both got the value.

 

Side effect only execute once

复制代码
import { timer } from "rxjs";
import { tap, mapTo, shareReplay, share } from "rxjs/operators";

//emit value in 1s
const source = timer(1000);
//log side effect, emit result
const example = source.pipe(
  tap(() => console.log("***SIDE EFFECT***")),
  mapTo("***RESULT***"),
);

/*
  ***NOT SHARED, SIDE EFFECT WILL BE EXECUTED TWICE***
  output:
  "***SIDE EFFECT***"
  "***RESULT***"
  "***SIDE EFFECT***"
  "***RESULT***"
*/
const subscribe = example.subscribe((val) => console.log(val));
const subscribeTwo = example.subscribe((val) => console.log(val));
复制代码

 

If we use share or shareReplay(1)

复制代码
//share observable among subscribers
const sharedExample = example.pipe(share());
/*
  ***SHARED, SIDE EFFECT EXECUTED ONCE***
  output:
  "***SIDE EFFECT***"
  "***RESULT***"
  "***RESULT***"
*/

const subscribeThree = sharedExample.subscribe((val) => console.log(val));
const subscribeFour = sharedExample.subscribe((val) => console.log(val));
复制代码

Side effect only execute once

posted @   Zhentiw  阅读(112)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2020-09-16 [Machine Learning] Neural Networks Week 5 Ex
2020-09-16 [Machine Learning] Neural Networks - back propagation - Put it together
2019-09-16 [CSS] Change the Alignment of a Single Flexed Item with 'align-self'
2019-09-16 [CSS] Change the off-axis Alignment of a Flexed Container with `align-items`
2019-09-16 [CSS] The :empty Pseudo Selector Gotchas
2018-09-16 [Tools] Create a Chrome Extension
2016-09-16 [Angular 2] Factory Provider
点击右上角即可分享
微信分享提示