Using rxjs 5, I want to subscribe to an observable and begin the stream with the last emitted value. The operator '.cache' is supposed to be built for this (I think) but I can't get it to work. I did a small test where fire an observable (by clicking a button) then subscribe to it 3 seconds later. In theory, I should get that click emission upon subscription, but I don't.
https://github.com/ReactiveX/RxJS/commit/4308a04
http://codepen.io/BradLee/pen/VaqreL
let btn = document.querySelector(`btn`),
btn$ = Rx.Observable.fromEvent(btn, `click`)
.cache(1);
setTimeout(() => {
btn$.subscribe(evt => console.log('fired') );
}, 3000);
The problem is not related to RxJS. Your query selector is incorrect, if you change:
let btn = document.querySelector(`btn`),
to
let btn = document.querySelector('button')
It works.
edit
Until there is at least one subscription with cache it won't emit any events.
If you need to receive events from before the subscribe occurs you either need to create an immediate subscription so that you can start receiving events.
let btn = document.querySelector(`btn`),
btn$ = Rx.Observable.fromEvent(btn, `click`)
.cache(1);
btn$.subscribe();
Or you need to use the publishReplay operator and connect with it instead:
let btn = document.querySelector(`btn`),
btn$ = Rx.Observable.fromEvent(btn, `click`)
.publishReplay(1);
btn$.connect();
Related
Let's say I have an observable source that has the following properties:
It makes a network request the first time it's subscribed to
It's idempotent, so it will always emit the same value after it's first subscribed to
It's low priority, so we don6t6 want to be too eager in subscribing to it
What would be ideal is if there were some sort of operator delaySubscriptionUntil that would delay subscription until some other observable s emits a value.
So for example:
const s = new Subject<void>();
const l = source
.pipe(
delaySubscriptionUntil(s));
l.subscribe(console.log);
// The above won't print anything until this line executes
s.next();
I looked through the documentation to see if there's an existing operator like this, but haven't found one.
You just put the subject first and switchMap
const l = s.pipe(
switchMap(() => source)
);
Once the subject emits then the source will be subscribed to.
Any thing that is after wont work as it relies on the previous observable emitting a value. You can have a filter in the chain that stops the previous observable's emission being emitted but there is nothing you can pass back up the chain to control outer subscriptions.
You could use a takeWhile
let allow = false;
const l = source.pipe(
takeWhile(allow)
);
but here the subscription to source is active, it is emitting values, they are just stopped from being passed through.
So you could make a similar operator that keeps an internal flag and is flipped by a subject but source is still going to be emitting, you are just filtering values. You could buffer up the values if you don't want to lose them.
You could use share() which will share the result of anything that happened before it until you call sub.next() with a new url then the request will happen again.
const sub = new BehaviorSubject<string>('http://example.com/api');
const result$ = sub.pipe(
exhaustMap(url => this.http.get(url)),
share()
)
// Each one of these subscriptions will share the result.
// The http request will be called only once
// until you send a new url to the BehaviorSubject.
result$.subscribe(val => console.log(val));
result$.subscribe(val => console.log(val));
result$.subscribe(val => console.log(val));
result$.subscribe(val => console.log(val));
Link to code in stackblitz
Is there a way to repeat a completed observable multiple times?
Say I have a button that on click creates an interval observable that emits 10 values, then completes:
fromEvent(button, 'click').pipe(
switchMapTo(interval(500)),
takeWhile(i => i < 10)
)
In the subscription I want to handle both the next and the complete methods:
.subscribe(
i => console.log(i),
() => {},
() => console.log('completed')
);
In this way - the first click will emit one sequence and once it completes, subsequent clicks will not emit again. Is there any way to write this so that all clicks emit the sequence?
I think you should complete the inner observable and not the whole sequence.
(takeWhile should be piped to interval);
You should use switchMap only if you are happy to dismiss the old sequence once a new click event comes in. mergeMap or concatMap otherwise.
const sequence = () => interval(500).pipe(take(10));
fromEvent(button, 'click').pipe(
switchMap(sequence),
)
I was wondering if anyone could help me theorize a solution. I create an Observable from a wheel event, prevent the default action, throttle it by 200ms, map deltaY (which I can use to determine direction), and then I share it.
My problem is that it emits more values than I need creating a situation where my subscribers continue to fire even after the desired action has occurred. I'm new to RxJS so bear with me but... Is there a way for me to take the "first" value emitted in a series of values within say X amount of time passed and not have the observable complete?
Below is the code.
import { fromEvent } from 'rxjs';
const wheel$ = fromEvent(document, 'wheel')
.pipe(
tap((event) => event.preventDefault()),
// throttleTime(200), /* I have tried throttling and debouncing but that doesn't work - values will continue to be emitted */
map((event) => event.deltaY),
share()
)
// handles scrolling down //
wheel$.pipe(filter((val) => val > 0))
.subscribe((event) => {
if (this.props.isScrolling) return
this.scrollDown();
})
One solution would be "bufferCount()"
of(1,2,3,4,5,6,7,8,9).pipe(
bufferCount(3)
).subscribe(data => console.log(data) )
would create packages of 3 signals. So the Events would be
[1,2,3]
[4,5,6]
[7,8,9]
Or "throttleTime(xy)", than it will put the first signal through, will ignore for "xy" milliseconds every other signal, and then give the next signal a chance.
interval(500).pipe(
throttleTime(2000)
).subscribe(data => console.log(data) )
will result in something like
1 // ignore everything the next 2 seconds
5 // ignore everything the next 2 seconds
9 // ignore everything the next 2 seconds
...
warm regards
Found this question while looking for a solution.
I went with a switchMap
fromEvent(el, 'wheel').pipe(
switchMap(e =>
concat(
//wrap the original event, which fires immediately
of({kind: 'ON_WHEEL', e}),
// fire a onWheelEnd after a 200ms delay
// this event is unsubscribed by the switchMap if a new event comes in
// before the delay
of({kind: 'ON_WHEEL_END}).pipe(delay(200))
)
)
)
I created a stream from button click events. The button corresponds to a create action on the database. Obviously, I want the database action to fire only once (at least until it completes). Is there a way to ignore events on createButtonStream until Api.create returns? i.e., the first event should call #Api.create, subsequent events should be ignored until #Api.create returns.
createButtonStream
.flatMap(() => Api.create()) //Needs to fire once until doSomething() is called
.onValue(result => doSomething(result))
The only way that comes to mind is to use global state...and I'd rather not do that.
//i don't wanna do this
let condition = true
createButtonStream
.filter(() => condition)
.map(() => condition = false)
.flatMap(() => Api.create())
.onValue(result => {condition = true; doSomething(result)})
In RxJS you use the flatMapFirst or exhaustMap operator (if using RxJS 5)
createButtonStream
.flatMapFirst(() => Api.create())
.subscribe(result => doSomething(result));
flatMapFirst will silently drop events if they arrive before the first source completes, the method should not get invoked.
You can use awaiting. You need a Bus to work around the chicken and egg problem.
const filterBus = new Bacon.Bus()
const createDone = createButtonStream
.filter(filterBus.toProperty(true))
.flatMap(() => Api.create())
const inProgress = createButtonStream.awaiting(createDone)
filterBus.plug(inProgress.not())
createDone.onValue(doSomething)
Can 1 Subscriber with multiple select query?
eg:
var obj = item.tolist().subscribe(OnNext);
var obj2 = item.where(i=>i.type=="box").subscribe(OnNext);
Not sure the code correct or not. but mostly will be like this.
This using 2 subscribe. Can it be only using 1 subscribe?
You can definitely subscribe the same method to different observables. However, if the subscriber has some state then you need to be aware of concurrency issues because the subscriber may be executing one different threads at the same time. However, this is not a problem unique to Rx and using Rx will help you avoid shared state anyway.
Here is a working example:
var observable = Observable.Interval(TimeSpan.FromSeconds(0.2)).Take(10);
var projectionA = observable
.Where(i => i % 2 == 0)
.Select(i => Tuple.Create("A", i));
var projectionB = observable
.Select(i => Tuple.Create("B", i));
projectionA.Subscribe(Console.WriteLine);
projectionB.Subscribe(Console.WriteLine);
I subscribe Console.WriteLine to both projections and if you try to execute the code you will see that events from both streams are written to the console.