Configure Recompose to Build React Components from RxJS Streams

Pass a React Prop to a Stream in RxJS

Stream a React Component from an Ajax Request with RxJS

Handle React Events as Streams with RxJS and Recompose

Merge RxJS Button Event Streams to Build a React Counter Component

Stream Props to React Children with RxJS

Stream Props to Multiple Children with React's Children.map  and RxJS

Create Stream Behaviors to Push Props in React Components with mapPropsStream

Compose Streams of React Props with Recompose’s compose and RxJS

Make Reusable React Props Streams with Lenses

Refactor React Render Props to Streaming Props with RxJS and Recompose

Build React Components from Streams with RxJS and Recompose

Loading data using RxJS is simple using `Observable.ajax`. This lesson shows you how to take the ajax response and pass it along the stream to use as props in a React Component.

https://app.egghead.io/api/v1/lessons/react-stream-a-react-component-from-an-ajax-request-with-rxjs/subtitles

Instructor: [00:00] Use this URL to load a person. I'll do this by creating a card stream, which will have an ID of one, which we can pass to that URL. I'll set up my card stream with component from stream. We'll have our props, and then these props will switch map over to an observable.ajax call.

[00:22] We'll use our personById function, and pass in the props.id. Quick format here, and we want the response off of our response. There's an object called response on there, which is the response body. Then I'll map this over to our card.

[00:41] You can see that hitting this URL gave us back an object that had a response. On that response, it had a name of Luke Skywalker and a homeworld of this URL. Let's go ahead and handle that as well. I'm going to extract this and call it loadById.

[01:01] Props.id there, and we'll define loadById, that takes an ID and returns that stream that I cut from below. Once we get this response back, I'm going to switch map over to another AJAX call. I'll take this response, say observable.ajax again, and I'm going to say response.homeworld, because we're given the actual URL, as you can see over here on the right.

[01:24] Then I want to pluck off the response off this one as well. Switch map has a second argument, which is  a result selector. I'll have the out observable and the inner observable, meaning that this will be the person, and this will be the homeworld response.

[01:42] This guy gets passed here, and this guy gets passed here, which will let us merge together a props object. We want everything off the person, and then the homeworld, we want to be the homeworld.name.

[01:55] We're passing in ID, not props.id, so delete that there. Hit save, and you can see we get John, Earth, Luke Skywalker, Tatooine. Now, one trick we can do here is on the second request, I can say start with an object with a name of an empty string, which when I save will allow Luke Skywalker to load, and then Tatooine to load.

[02:20] It'll give us the data as available. You'll see this again, Luke and then Tatooine. The data can stream in as it's received.

Stream a React Component from an Ajax Request with RxJS

Share this video with your friends

Course

Build React Components from Streams with RxJS and Recompose