zoukankan      html  css  js  c++  java
  • [Cycle.js] Generalizing run() function for more types of sources

    Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

    Code to be chagned:

    function run(mainFn, drivers) {
      const proxyDOMSource = new Rx.Subject();
      const sinks = mainFn(proxyDOMSource);
      const DOMSource = drivers.DOM(sinks.DOM);
      DOMSource.subscribe(click => proxyDOMSource.onNext(click));
    //   Object.keys(drivers).forEach(key => {
    //     drivers[key](sinks[key]);
    //   });
    }

    This is hard code now, make it more fixable:

    function run(mainFn, drivers) {
    
      const proxySource = {};
    
      //For each driver, we need to proxySource
      Object.keys(drivers).forEach( (key)=>{
        proxySource[key] =  new Rx.Subject();
      } );
    
      //Get sinks (output effect)
      const sinks = mainFn(proxySource);
    
      Object.keys(drivers).forEach( (key)=>{
        //for each drive, create a source for that
        const Source = drivers[key](sinks[key]);
        
        Source.subscribe( x => proxySource[key].onNext(x) );
      } );
    }

    ---------------------

    Code:

    // Logic (functional)
    function main(Sources) {
      const click$ = Sources.DOM;
      return {
        DOM: click$
          .startWith(null)
          .flatMapLatest(() => 
            Rx.Observable.timer(0, 1000)
             .map(i => `Seconds elapsed ${i}`)           
          ),
        Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
      };
    }
    
    const drivers = {
      DOM: DOMDriver,
      Log: consoleLogDriver,
    }
    
    // bProxy = ...
    // a = f(bProxy)
    // b = g(a)
    // bProxy.imitate(b)
    
    function run(mainFn, drivers) {
    
      const proxySource = {};
      Object.keys(drivers).forEach( (key)=>{
        proxySource[key] =  new Rx.Subject();
      } );
      const sinks = mainFn(proxySource);
      Object.keys(drivers).forEach( (key)=>{
        const Source = drivers[key](sinks[key]);
        Source.subscribe( x => proxySource[key].onNext(x) );
      } );
    }
    
    run(main, drivers);
    
    // source: input (read) effects
    // sink: output (write) effects
    
    
    
    // Effects (imperative)
    function DOMDriver(text$) {
      text$.subscribe(text => {
        const container = document.querySelector('#app');
        container.textContent = text;
      });
      const DOMSource = Rx.Observable.fromEvent(document, 'click');
      return DOMSource;
    }
    
    function consoleLogDriver(msg$) {
      msg$.subscribe(msg => console.log(msg));
    }
  • 相关阅读:
    第二高的薪水
    leecode 删除排序数组中的重复项
    leecode 17. 电话号码的字母组合
    dubbo 限流之TpsLimitFilter
    G1总结
    leecode 3. 无重复字符的最长子串
    mysql是如何解决脏读、不可重复读、幻读?
    归并排序
    PostgreSQL管理数据库安全
    Oracle Database 19c 技术架构(三)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5182094.html
Copyright © 2011-2022 走看看