mapStreamToProps state update

[maitriyogin]

Hi,
I've just been going through John Lindqvists tutorials on egghead and was wondering how one integrates mapStreamToProps and createComponentFromStream with other side effects like withStateHandlers, withReducer etc ...
I tried putting a do(tap) on the end the count scan https://codesandbox.io/s/148zqw49m4 but quickly got into a race condition...

So, I have two question :

1. how does one interact with state when using streams?
2. how does one take back control of a streamed input element? Like I've attached a stream to a text box, but want to reset/clear it? Normally I'd just hook up some text state to the value and be able to control it via a handler or reducer ..

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
    })
  );
});
const load = mapPropsStream(props$ =>
  props$.switchMap(
    props =>
      Observable.ajax(`https://swapi.co/api/people/${props.count}`)
        .pluck("response")
        .startWith({ name: "loading..." })
        .catch(err => Observable.of({ name: "Not found" })),
    (props, person) => ({ ...props, person })
  )
);

const typewriter = mapPropsStream(props$ =>
  props$.switchMap(
    props =>
      Observable.zip(
        Observable.from(props.person.name),
        Observable.interval(100),
        letter => letter
      ).scan((acc, curr) => acc + curr),
    (props, name) => ({
      ...props,
      person: { ...props.person, name }
    })
  )
);

const Counter = props => (
  <div>
    <button onClick={props.onInc}>+</button>
    <button onClick={props.onDec}>-</button>
    <h3>{props.count}</h3>
    <h1>{props.person.name}</h1>
    <h1>{props.countX}</h1>
  </div>
);

const CounterWithPersonLoader = compose(
  withCountState,
  count,
  load,
  typewriter
)(Counter);