RxJS-Autorun의 재미

안녕! 👋

오늘은 이전 게시물에서 검토한 rxjs 및 rxjs-autorun을 사용하는 몇 가지 트릭을 보여 드리겠습니다. 기능을 빠르게 요약해 보겠습니다.

일부 스트림을 사용하는 식을 전달합니다

.

해당 스트림이 방출될 때마다 자동 실행이 새 값으로 표현식을 실행합니다

.

해당 평가 결과의 스트림을 얻습니다

.

이제 우리가 할 수 있는 일을 빠르게 살펴보겠습니다!

단일 스트림 매핑: 🌱 🌿 🌳

가장 기본적인 사용법: t , 0 , 1 등 정수 값이 증가하는 스트림 2가 있습니다(RxJS timer이 하나를 생성합니다). 그리고 그 정수를 "even" 또는 "odd" 문자열로 대체하려고 합니다.

const t = timer(0, 1_000);
computed(() => $(t) % 2 ? 'odd' : 'even');
// Result:
// > even > odd > even > odd …

설명: $(t)는 스트림t이 값을 내보낼 때까지 대기합니다. 그런 다음 값을 내보낼 때마다 computed는 표현식을 재평가하여 결과를 출력 스트림에 넣습니다.

조합: 📦 + 🎀 = 🎁

표현식 내부의 여러 스트림을 추적하여 이러한 스트림의 배출을 결합할 수 있습니다.

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

const a = timer(0, 1_000);
const b = of('🐇');
computed(() => $(a) + ' - ' + $(b))
// > 0 - 🐇 > 1 - 🐇 > 1 - 🐇 …

문자열로 결합하는 것과 유사하게 배열로 결합할 수 있습니다.

computed(() => [ $(a), $(b) ])
// > [ 0, 🐇 ] > [ 1, 🐇 ] …

사물:

computed(() => ({ a: $(a), b: $(b) }))
// > { a: 0, b: 🐇 } > { a: 1, b: 🐇 } …

또는 함수를 호출할 수도 있습니다!

function toString(count, animal) {
  return (count < 3 ? 'some' : 'many') + animal;
}
computed(() => toString( $(a), $(b) ))
// > some 🐇 > some 🐇 … > many 🐇 …

스위칭: 🌤 🌧

이제 주어진 도시의 일기 예보와 함께 Observable을 반환하는 함수getWeather가 있다고 상상해 보십시오. 첫 번째 예에서와 동일한?:을 사용하여 두 도시의 날씨를 표시하는 위젯을 만들 수 있습니다.

const t = timer(0, 1_000);
const nice = getWeather('Nice'); // => Observable<'Nice: 🌤'>
const cannes = getWeather('Cannes'); // => Observable<'Cannes: 🌧'>
computed(() => $(t) % 2 ? $(nice) : $(cannes));
// > Cannes: 🌧 > Nice: 🌤 > Cannes: 🌧 > Nice: 🌤 …

트릭: 🐇 🎩

이제 $(…)가 평가를 계속하기 전에 스트림이 첫 번째 값을 내보낼 때까지 기다릴 것이라고 말한 것을 기억하십시오. 이rxjs-autorun 기능을 악용하는 몇 가지 트릭을 수행해 봅시다!

필터링

computed는 값을 생성하기 위해 모든 관찰 가능 항목이 방출될 때까지 기다립니다. 하지만 절대로 방출하지 않는 Observable: NEVER 을 전달하면 어떻게 될까요? 맞습니다. 다른 추적된 Observable이 다음을 방출할 때까지 방출을 일시 중지합니다.

const a = timer(0, 1_000);
computed(() => $(a) % 2 ? $(NEVER) : $(a) + ' even' );
// > 0 even > 2 even > 4 even …

시간을 내어

NEVER 와 유사하게, 우리는 결코 값을 방출하지 않는 Observable을 전달함으로써 awaiting을 이용할 수 있습니다: EMPTY . 표현식이 값을 내보내지 않는 스트림에 의존한다면 결과 Observable도 당연히 내보내지 않을 것입니다! 따라서 computed는 다음을 완료합니다.

const a = timer(0, 1_000);
const c = computed(() => $(a) < 5 ? $(a) : $(EMPTY));
// > 0 > 1 > 2 > 3 > 4 > COMPLETE!

참고: 이 기능은 현재 베타 테스트 중이며 다음 릴리스에서 사용할 수 있습니다.

보너스: 🙂

식을 실행하는 computed 함수와 값을 추적하는 $ 함수를 보여 드렸습니다. 하지만 $에게는 형제가 있습니다! A _ 함수는 $ 와 유사하게 스트림의 현재 값을 읽지만 해당 스트림이 업데이트되면 식 재평가를 트리거하지 않습니다!

이제 $ 와 _ 를 혼합하면 위의 예를 상상해 보십시오. 생각이 났어, 응? 그런 다음 모든 computed 스트림을 다른 computed 표현식에 사용할 수 있다고 상상해 보십시오!

🙂 → 😲 → 🤯

아웃트로: 🛸💨

여기에서 문서와 라이브러리를 찾을 수 있습니다: github.com/kosich/rxjs-autorun

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

더 많은 RxJS, React 및 JS 게시물을 보려면 여기에서 저를 팔로우하세요!

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

시아! 👋

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

나는 당신을 덮었습니다 :

😉