rxjs tap operator를 통한 side-effect

https://choi95.tistory.com/115

axios Intercept requests_API 요청 처리 동안 UI 요소 보여 주기

---

이전 포스팅에서 API 요청 처리 동안에 loading UI를 랜더링해주고 API 요청이 끝나면 다시 사라지도록 axios Intercept requests와 await를 이용한 비동기 처리를 통해 해당 기능을 구현하였다.

하지만 이외에도 rxjs operator 중 tap을 이용해서도 해당 기능을 구현할 수 있음을 확인하였다.

 

rxjs tap operator

https://rxjs.dev/api/operators/tap

RxJS

Tap is designed to allow the developer a designated place to perform side effects. While you could perform side-effects inside of a map or a mergeMap, that would make their mapping functions impure, which isn't always a big deal, but will make it so you can't do things like memoize those functions. The tap operator is designed solely for such side-effects to help you remove side-effects from other operations.
For any notification, next, error, or complete, tap will call the appropriate callback you have provided to it, via a function reference, or a partial observer, then pass that notification down the stream.

tap operator는 sequential 하게 발생하는 데이터 스트림의 흐름을  방해하지 않은 채 부수적인 측면에서 동시적으로 일어나기 때문에 다양한 상황에서의 사건을 처리할 수 있다.

const inputStream = fromEvent($searchInput, "input").pipe(
  map((event) => event.target.value),
  debounceTime(500),
  distinctUntilChanged(),
  tap(() => ($loadingIndicator.style.visibility = 'visible')),
  switchMap((query) => 
    ajax(`${API_URL}?q=${query}`, {method: 'GET'}).pipe(
      map(({response}) => response)
    )
  ),
  tap(() => ($loadingIndicator.style.visibility = 'hidden'))
);

https://rxjs.dev/api/operators/switchMap

RxJS

Returns an Observable that emits items based on applying a function that you supply to each item emitted by the source Observable, where that function returns an (so-called "inner") Observable. Each time it observes one of these inner Observables, the output Observable begins emitting the items emitted by that inner Observable. When a new inner Observable is emitted, switchMap stops emitting items from the earlier-emitted inner Observable and begins emitting items from the new one. It continues to behave like this for subsequent inner Observables.

참고로 switchMap operator는 구독중이던 Observable이 끝나기 전에 새로운 Observable를 구독하면 이전에 구독하고 있Observable을 구독 취소하고 다음 Observable을 구독한다.

switchMap의 경우는 서버에 요청을 했다가 취소하고 다른 요청을 보내야 하는 상황처럼 진행 중인 작업을 취소하는 경우에 적합하다.

 

관련 사항

https://choi95.tistory.com/89

RxJS debounceTime operator를 통해 Event request 줄이기