Map Vue.js Components to Remote Data Streams with RxJS

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet

This lesson shows how to map the current tab to a remote stream leveraging the combineLatest operator to grab the latest tab value and the values from loading in a remote data set of people.

Paul Perry
Paul Perry
~ 7 years ago

Hi again everyone! I've got some rxjs 6 updates/fixes for you here:

imports:

import { from, merge, of, combineLatest } from 'rxjs'
import { pluck, map, mapTo, catchError, share, startWith, exhaustMap } from 'rxjs/operators';

and the "luke" function, which I named "getName" below:

const getName$ = combineLatest(
  activeTab$, 
  people$, 
  (tabId, people) => people[tabId].id
)
.pipe( 
  map( id => `https://starwars.egghead.training/people/${id}`),
  exhaustMap( createLoader ),
  catchError(() => of({ name: "Failed :(" }))
).pipe(
  share()
);

As always, if my code doesn't look great, and you know of a better/tidier way to write it, please chip in!