RxJS Toàn Tập (P1 Giới thiệu RxJS là gì)

Giới thiệu RxJS là gì ?

RxJS là một thư viện cho chương trình soạn bất đồng bộ và dựa trên sự kiện sử dụng trình tự có thể quan sát (observable). Nó cung cấp 1 kiểu lõi ( Observable), các kiểu vệ tinh (Observer, Schedulers, Subjects) và toán tử lấy cảm hứng từ mảng (map, filter, reducer, every,…) cho phép thao tác các sự kiện bất đồng bộ như tập hợp (collections)

Hãy nghĩ về RxJS giống như Lodash cho các sự kiện.

Các khái niệm cơ bản trong RxJS giải quyết sự quản lý sự kiện không đồng bộ là:

1. Observable: đại diện cho ý tưởng về 1 bộ sưu tập bất khả xâm phạm cho các giá trị hoặc sự kiện trong tương lai.
2. Observer: là tập hợp các cuộc gọi lại biết lắng nghe cái giá trị được phát ra từ Observable
3. Subscription: Đại diện cho việc  thực hiện 1 Observable. mục đích chính sử dụng để huỷ bỏ việc thực hiện
4. Operators: là các pure function cho phép một kiểu lập trình chức năng xử lý các bộ sưu tập với các phép toán như map, filter, concat, reduce,…
5. Subject: tương đương với một EventEmitter và là cách duy nhất để phát nhiều hướng một giá trị hoặc sự kiện cho nhiều người quan sát (Observer).
6. Schedulers: này sẽ nói sau.

Ví dụ:

Bình thường bạn đăng ký lắng nghe 1 sự kiện:

const button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

Sử dụng RxJS bạn tạo ra 1 Observable thay thế như đoạn mã bên dưới:

const { fromEvent } = rxjs;

const button = document.querySelector('button');
fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

Độ tinh khiết

Điều gì làm cho RxJS mạnh mẽ là khả năng tạo ra cái giá trị từ các hàng thuần tuý (Pure function). Điều này có nghĩa là mã của bạn ít lỗi hơn.

Thông thường bạn tạo ra 1 hàm không tinh khiết (impure function), nơi các phần khác của mã có thể làm hỏng trạng thái của bạn.

var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

Sử dụng RxJS bạn cô lập được trạng thái của bạn.

const { fromEvent } = rxjs;
const { scan } = rxjs.operators;

const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));

phép toán scan cho phép làm việc giống như reduce của mảng, nó lấy một giá trị đầu vào cho một cuộc gọi lại (callback). Giá trị trả về của cuộc gọi lại sau đó sẽ trở thành giá trị tiếp theo được hiển thị trong lần chạy tiếp theo.

Lưu lượng

RxJS có một loạt các toán tử giúp bạn kiểm soát cách các sự kiện chảy qua các quan sát của bạn

Đây là cách bạn cho phép nhiều nhất một lần click chuột mổi giây với mã Javascript đơn giản:

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

Với RxJS, thật đơn giản phải không nào:

const { fromEvent } = rxjs;
const { throttleTime, scan } = rxjs.operators;

const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(1000),
  scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));

Giá trị

Bạn có thể chuyển đổi các giá trị được chuyển qua các Observables của bạn
Dưới đây là cách bạn có thể thêm vị trí x chuột hiện tại cho mỗi nhấp chuột, trong JavaScript đơn giản:

let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count)
    lastClick = Date.now();
  }
});

Với RxJS:

const { fromEvent } = rxjs;
const { throttleTime, map, scan } = rxjs.operators;

const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(1000),
  map(event => event.clientX),
  scan((count, clientX) => count + clientX, 0)
)
.subscribe(count => console.log(count));