Map Vue.js Components to Remote Data Streams with RxJS

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
~ 6 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!