RxJS 자동 실행 소개

안녕하세요, RxJS 스트리머 여러분! 🙋‍♂️

오늘 우리는 사용하는 스트림의 업데이트를 기반으로 표현식을 재평가하는 작은 라이브러리를 검토할 것입니다.

요약: 문서 및 패키지github.com/kosich/rxjs-autorun 🔗

과감하게 알아보자!

달콤한 카운트다운이야

첫 번째 예입니다.

예를 들어 timer 스트림의 각 값을 예쁘게 만들고 싶습니다. 따라서 다음과 같은 표현을 작성합니다.

import { timer } from 'rxjs';
import { computed, $ } from 'rxjs-autorun';

// timer would emit every second
const a = timer(0, 1_000);
// expression would concat every emission with a cake
const result = computed(() => $(a) + ' 🍰');
// now we should subscribe to the resulting stream
result.subscribe(x => console.log(x));
// > 0 🍰
// > 1 🍰
// > 2 🍰
// > …

설명: computed는 일부 스트림을 사용하고 해당 스트림이 업데이트될 때 이를 다시 평가하는 함수를 사용합니다. 추가로 조작할 수 있는 관찰 가능 항목을 반환합니다. 그리고 $(a)는 a가 스트림이고 해당 업데이트를 들어야 함을 나타냅니다.

따라서 기술적으로 이 표현은 a.pipe( map(x => x + '🍰') )와 동일합니다.

하지만 이 작은 lib가 무엇을 할 수 있는지 계속 알아봅시다.

무한 원숭이 정리에는 무한 바나나가 필요합니다

여기에서 우리는 작은 🐒 친구의 대기열을 가져온 바나나 🍌의 스트림을 나타내는 타이머를 결합합니다.

import { timer, of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { computed, $ } from 'rxjs-autorun';

const a = timer(0, 1_000); // get some monkeys
const b = of('🍌').pipe(delay(2_000)); // fetch some treats
const result = computed(() => '🐒 #' + $(a) + ' gets ' + $(b)); // mix
result.subscribe(x => console.log(x)); // listen to result stream
// ...2s gap...
// > 🐒 #1 gets 🍌
// > 🐒 #2 gets 🍌
// > 🐒 #3 gets 🍌
// > …

BTW, 알고 있었나요 banana is technically a berry?



어렵지 않죠?

이 표현은 combineLatest(a, b).pipe( map(([x,y]) => x + y) ) 와 유사합니다.

다른 다중 스트림 예를 검토해 보겠습니다.

피자 먹을 사람?

오늘 배울 마지막 요령은 업데이트를 추적하지 않고 최신 값을 읽는 기능입니다.

import { Subject } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = new Subject(); // neighbours
const b = new Subject(); // food
computed(() => $(a) + ' likes ' + _(b))
  .subscribe(x => console.log(x));
a.next('🐈'); // nothing: b is still empty
b.next('🥛'); // > 🐈 likes 🥛
a.next('🐭'); // > 🐭 likes 🥛
b.next('🍕'); // nothing: _(b) doesn't trigger re-runs
a.next('🙋‍♂️'); // 🙋‍♂️ likes 🍕

설명: _ 함수는 스트림에서 하나의 값을 가져와야 하지만 이 특정 스트림이 방출될 때 표현식을 다시 계산하고 싶지 않음을 나타냅니다. 따라서 식에서 $(a) 및 _(b)를 사용하면 a 업데이트에만 반응합니다.

이것은 또한 computed(() => _(a)) 표현식이 하나의 값을 내보내고 즉시 완료됨을 의미합니다.

마무리하기 전에 마지막으로 한 가지:

변환

이번에는 그것이 무엇인지 추측해 보세요.

import { timer, of } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = timer(0, 1_000);
const b = of('💧');
const c = of('❄');
const result = computed(() => $(a) % 2 ? _(b) : _(c));
result.subscribe(x => console.log(x));

사실, 이것은 변덕스러운 날씨입니다 🙂

실제로 이 표현은 switchMap과 다소 유사합니다.

아웃트로 😳

가능한 모든 예try here .

그리고 라이브러리에 더 많은 것이 있습니다. 이동explore it yourself !

다음 문서에서는 배출을 필터링하는 방법과 rxjs-autorun 식 내에서 구독을 관리하는 방법을 검토합니다. 그 게시물과 다른 RxJS 게시물을 놓치지 마세요. 여기에서 저를 팔로우하세요!

재미있게 읽으셨다면 ❤️ 🦄 📘 버튼으로 표시해 주세요. 많은 도움이 됩니다!

이 기사를 읽어 주셔서 감사합니다! 반응을 유지하고 좋은 하루 되세요 🙂

또한 나는 감사하고 싶다
이 아이디어에 대한 긴 토론을 위해
시도해 주시고 Johan 저와 협력해 주셔서 감사합니다! 🙏

Psst .. 더 읽을 것이 필요하십니까?

나는 당신을 덮었습니다 :

😉