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

Share this video with your friends

Send Tweet

Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through.

Platon
Platon
~ 7 years ago

I like how this lesson uses the material of previous ones to show some cool stuff. Will need to re-watch this again a few times, though - the magic of compose is still far from clear to me.

I'm still not sure how to incorporate these tricks into a test-driven flow. The console error messages are too vague to be helpful so these things take a long time to debug when things do go wrong...

stephen white
stephen white
~ 6 years ago

Hi John, just want to thank you for this course, which has more than introduced me to the basics. One thing that I'd like to do, is to set state by tap(ing) or do(ing) after count is accumulated in scan. I'm sure this is probably a bad idea as when I tried implementing it https://codesandbox.io/s/148zqw49m4 by using withStateHandlers I got into a race condition. I basically modified your code and added a do which calls the state handler updateCount:

const count = mapPropsStream(props$ => {
  const { stream: onInc$, handler: onInc } = createEventHandler();
  const { stream: onDec$, handler: onDec } = createEventHandler();

  return props$.switchMap(
    props =>
      Observable.merge(onInc$.mapTo(1), onDec$.mapTo(-1))
        .startWith(0)
        .scan((acc, curr) => acc + curr)
        .do(count => props.updateCount(count)),
    (props, count) => ({
      ...props,
      count,
      onInc,
      onDec
    })
  );
});

I guess my question is, how do we integrate the props from the streams into things like component state, redux or for controlled components? In the case of controlled components is it that as soon as we attach a stream handler the input field is then controlled by the stream or we could we still set the value as in a controlled component? I was thinking in the context of an input text field for a typeahead where you want the ability to clear the text with a little reset icon or something... how do you do that with the stream? Probably the wrong forum for this question but many thanks in any case, Stephen.