| name | rxjs-stream-design |
| description | null |
Stream Design
Category: rxjs · Status: 🟢 Active
When to use
Khi thiết kế luồng dữ liệu RxJS theo mô hình declarative: nguồn → pipe biến đổi → output.
Steps
- Xác định rõ nguồn (event, input, HTTP) làm điểm bắt đầu luồng.
- Mô tả biến đổi bằng chuỗi operator trong
pipe, mỗi bước một nhiệm vụ.
- Giữ luồng declarative: không nhồi
if/biến trạng thái ngoài; để operator lo.
- Kết hợp nhiều nguồn bằng
combineLatest/merge/withLatestFrom thay vì subscribe lồng.
- Đầu ra (subscribe/async pipe) chỉ nhận kết quả, không chứa logic biến đổi.
Template
const results$ = searchInput$.pipe(
map((e) => e.target.value),
debounceTime(300),
distinctUntilChanged(),
filter((q) => q.length > 1),
switchMap((q) => api.search(q)),
);
results$.subscribe(render);
Example
Good: nguồn rõ, mỗi operator một việc, luồng declarative, kết hợp nguồn bằng operator.
Avoid: subscribe lồng subscribe, biến trạng thái ngoài để điều khiển luồng, logic trong output.
Checklist