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

Combining input streams then using `scan` to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.

https://app.egghead.io/api/v1/lessons/react-merge-rxjs-button-event-streams-to-build-a-react-counter-component/subtitles

Instructor: [00:00] We'll wire up this counter with an on increment and on decrement handler. We can do that in a counter stream. Use component from stream. Get out props. To start with we'll just return the props and map the props to counter. Swap out our counter with counter stream. Have the same thing over here with... Button is not working obviously.

[00:22] We'll create two handlers. Our first is our create event handler. We'll get a stream and handler. Just duplicate this line. We'll call this one our on increment stream. The handler can be on increment. Then on decrement stream with the handler of on decrement.

[00:40] To properly wire this together, let's switch map our props over to an observable.merge. This observable merge is going to take our on increment observable mapped to one and our on decrement observable mapped to negative one. Then we can start with props.value and then we'll have to map the value to our new props, which can take in the value.

[01:10] From here we have the value showing up through the stream. Then we want to pass through the on increment and the on decrement as props. Hit save here. Right now, that will just change this to one. That will change this to negative one.

[01:24] We can go ahead and scan over these so that the accumulator and the current is simply the accumulator plus the current. It'll take the value and either add one or negative one.

[01:36] You can go from there. Click and go up. Click and go down.

Merge RxJS Button Event Streams to Build a React Counter Component

Share this video with your friends

Course

Build React Components from Streams with RxJS and Recompose