Как реализовать Rxjs toggle?

Question

[nonlux]

Вникаю в rxjs. Cделал toggle декоратор для Dropdown компонента. Все работает, но решение не нравится мне. Как-нибудь можно избежать условия "toggle/hide"

Используются Rxjs, React.js, Recompose

//file toogleable.js
export const toggleable = Wrapped => componentFromStream((props$) => {
// toogleHandler  привязывается на onClick
  const { handler: toogleHandler, stream: toogle$ } = createEventHandler();
// вызов hideHandler  нижек
  const { handler: hideHandler, stream: hide$ } = createEventHandler();

  const show$ = Observable.merge(
    toogle$.mapTo('toogle'),
    hide$.mapTo('hide'))
          .startWith(false)
          .scan((state, type) => {
            if (type === 'toogle') {
              return !state;
            }
            if (type === 'hide') {
              return false;
            }

            return state;
          });


  return props$
    .combineLatest(
      show$,
      (props, show) => (
        <Wrapped
          {...props}
          show={show}
          onToggle={toogleHandler}
          onHide={hideHandler}
        />
      ));
});

class Foo extends Component {
    constructor(props) {
      super(props);
      this.refButton.bind(this);
      this.documentClick$ = Observable.fromEvent(global.document, 'click')
        .filter(event => this.button !== event.target)
        .do((event) => { this.props.onHide(event); });
    }

    componentDidMount() {
      this.documentClick$.subscribe();
    }
    componentWillUnmount() {
      this.documentClick$.unsubscribe();
    }
    refButton = (ref) => {
      this.button = ref;
    }
}

Answer 1

[Александр Манаков]

Чтот типа:

const show$ = Observable.merge(
    toogle$.map(() => state => !state),
    hide$.startWith({}).map(() => () => false)
)
          .scan((state, action) => action(state), false);