Các RxJS operator quan trọng và các flattening operator là gì?

Question

Accepted Answer

**RxJS operator** biến đổi, lọc, và kết hợp các luồng Observable. Quan trọng nhất — và gây nhầm lẫn nhất — là bốn **flattening operator** xử lý Observable-của-Observable (ví dụ một lệnh gọi HTTP được kích hoạt bởi mỗi lần phát ra của một luồng khác).

## Các operator biến đổi/lọc phổ biến

```ts
import { map, filter, tap, debounceTime, distinctUntilChanged, catchError } from "rxjs/operators";

source$.pipe(
  map(x => x * 2),                 // biến đổi mỗi giá trị
  filter(x => x > 10),             // giữ các giá trị vượt qua bài kiểm tra
  tap(x => console.log(x)),        // side effect, không thay đổi luồng
  debounceTime(300),               // chờ một khoảng ngừng trước khi phát (input tìm kiếm)
  distinctUntilChanged(),          // bỏ qua các giá trị trùng lặp liên tiếp
);
```

## Bốn flattening operator (phần khó)

Khi mỗi giá trị từ một nguồn cần kích hoạt **một** Observable khác (như một request HTTP), bạn phải "làm phẳng" (flatten) Observable bên trong. Bốn cái khác nhau ở **cách chúng xử lý sự chồng lấn**:

```text
switchMap   → hủy Observable bên trong trước đó khi một giá trị mới đến
mergeMap    → chạy tất cả Observable bên trong đồng thời (không hủy)
concatMap   → xếp hàng chúng, chạy từng cái một theo thứ tự
exhaustMap  → bỏ qua các giá trị mới trong khi một Observable bên trong vẫn đang chạy
```

## Khi nào dùng từng cái

```ts
// switchMap — tìm kiếm type-ahead: hủy request cũ khi người dùng gõ lại
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.api.search(query)) // chỉ kết quả của truy vấn MỚI NHẤT mới quan trọng
).subscribe(results => this.results = results);

// mergeMap — bắn các request độc lập song song (thứ tự không quan trọng)
from(ids).pipe(mergeMap(id => this.api.get(id)));

// concatMap — các thao tác PHẢI chạy theo thứ tự (ví dụ các lần lưu tuần tự)
actions$.pipe(concatMap(action => this.api.save(action)));

// exhaustMap — bỏ qua các click lặp lại trong khi một lần login đang chạy
this.loginClick$.pipe(exhaustMap(() => this.auth.login())); // bỏ qua click spam
```

## Một cách ghi nhớ

```text
switchMap  = "chuyển sang cái mới" (hủy cái cũ)   → tìm kiếm
mergeMap   = "gộp tất cả" (song song)             → các request độc lập
concatMap  = "nối chuỗi" (tuần tự)                → các thao tác có thứ tự
exhaustMap = "vắt kiệt cái hiện tại trước" (bỏ qua cái mới) → ngăn double-submit
```

## Tại sao điều này quan trọng

Các flattening operator nằm trong số những công cụ RxJS quan trọng nhất — và bị dùng sai phổ biến nhất — trong Angular.

Chọn sai gây ra bug thực: dùng `mergeMap` cho tìm kiếm hiện kết quả cũ (không hủy); dùng `switchMap` cho các lần lưu tuần tự hủy chúng giữa chừng.

Biết rằng `switchMap` hủy (lý tưởng cho tìm kiếm), `concatMap` sắp thứ tự, `mergeMap` song song hóa, và `exhaustMap` chặn trùng lặp là thiết yếu để xử lý async đúng đắn trong bất kỳ code Angular nặng về RxJS nào.