RXjs와의 반응성

관찰 가능 대 약속

Promise는 가져오기를 수행하고 then 메서드를 사용하여 응답을 기다릴 수 있습니다. 최근에는 응답을 처리하기 위해 async 및 await 키워드를 사용할 수 있습니다.
Observable은 다른 접근 방식을 사용합니다. 이 경우 데이터 스트림으로 작업한 다음 구독합니다. 스트림에서 새 데이터가 수신되는 즉시 구독에 알림이 표시되고 수신 데이터를 사용할 수 있게 됩니다.

정의에 따르면 약속은 한 번 호출되고 한 번 해결됩니다.
반면에 관찰 가능 항목을 사용하면 데이터를 스트리밍하고 데이터를 여러 번 보낼 수 있습니다.
Observable을 사용하면 취소할 수 있고 파이프를 사용하여 데이터 스트림을 조작할 수 있습니다.

Angular는 코어에서 observable을 사용하여 http 요청, 라우팅, 창 변경 등을 처리합니다.

RXjs

RxJS는 구독 게시자 패턴을 통해 앱 전체에서 반응성을 처리할 수 있는 라이브러리입니다.

이 기능을 구현하는 데 사용할 수 있는 공통 클래스 중 하나는 BehaviorSubject 클래스입니다.

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { Product } from "./../../core/models/product.model";

@Injectable({
  providedIn: "root",
})
export class CartService {
  // This value is the dynamic value, we want to react to its changes
  private products: Product[] = [];
  // This BehaviorSubject instance defines the way reactivity is going to be hanle
  private cart = new BehaviorSubject<Product[]>([]);
  // Observable object consume by subscriptors
  cart$ = this.cart.asObservable();

  constructor() {}

  addToCart(product: Product) {
    // setting new value
    this.products = [...this.products, product];
    // sending new value to suscriptors
    this.cart.next(this.products);
  }
}

addToCart 메서드는 서비스를 주입하는 모든 구성 요소에서 사용할 수 있습니다.

이제 이 반응형 클래스를 어떻게 구독할 수 있습니까?

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { CartService } from '@core/services/cart.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
  total$: Observable<number>;

  constructor(private cartService: CartService) {
    this.total$ = this.cartService.cart$.pipe(
      map((products) => products.length;)
    );
  }

  ngOnInit(): void {}
}

switchMap을 사용하여 구독 수 줄이기

최적화하려는 코드

product: Product;

ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
        const id = params.id;
        this.fetchProduct(id);
    });
}

fetchProduct(id: string) {
    this.productsService.getProduct(id).subscribe((product) => {
        this.product = product;
    });
}

최적화된 코드

product$: Observable<Product>;

constructor(
    private route: ActivatedRoute,
    private productsService: ProductsService
) {}

ngOnInit(): void {
    this.product$ = this.route.params.pipe(
        switchMap(
            (params: Params) => this.productsService.getProduct(params.id)
            )
        );
}

구성 요소에서 관찰 가능 항목 사용

<div *ngIf="(product$ | async) as product">

구독 오류 처리

subscribe(successFunction, (error) => {
  handlingError();
});

우리는 함수 handlingError를 사용하여 로그를 표시하거나 이벤트를 저장하거나 보초 등에 보낼 수 있습니다.