RxJS 5 Thinking Reactively | Ben Lesh
Why Stack Overflow recommends it
Stack Overflow users link it when answering RxJS questions where the asker misunderstands how observables, subscribe, multicasting or operators like switchMap and share behave.
Recommended by 6 people across 6 different months, 2016 to 2022.
What it is
A conference talk from AngularConnect 2016 by Ben Lesh, project lead of RxJS, on how to approach problems with observables and RxJS 5. It explains how observables, subscriptions, and operators like switchMap and share work, and how to design code as streams of values over time.
What people said
Strong rec Romario Putra · 2022-07 · Stack Overflow · on “How to refresh an observable from another observable?”
This is one problem that can be solved with "Thinking Reactively". First of all I want to share 2 amazing talks on youtube, by Deborah Kurata and Ben Lesh (project lead of RxJS). [this video] [LINK] Now, let's get back into the solution. The main topic of the solution is subject ( [LINK] ) (other choice is behaviour subject, you can look it for yourself). The main point is, subject is observable-like object that can SUBSCRIBED TO and NEXT/ERROR/COMPLETE itself. Here is the simplified solution in stackblitz. [LINK]
Recommends Eric B. · 2017-07 · Stack Overflow · on “RxJS: Chained Observables Not Using the Same Root Observable Values”
[this video] This video actually clarified a lot of things for me. Specifically at the 32:00 mark he mentions .share which makes an observable multicast. By default every subscriber does get its own copy. So the fix looks like this: let rngStream = Rx.Observable .interval(1000) .map(() => Math.ceil(Math.random()*100)) .take(5) .share(); // Track the lowest number we've seen. let minStream = rngStream .startWith(100) .scan((x, y) => Math.min(x, y)) // Track the highest number we've seen. let maxStream = rngStream .startWith(0) .scan((x, y) => Math.max(x, y)) Rx.Observable.zip(rngStream, minStream, maxStream) .subscribe(console.log); <script src=" [LINK] "></script>
Recommends jayphelps · 2017-09 · Stack Overflow · on “Converting redux-saga to redux-observable”
Your translation is accurate, assuming you omitted the yield takeEvery('SOME_ACTION', mySaga) stuff in your original example. I would however recommend isolating your Observable chain; put all the stuff to apply after someApiCall() , inside the mergeMap : action$ .ofType('SOME_ACTION') .mergeMap(action => someApiCall() .delay(5000) .map(() => ({ type: 'ACTION' })) ) Even though it makes no functional difference in your example, if you or a team member later comes in and tries to add error handling it critical you don't let the error bubble outside the mergeMap : action$ .ofType('SOME_ACTION') .mergeMap(action => someApiCall() .delay(5000) .map(() => ({ type: 'ACTION' })) .catch(error => Obse
Recommends Boris Lobanov · 2018-02 · Stack Overflow · on “Reactive forms: valueChanges on input field raises error”
Observables work in a way that the stream stops emitting values, once it completes or an error happens. this.searchForm.controls.SearchValue.valueChanges .debounceTime(1000) .filter(val => val) .switchMap(term => { return this._http.get(CONFIG.API_ENDPOINT + `/folders/search/` + term) .catch(err => { console.log(err); return Observable.empty() }) }) .subscribe(result => { this.searchResult = result; }) You can play with the code here: [LINK] (enter numbers). This video was very helpful: [this video] 26:20 is where it's explained.
Recommends sneas · 2019-09 · Stack Overflow · on “Change data inside map operator for other observable”
Looking at the code examples and questions it seems like you misunderstand how the `subscribe` method works and what it does. Here is the video which helped me and a few other people [this video] . It's t's related to RxJS 5 (there was no `pipe` back then), but the core concept hasn't changed.
Recommends user2216584 · 2020-06 · Stack Overflow · on “How exactly works this method used to query Firebase from an Angular application?”
`pipe` is a method on the observable which allows the chaining of various rxjs operators. `pipe` denotes that you can chain various operators like (`map` [it is not same as array.map of JS], `mergeMap` or many others) to process the data as per the application need. This is the fundamentals oof rxjs. `subscribe` method on the other hand, it invokes the function responsible for the observable. I will highly recommend to watch [LINK] and [this video]
Cites jayphelps · 2016-11 · Stack Overflow · on “How to reinit actions in redux-observable?”
The problem is a subtle but critical misunderstanding of how RxJS works--but fear not, this is very common. So given your example: const pingEpic = action$ => action$.ofType(PING) .delay(1000) .mapTo({ type: PONG }) .takeUntil(action$.ofType(CANCEL)); This epic's behavior can be described as filtering out all actions that don't match type PING . When an action matches, wait 1000ms and then map that action to a different action { type: PONG } , which will be emitted and then dispatched by redux-observable. If at any time while the app is running someone dispatches an action of type CANCEL , then unsubscribe from the source, which means this entire chain will unsubscribe, terminating the epic.
Cites jayphelps · 2016-11 · Stack Overflow · on “Why complete is not invoked after performing a concatenation?”
There are a couple things I see: Your final .map() is missing parenthesis, which in its current form is a syntax error but a subtle change could make it accidentally a labeled statement [LINK] instead of returning an object. Because in its current form it's a syntax error, I imagine this is just a bug in this post, not in your code (which wouldn't even run), but double check! // before .map(x => { type: COMPLETED, id: x[3] }); // after .map(x => ({ type: COMPLETED, id: x[3] })); With that fixed, the example does run with a simple redux-observable test case: [LINK] So if there's nothing notable I did differently than you, problem appears to be in code not provided. Feel free to add additional
Cites arcseldon · 2017-01 · Stack Overflow · on “What is the difference between flatmap and switchmap in RxJava?”
For an example using SwitchMap from Ben Lesh using RxJs5 - see minutes 25-26 here - [this video] for me, flatmap was already understood...
Cites BeetleJuice · 2017-08 · Stack Overflow · on “what is the difference between Observable and a function”
As per my understanding both Observable.create and a normal javascript function are look similar to me . So what is the actual difference between both? They are both just functions. Observables can seem like dark magic but it comes down to Javascript objects and functions. Basically, first we need an observer . This is just an object with three properties: { //a function to be executed when we want the Observable to emit. Takes 1 arg next: (val) : void //a func to be executed when an uncaught exception occurs. Takes 1 arg error: (err) : void //a func to be executed when we want the Observable to stop. Takes no arg complete: () : void } Now consider the signature of Observable.create Observab