나는 양 닉라스 워터만이 쓴 그 글을 읽고 있다.switchMap에 대한 이 말은 초보자에게 사물을 관찰할 수 있는 이해가 얼마나 어려운지 일깨워 주었다.

A higher-order operator is handling an Observable of Observables.

아주 잘 알고 있죠?적어도 switchMap 문서 자체의 이것만큼 나쁘지는 않다.

[switchMap] projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

다른 RxJS 조작부호와의 모든 설명은 정확하지만, 언제 그리고 왜 사용했는지에 대한 진실한 느낌을 불러일으키지는 않는다.그렇기 때문에 저는 2019년 RxJS 차량 적재 능력을 RxJS Live 강연의 중심 주제로 삼고 polyrhythm 라이브러리를 창설하여 흔히 볼 수 있는 반응성/관찰성 임무를 더욱 간단하게 완성하도록 돕습니다.switchMap과 그 작업 원리를 사건과 처리 프로그램의 측면에서 이해합시다.

RxJS-잡음 = 이벤트

검색 - 제안된 검색 상자 - switchMap의 가장 일반적인 용도 중 하나입니다.검색 입력의 변경 사항을 AJAX에서 찾을 수 있습니다.새로운 검색이 시작될 때 낡은 검색 (및 xhr) 을 닫으려면 비기술적인 언어로 말하는 것을 잠시 무시합시다.
다음은 양식을 실행하는 polyrhtyhm 코드입니다.

<input id="search-text" onchange="trigger('search/change')">

function ajaxToResult$({ payload: { text }})) => {
    return ajax$(`search?q=${text}`).pipe(tap(searchResult => {
        updateUI(searchResult);
    });
}

listen('search/change', ajaxToResult$, { mode: 'replace' });

DOM 변경 이벤트에 응답하기 위해 search/change 유형의 이벤트를 생성하여 trigger 이벤트 버스에 배치합니다.함수 ajaxToResult$은 1)xhr2)가 updateUI 함수에 대한 호출을 반환하고 이 함수는 결과를 처리합니다.이 함수는 switchMap에 전달된 함수와 같지만, type과 payload 필드를 포함하는 이벤트가 필요합니다.
이 함수 ajaxToResult$은 모든 이벤트에서 실행됩니다.그런데 만약에 얘가 운행을 했다면?모드 "replace"는 탐지기가 switchMap의 동작을 실행하고 기존의 것을 취소하고 새로운 ajaxToResult의 관찰 대상을 시작합니다.시간과 최종 행위는 아래 그림과 같이 녹색 다이아몬드 생산자가 노란색 다이아몬드 생산자에게 교체될 때 발생하는 것을 볼 수 있습니다.

관찰물-동일, 다만 다르다

관찰할 수 있는 실현에 대해서는 같은 부분이 존재하지만 조합은 다르다.
먼저 변경 이벤트를 관찰 가능한 이벤트의 일부로 검색합니다.그런 다음 관찰할 수 있는 외부 객체를 switchMaping에서 ajaxResults로 만듭니다.그리고 전화로 구독하세요.

const searchChange$ = fromEvent(searchText, "change");
const outer$ = searchChange$.pipe(switchMap(ajaxToResult$));
outer$.subscribe();
// TODO what's a better name for outer$ here?

이 코드는 작동할 수 있지만, 나는 그것의 가독성을 좋아하지 않는다.
병렬 조작부호가 코드 체인에 숨겨져 있습니다.나는 외부 관찰 대상을 만들고, 이름을 붙이고, 구독하는 것을 좋아하지 않는다.검색 변경과 검색 자체가 하나의 대상에 통합되는 것은 불필요한 결합처럼 느껴진다.
polyrhtyhm 버전은 같은 단원 테스트를 통해 같은 속도로 실행됩니다.만약 네가 이렇게 할 필요가 없다면, 왜 가독성 부담을 강요하려고 하느냐?

촉발했어

청중에 관해서 가장 좋은 것은 그들이 그들의 사건이 어디에서 왔는지 상관하지 않는다는 것이다. 이것은 주요한 탈선 형식이다.
만약 나의 searchChange$이 이미 관찰할 수 있는 대상에 있다고 가정한다면, 나는 그것들을 명명 이벤트로 자극할 수 있다.

searchChange$.subscribe(({ target }) =>
  trigger("search/change", { text: target.value })
);

내 청중도 이렇게 말할 것이다.감청기는 트리거(이벤트 생성기)와 무관하다.
사용자가 직접 디자인한 이름 이벤트는 JS 대상의 취약한 결합이나 특정한 프레임워크에 대한 의존이 아니라 응용 프로그램을 연결하는 접착제이다.

결합 해제, 관심점 분리

처음 시도할 때 올바른 RxJS 연산자를 선택하지 않았기 때문에 RxJS 연산자를 몇 번 변경했습니까?이것은 우리 모두에게 일어났다!a) 새 버전으로 변경하기 쉬우면, b) 변경한 후에 읽을 수 있다면 좋지 않겠습니까?switchMap 또는 exhaustMap이 낡은 aax를 대체하는 것임을 기억하지 못할 때, 더 이상 당신의 동료와 당신 자신에게 RxJS 문서를 보내지 않습니다."replace"라는 단어는 마음에 드는 상수 뒤에 숨거나 TypeScript 매거진에서 선택하면 충분합니다.
탐지기는 병발적인 논리 단원을 응용하여 자신과 촉발 사건의 관찰적 결합을 해소한다.다리듬이 있으면, 너는 영원히 관찰할 수 있는 관찰할 수 있는 것이 없을 것이다. 너는 사건과 청중이 있다.그것은 수십 개의 사건과 탐지기를 포함하는 대형 응용 프로그램까지 정상적으로 작동할 수 있다.생산 중이며 테스트를 거쳤기 때문에 팀에 의미가 있다면 사용하십시오.

결론

RxJS를 연산자와 함께 직접 사용하는 것은 틀림없지만, 외부 관찰 값을 이벤트로 분해하고 탐지기가 결과를 매핑하여 더 뚜렷한 코드를 얻을 수 있다면 편리합니다!그래, 내가 일부러 그 말을 터무니없이 들렸지만, 이제 알았어. 그리고 내가 앞에서 언급한 문장들.)
원장
이 추가 차트를 읽으면 다음 사항을 설명할 수 있습니다.

비동기는 수학일 뿐이다🤓 (조합 수학!)

나는 RxJS 조작부호가 제공하는 병렬 모드가 일반적인 개념의 서브집합이라고 믿는다.마치 switchMap의 내부에 이렇게 보이는 감속기가 살고 있는 것 같다.

(oldSubscription, newObservable$) => {
  oldSubscription.unsubscribe();
  return newObservable$.subscribe();
};

모든 조작부호 내부에는 유사한 것이 하나 있다.'낡은 것을 끝내기'아니면'새로운 것을 시작하기'는 총 4가지 조합이 있기 때문에 4개의 RxJS 조작부호가 있는 거죠?(퀴즈: 그들의 이름을 말할 수 있습니까?)
실제로 RxJS는 4가지를 포함하는 5가지 가능성을 보여 줍니다.

물론, 나는 PolyTherm에서 이 구멍을 채우기 위해 조작부호를 작성하고 내보냈다. toggleMap 이다.압도적인 수요 때문이라기보다는 나 자신의 강박증이 대칭성에 대한 요구 때문이다:)

비동기는 음악이다

오디오가 표시되면 다음과 같이 중첩됩니다.

UI를 구축할 때, 나는 정확한 모델을 선택하면 80%의 사용자 기대를 만족시킬 수 있다는 것을 발견했다.
그래서 저는 Observable를 기꺼이 사용하고 그들의 리듬 이름을 통해 이러한 병렬 모드/조작부호를 인용합니다. 그들의 RxJS 이름이 아니라.나는 RxJS가 나의 주의를 끌어서 매우 기쁘지만, 나의 코드 라이브러리에서 그들의 이름을 보고, 나는 더 이상 흥분하지 않는다.