22-04-09-SAT

[snaag]

• MY REPO: https://github.com/snaag/study-rxjs
• COMMIT: https://github.com/snaag/study-rxjs/commit/4140254bbcd4d45f09acbd14b659dc8ecbc45fc0
• LECTURE: (강의) 얄코의 반응형 프로그래밍, rxjs 이미지-yalco 블로그
• SUBJECT: rxjs - operators

[snaag]

operators

• merge
  • merge(obs1$, obs2$ [,obs3$, ... obsN$, k])
  • N 개의 observable 을 순서 상관없이, 합쳐서 하나로 만듦
  • (❗️ k 는 observable 이 아니라, 한 번에 몇 개의 observable 을 하나로 만들건지를 의미함)
• concat
  • concat(obs1$, obs2$, [, obs3$, ... obsN$])
  • N 개의 observable 을 순서대로 합쳐서, 하나로 만듦
• xxMap
  • mergeMap
    • obs1$.pipe(mergeMap(obs2$).pipe(map(fn)))
    • merge + map
      • obs$ 와 다른 obs$를 합치는데, 이 때 map 을 함
  • concatMap
    • obs1$.pipe(concatMap(obs2$).pipe(map(fn)))
    • concat + map
  • switchMap
    • obs1$.pipe(switchMap(obs2$).pipe(map(fn)))
    • 기준 스트림이 새 값을 발행하면 진행중이던 스트림을 멈춤

[snaag]

1. merge, concat

1-1. merge

• n 개의 observable 을 순서 상관없이, 하나로 만듦

const interval$ = interval(1000).pipe(map(_ => 'interval'))
const click$ = fromEvent(document, 'click').pipe(map(_ => 'click'))

merge(interval$, click$) // <- 2개의 obs$ 을 합쳐서, 하나의 스트림으로 만들어 구독한다
   .subscribe(console.log);

const intv1$ = interval(1000).pipe(
    map(_ => 'INTERVAL 1'), take(3))
const intv2$ = interval(1000).pipe(
    map(_ => 'INTERVAL 2'), take(6))
const intv3$ = interval(1000).pipe(
    map(_ => 'INTERVAL 3'), take(9))
const intv4$ = interval(1000).pipe(
    map(_ => 'INTERVAL 4'), take(9))
const intv5$ = interval(1000).pipe(
    map(_ => 'INTERVAL 5'), take(9))
merge(intv1$, intv2$, intv3$, intv4$, intv5$, 3) // <- 5개의 obs$ 을 합치는데, 이 때 3개씩 합쳐서, 하나의 스트림으로 만들어 구독한다
   .subscribe(console.log)

1-2. concat

• n 개의 observable stream 을 순서대로 이어붙임

const intv1$ = interval(1000).pipe(
    map(_ => 'INTERVAL 1'), take(3))
const intv2$ = interval(1000).pipe(
    map(_ => 'INTERVAL 2'), take(3))
const intv3$ = interval(1000).pipe(
    map(_ => 'INTERVAL 3'), take(3))

concat(intv1$, intv2$, intv3$)
 .subscribe(console.log)

[snaag]

2. xxMap

2-1. mergeMap

• obs 와 obs 간에 map 을 한다.

이미지

code - take 1

const letters = of('a', 'b', 'c');
const result = letters.pipe(
  mergeMap(x => interval(1000).pipe(
    take(3), // <- take 를 여기에
    map(i => x+i),
    ),
  )
);
result.subscribe(x => console.log(x));

a0
b0
c0
a1
b1
c1
a2
b2
c2

code - take 2

const letters = of('a', 'b', 'c');
const result = letters.pipe(
  take(1), // <- take
  mergeMap(x => interval(1000).pipe(
    take(3), // <- take
    map(i => x+i),
    ),
  )
);
result.subscribe(x => console.log(x));

a0
a1
a2

2-2. concatMap

• concat + map

이미지

fromEvent(document, 'click').pipe(
    concatMap(e => interval(1000).pipe(
        map(i => e.x + ' : ' + i),
        take(5)
    ))
).subscribe(console.log);

3. switchMap

이미지

• 기준 스트림이 새 값을 발행하면 진행중이던 스트림을 멈춤
• 즉 클릭할 때 마다, 스트림을 새로 시작함
• ❗️ switch 는 없음

fromEvent(document, 'click').pipe( // <- 기준 스트림
    switchMap(e => interval(1000).pipe(
        map(i => e.x + ' : ' + i),
        take(5)
    ))
).subscribe(console.log)