Skip to content

Instantly share code, notes, and snippets.

@iamssen
Last active May 27, 2016 04:36
Show Gist options
  • Save iamssen/37674f65f0821c019da016d2ebe58585 to your computer and use it in GitHub Desktop.
Save iamssen/37674f65f0821c019da016d2ebe58585 to your computer and use it in GitHub Desktop.
Rx를 사용한 입력 / 서비스 호출 / 출력 모델링
!!!! 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
/*
실험 목적
=============================
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