[Cycle.js] Generalizing run() function for more types of sources
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));
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.