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));
    }
  • 相关阅读:
    HDU5730 Shell Necklace
    BZOJ4883 [Lydsy2017年5月月赛]棋盘上的守卫
    Spring boot 配置文件
    org.joda.time.DateTime 日期操作
    Elasticsearch + Springboot 启动报错 java.net.ConnectException: Connection refused
    centos7 在docker下安装es Elasticsearch
    centos 7 。 docker 安装rabbitmq 以及集权搭建
    linux 安装mysql5.7.25
    安装rabbtimq CentOS 7
    docker + spring boot 打包 部署。
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5182094.html
Copyright © 2011-2022 走看看