The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use cached network data with RxJS

Use cached network data with RxJS

7:44
In this lesson, we learn how to build the final feature of our user interface: how to use the cached network response to replace a suggested user when the user clicks on the 'x' close button for that user.
Watch this lesson now
Avatar
egghead.io

In this lesson, we learn how to build the final feature of our user interface: how to use the cached network response to replace a suggested user when the user clicks on the 'x' close button for that user.

Avatar
Noah

I noticed that when you testdrove the end result at the end of the video, you got a repeated user (andreymaxim, I think...). I guess it would be nicer to avoid that, and I guess also to avoid that 'x' gives a user that is already there.

In reply to egghead.io
Avatar
Andre

Noah, good remark! Our logic is simple here because we replace random with random, and there is possibility of collision with the past user. It would be nicer to avoid, and it is possible with RxJS, just a bit out of scope for this series.

In reply to Noah
Avatar
Przemysław

Is it possible to siplyfy the example by

var requestOnRefreshStream = refreshClickStream
.map(ev => {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
});

var requestStream = requestOnRefreshStream.startWith('https://api.github.com/users');

Or
var requestStream = refreshClickStream.startWith('click')
.map(ev => {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
});

Is this correct ?

Avatar
Andre

Correct, there are multiple ways of achieving the same behavior. The code presented in the video is the easiest for beginners to follow what is happening.

In reply to Przemysław
Avatar
Przemysław

Why you didn't model stream to :
responseStream.flatMap(function(listUsers) {
return Rx.Observable.from(listUsers);
}).subscribe(function(user) {
console.log("user ->"+user.login);});

  • We get a stream of users entities which can be consumed by subscribers.
Avatar
Oren

Hi Andre,
Can I merge more than 2 Observables?
Thanks

Avatar
Andre

Hi Oren, yes you can: Rx.Observable.merge(a, b, c)

In reply to Oren
Avatar
Sequoia McDowell

I like the series but it raises a ton of unanswered questions. For me, primarily,

  1. What's up with all the repetition/copypasta & is there a RX idiomatic way to remove that repetition?
  2. Each stream doesn't know about the others' state (yay!) so they can each load the same user (boo!). Glossing over this (how do I handle streams that need to be aware of the state of other streams or what they did?) seems like skipping a crucial question-- personally I need to understand this before I could consider using RX.
  3. Is it considered no big deal that some streams reach way back & access their upstream-streams in different ways? I.e. the "update suggested user" stream that is a grand-child (if you'll allow the expression) of the refresh click stream, but also directly consumes that stream to emit nulls. Marble diagram now needs to be 3D: needs arrows that go OVER other streams & skip 2 or 3 streams down. Is this kosher in the RX world?

Thanks!

Avatar
Rafael

Got this working on v5 using switchMapTo operator instead of the switchLatestFrom.

Avatar
Shailesh

@andrestaltz refreshclick.map(ev => null) executed in createSuggestionsStream and refreshClickStream.map(...//which returns URL to get the user) are passed the same event every time refresh is clicked correct? So they are two different streams consuming same "click"? what guarantees that null is always returned first before the actual result? the async nature of the fetching user? what if we are returning the user from cached array? Will still null be returned first?

Avatar
Andre

There are different ways of accomplishing this, and better ways where we wouldn't have race conditions. In this case, because it is an introduction only, I went for the simplest option where we rely on the fact that user fetching will be asynchronous and click reactions are synchronous.

In reply to Shailesh
Avatar
Shailesh

ok thanks Andre. can you please give me pointers for further reading regarding the race condition avoiding operators and ways. may be resources which explain such gotchas and possible ways. Ofcourse I will be continuously following all the courses here and elsewhere but getting this from "horse's mouth" will be best way to go about this.

In reply to Andre
Avatar
Andre

If you haven't yet, Watch the other courses on RxJS here in Egghead. I also plan to release the course about flatMap and similar operators, which are useful for many kinds of chaining and dependencies among observables. These are ways of handling race conditions as well.

In reply to Shailesh
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?