Configure Recompose to Build React Components from RxJS Streams
Recompose provides helper functions to stream props using an Observable library of your choice into React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper function.
Instructor: [00:00] Configure E composed by importing from recompose. We need set observable config. We set the observable config with RXJS config from recompose/ RXJS observable config. Simply invoke that function with that config. Now the other functions we bring in like component from stream will be configured for RXJS.
[00:30] Now with component from stream I'll go ahead and delete the function that's currently assigned to app. I'll say component from stream, which takes a function where the argument is a stream of props and returns a stream that outputs JSX.
[00:43] Just start with props map. We'll reformat this for some space. Props map. These props are props coming in from the stream now. We'll map that to just some JSX. I'll just say streaming. Hit save there and you can see we get streaming.
[01:00] The simplest example that can prove this is working is using observable, which is found in RXJS. Import observable. Observable.interval, so every one second we'll map and then this takes in a count. Then instead of streaming we'll output the count.
[01:20] Now you can see we have zero, one, two because this observable is counting every one second and increment and outputting this JSX with that new value.
Hey ! It would be very nice to update this course with modern react, and hooks maybe ? I can see that the Recompose library is discontinued because of the hooks
Thanks !
That's an interesting idea, I wonder how relevant RxJS is going to be as hooks becomes widely adopted? I recently came back to react dev after a year and a half of Angular. I really enjoyed RxJS once I became more familiar. Hoping to utilize those skill in react!
Hi John, thank you for this interesting course, but everytime I try to replicate your examples, I get always this error: TypeError: _rxjs2.default is undefined. I' m using create-react-app.
Thank you, Gabriele