Last active
May 27, 2016 04:36
-
-
Save iamssen/37674f65f0821c019da016d2ebe58585 to your computer and use it in GitHub Desktop.
Rx를 사용한 입력 / 서비스 호출 / 출력 모델링
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!!!! do params { date: '2015-05-24', first: 'Youngjoo', last: 'Lee' } | |
@user name Youngjoo Lee | |
@current date 2015-05-24 | |
@hello message Hello Youngjoo Lee! Date is 2015-05-24 | |
!!!! do params { date: '2016-04-19', first: 'Kiwhan', last: 'Ryu' } | |
@user name Kiwhan Ryu | |
@current date 2016-04-19 | |
@hello message Hello Kiwhan Ryu! Date is 2016-04-19 | |
!!!! do params { date: '2016-05-23', first: 'Kwangjin', last: 'Yoon' } | |
@user name Kwangjin Yoon | |
@current date 2016-05-23 | |
@lazy Hello Kwangjin Yoon! Date is 2016-05-23 | |
@hello message Hello Kwangjin Yoon! Date is 2016-05-23 | |
true true true | |
true true |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
실험 목적 | |
============================= | |
Observable Chain을 통해서 전체적인 모델링을 구현해본다 | |
확인 | |
============================= | |
어떻게 될 것도 같은데... 꽤 효율적일 수 있을지도... | |
*/ | |
const Rx = require('rxjs/Rx') | |
const fetch = param => new Promise(resolve => { | |
setTimeout(() => { | |
resolve(`Hello ${param.first} ${param.last}! Date is ${param.date}`) | |
}, Math.random() * 1000) | |
}) | |
//--------------------------------------------- | |
// UI Input에 대응 값들을 받아들임 | |
//--------------------------------------------- | |
const date = new Rx.BehaviorSubject('2001-09-23') | |
const first = new Rx.BehaviorSubject('Ian') | |
const last = new Rx.BehaviorSubject('Kim') | |
//--------------------------------------------- | |
// 입력받은 Parameter들을 합쳐서 정리 | |
//--------------------------------------------- | |
const paramsSubject = new Rx.Subject | |
const params = Rx.Observable | |
.combineLatest(date, first, last) // 마지막 값들만 모으는 Combine Operator | |
.debounceTime(200) // 빈번한 프로세싱을 막기 위해서 debounce 처리 | |
// .bufferTime(200) // debounceTime으로 축약할 수 있음 | |
// .filter(x => x.length > 0) | |
// .map(x => x[x.length - 1]) | |
.map(x => ({date: x[0], first: x[1], last: x[2]})) | |
.do(x => console.log('!!!! do params', x)) | |
// hot observable로 변경 - 이 부분을 배제하면 params의 단계가 매 호출마다 재실행 되는 문제가 있다 | |
// 이 부분을 hot observable로 변경해서 윗 단계들을 단일 실행으로 정리할 수 있다 | |
.multicast(paramsSubject) | |
params.connect() | |
//--------------------------------------------- | |
// UI Output을 위한 Observables | |
//--------------------------------------------- | |
const userName = params.map(x => `${x.first} ${x.last}`) | |
const currentDate = params.map(x => `${x.date}`) | |
const helloMessage = params.map(x => Rx.Observable.fromPromise(fetch(x))) | |
.mergeAll() | |
.debounceTime(100) | |
//--------------------------------------------- | |
// UI Print | |
//--------------------------------------------- | |
const userNameSubscription = userName.subscribe(x => console.log('@user name', x)) | |
const currentDateSubscription = currentDate.subscribe(x => console.log('@current date', x)) | |
const helloMessageSubscription = helloMessage.subscribe(x => console.log('@hello message', x)) | |
//--------------------------------------------- | |
// 입력 실험 | |
//--------------------------------------------- | |
date.next('2010-10-09') | |
date.next('2015-05-24') | |
first.next('Seoyeon') | |
last.next('Lee') | |
first.next('Youngjoo') | |
setTimeout(() => { | |
date.next('2016-04-19') | |
first.next('Kiwhan') | |
last.next('Ryu') | |
setTimeout(() => { | |
// Rx.BehaviorSubject로 가능하다 | |
// 기본 Subject는 값을 캐싱하고 있지 않기 때문에 | |
// 값이 입력되고 난 이후에 붙는 Subscription에 아무런 동작을 하지 않는다 | |
const lazySubscription = helloMessage | |
// .scan((arr, x) => { // scan()은 Subscription이 시작된 이후부터의 값을 캐싱하기 시작한다 | |
// arr.push(x) | |
// return arr | |
// }, []) | |
// .subscribe(x => console.log('@lazy', x.length, x.join(' + '))) | |
.subscribe(x => console.log('@lazy', x)) | |
setTimeout(() => { | |
date.next('2016-05-23') | |
first.next('Kwangjin') | |
last.next('Yoon') | |
setTimeout(() => { | |
date.unsubscribe() // subject와 observable을 모두 뒤섞어서 unsubscribe() 시켜본다 | |
first.unsubscribe() | |
lazySubscription.unsubscribe() | |
userNameSubscription.unsubscribe() | |
paramsSubject.unsubscribe() | |
last.unsubscribe() | |
currentDateSubscription.unsubscribe() | |
helloMessageSubscription.unsubscribe() | |
console.log(date.isUnsubscribed, first.isUnsubscribed, last.isUnsubscribed) | |
console.log(helloMessageSubscription.isUnsubscribed, lazySubscription.isUnsubscribed) | |
}, 2000) | |
}, 2000) | |
}, 2000) | |
}, 1000) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment