Rxjsでトグルする方法

Question

私はrxjsを学んでいます。ドロップダウンコンポーネントのデコレータ "トグル可能"を作成します。すべて正常に動作しますが、私はそれが気に入らないのです。どうすれば "トグル/非表示"状態を削除できますか？

rxjs、react.js、recomposeを使用します。 Dropdownコンポーネントのためのtoogleableデコレータです。

const show$ = Observable.merge(
    toggle$.mapTo(prev => !prev), 
    hide$.mapTo(prev => false)) 
     .startWith(false) 
     .scan((state, changeState) => changeState(state)); 

別：あなたは以前の状態の関数に$を非表示/トグル$をマッピングすることにより、条件のないショーの$を実装することができますドロップダウンボタンのそれのデコレータ

// hideHandler caller 
     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

export const toggleable = Wrapped => componentFromStream((props$) => { 
// toogleHandler called with onClick 
    const { handler: toogleHandler, stream: toogle$ } = createEventHandler(); 
// hideHandler called with code below 
    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} 
     /> 
    )); 
}); 

トグル可能な実装で改善できます。 recompose componentFromStreamを使用する代わりに、再構成mapPropsStreamを使用できます。

export const toggleable = mapPropsStream(props$ => { 
    const { handler: toogleHandler, stream: toogle$ } = createEventHandler(); 
    const { handler: hideHandler, stream: hide$ } = createEventHandler(); 
    const show$ = Observable.merge(
     toggle$.map(() => prev => !prev), 
     hide$.map(() => prev => false)) 
      .startWith(false) 
      .scan((state, changeState) => changeState(state)); 

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