Lập trình Reactive trong JavaScript: Các Mẫu RxJS & Luồng Observable

Trong bối cảnh không ngừng phát triển của phát triển web hiện đại, việc xây dựng các ứng dụng đáp ứng, có khả năng mở rộng và dễ bảo trì là điều tối quan trọng. Lập trình Reactive (RP) cung cấp một mô hình mạnh mẽ để xử lý các luồng dữ liệu bất đồng bộ và lan truyền các thay đổi trong toàn bộ ứng dụng của bạn. Trong số các thư viện phổ biến để triển khai RP trong JavaScript, RxJS (Reactive Extensions for JavaScript) nổi bật như một công cụ mạnh mẽ và linh hoạt.

Lập trình Reactive là gì?

Về cốt lõi, Lập trình Reactive là việc xử lý các luồng dữ liệu bất đồng bộ và sự lan truyền của thay đổi. Hãy tưởng tượng một bảng tính nơi việc cập nhật một ô sẽ tự động tính toán lại các công thức liên quan. Đó chính là bản chất của RP – phản ứng với các thay đổi dữ liệu một cách khai báo và hiệu quả.

Lập trình mệnh lệnh truyền thống thường liên quan đến việc quản lý trạng thái và cập nhật thủ công các thành phần để phản hồi các sự kiện. Điều này có thể dẫn đến mã phức tạp và dễ gây lỗi, đặc biệt khi xử lý các hoạt động bất đồng bộ như yêu cầu mạng hoặc tương tác của người dùng. RP đơn giản hóa điều này bằng cách coi mọi thứ như một luồng dữ liệu và cung cấp các toán tử để biến đổi, lọc và kết hợp các luồng này.

Giới thiệu RxJS: Reactive Extensions cho JavaScript

RxJS là một thư viện để soạn thảo các chương trình bất đồng bộ và dựa trên sự kiện bằng cách sử dụng các chuỗi có thể quan sát (observable sequences). Nó cung cấp một bộ các toán tử mạnh mẽ cho phép bạn thao tác các luồng dữ liệu một cách dễ dàng. RxJS được xây dựng dựa trên các mẫu Observer, Iterator và các khái niệm Lập trình hàm để quản lý các chuỗi sự kiện hoặc dữ liệu một cách hiệu quả.

Các khái niệm chính trong RxJS:

• Observables: Đại diện cho một luồng dữ liệu có thể được quan sát bởi một hoặc nhiều Observer. Chúng lười biếng (lazy) và chỉ bắt đầu phát ra giá trị khi có người đăng ký (subscribe).
• Observers: Tiêu thụ dữ liệu được phát ra bởi Observables. Chúng có ba phương thức: next() để nhận giá trị, error() để xử lý lỗi và complete() để báo hiệu kết thúc luồng.
• Operators: Các hàm biến đổi, lọc, kết hợp hoặc thao tác với Observables. RxJS cung cấp một loạt các toán tử cho nhiều mục đích khác nhau.
• Subjects: Đóng vai trò vừa là Observable vừa là Observer, cho phép bạn phát đa hướng (multicast) dữ liệu đến nhiều người đăng ký và cũng có thể đẩy dữ liệu vào luồng.
• Schedulers: Kiểm soát tính đồng thời của Observables, cho phép bạn thực thi mã đồng bộ hoặc bất đồng bộ, trên các luồng khác nhau hoặc với độ trễ cụ thể.

Chi tiết về Luồng Observable

Observables là nền tảng của RxJS. Chúng đại diện cho một luồng dữ liệu có thể được quan sát theo thời gian. Một Observable phát ra các giá trị cho những người đăng ký nó, sau đó họ có thể xử lý hoặc phản ứng với các giá trị đó. Hãy nghĩ về nó như một đường ống nơi dữ liệu chảy từ một nguồn đến một hoặc nhiều người tiêu thụ.

Tạo Observables:

RxJS cung cấp nhiều cách để tạo Observables:

• Observable.create(): Một phương thức cấp thấp cho phép bạn kiểm soát hoàn toàn hành vi của Observable.
• from(): Chuyển đổi một mảng, promise, iterable hoặc đối tượng giống Observable thành một Observable.
• of(): Tạo một Observable phát ra một chuỗi các giá trị.
• interval(): Tạo một Observable phát ra một chuỗi các số theo một khoảng thời gian xác định.
• timer(): Tạo một Observable phát ra một giá trị duy nhất sau một độ trễ xác định, hoặc phát ra một chuỗi các số theo một khoảng thời gian cố định sau độ trễ.
• fromEvent(): Tạo một Observable phát ra các sự kiện từ một phần tử DOM hoặc nguồn sự kiện khác.

Ví dụ: Tạo một Observable từ một mảng

```javascript import { from } from 'rxjs'; const myArray = [1, 2, 3, 4, 5]; const myObservable = from(myArray); myObservable.subscribe( value => console.log('Received:', value), error => console.error('Error:', error), () => console.log('Completed') ); // Output: // Received: 1 // Received: 2 // Received: 3 // Received: 4 // Received: 5 // Completed ```

Ví dụ: Tạo một Observable từ một sự kiện

```javascript import { fromEvent } from 'rxjs'; const button = document.getElementById('myButton'); const clickObservable = fromEvent(button, 'click'); clickObservable.subscribe( event => console.log('Button clicked!', event) ); ```

Đăng ký Observables:

Để bắt đầu nhận giá trị từ một Observable, bạn cần đăng ký nó bằng phương thức subscribe(). Phương thức subscribe() chấp nhận tối đa ba đối số:

• next: Một hàm sẽ được gọi cho mỗi giá trị được phát ra bởi Observable.
• error: Một hàm sẽ được gọi nếu Observable phát ra lỗi.
• complete: Một hàm sẽ được gọi khi Observable hoàn thành (báo hiệu kết thúc luồng).

Phương thức subscribe() trả về một đối tượng Subscription, đại diện cho kết nối giữa Observable và Observer. Bạn có thể sử dụng đối tượng Subscription để hủy đăng ký khỏi Observable, ngăn chặn việc phát ra các giá trị tiếp theo.

Hủy đăng ký Observables:

Hủy đăng ký là rất quan trọng để ngăn chặn rò rỉ bộ nhớ, đặc biệt khi xử lý các Observable tồn tại lâu dài hoặc các Observable phát ra giá trị thường xuyên. Bạn có thể hủy đăng ký một Observable bằng cách gọi phương thức unsubscribe() trên đối tượng Subscription.

```javascript import { interval } from 'rxjs'; const myInterval = interval(1000); const subscription = myInterval.subscribe( value => console.log('Interval:', value) ); // After 5 seconds, unsubscribe setTimeout(() => { subscription.unsubscribe(); console.log('Unsubscribed!'); }, 5000); // Output (approximately): // Interval: 0 // Interval: 1 // Interval: 2 // Interval: 3 // Interval: 4 // Unsubscribed! ```

Các toán tử RxJS: Biến đổi và lọc luồng dữ liệu

Các toán tử RxJS là trái tim của thư viện. Chúng cho phép bạn biến đổi, lọc, kết hợp và thao tác với Observables một cách khai báo và có thể kết hợp. Có rất nhiều toán tử có sẵn, mỗi toán tử phục vụ một mục đích cụ thể. Dưới đây là một số toán tử được sử dụng phổ biến nhất:

Toán tử biến đổi:

• map(): Áp dụng một hàm cho mỗi giá trị được phát ra bởi Observable và phát ra kết quả. Tương tự như phương thức map() trong mảng.
• pluck(): Trích xuất một thuộc tính cụ thể từ mỗi giá trị được phát ra bởi Observable.
• scan(): Áp dụng một hàm tích lũy trên Observable nguồn và trả về mỗi kết quả trung gian.
• buffer(): Thu thập các giá trị từ Observable nguồn vào một mảng và phát ra mảng đó khi một điều kiện cụ thể được đáp ứng.
• window(): Tương tự như buffer(), nhưng thay vì phát ra một mảng, nó phát ra một Observable đại diện cho một cửa sổ các giá trị.

Ví dụ: Sử dụng toán tử map()

```javascript import { from } from 'rxjs'; import { map } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5]); const squaredNumbers = numbers.pipe( map(x => x * x) ); squaredNumbers.subscribe(value => console.log('Squared:', value)); // Output: // Squared: 1 // Squared: 4 // Squared: 9 // Squared: 16 // Squared: 25 ```

Toán tử lọc:

• filter(): Chỉ phát ra các giá trị thỏa mãn một điều kiện cụ thể.
• debounceTime(): Trì hoãn việc phát ra các giá trị cho đến khi một khoảng thời gian nhất định trôi qua mà không có giá trị mới nào được phát ra. Hữu ích cho việc xử lý đầu vào của người dùng và ngăn chặn các yêu cầu quá mức.
• distinctUntilChanged(): Chỉ phát ra các giá trị khác với giá trị trước đó.
• take(): Chỉ phát ra N giá trị đầu tiên từ Observable.
• skip(): Bỏ qua N giá trị đầu tiên từ Observable và phát ra các giá trị còn lại.

Ví dụ: Sử dụng toán tử filter()

```javascript import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5, 6]); const evenNumbers = numbers.pipe( filter(x => x % 2 === 0) ); evenNumbers.subscribe(value => console.log('Even:', value)); // Output: // Even: 2 // Even: 4 // Even: 6 ```

Toán tử kết hợp:

• merge(): Hợp nhất nhiều Observables thành một Observable duy nhất.
• concat(): Nối nhiều Observables, phát ra các giá trị từ mỗi Observable theo thứ tự.
• combineLatest(): Kết hợp các giá trị mới nhất từ nhiều Observables và phát ra một giá trị mới mỗi khi bất kỳ Observable nguồn nào phát ra một giá trị.
• zip(): Kết hợp các giá trị từ nhiều Observables dựa trên chỉ số của chúng và phát ra một giá trị mới cho mỗi sự kết hợp.
• withLatestFrom(): Kết hợp giá trị mới nhất từ một Observable khác với giá trị hiện tại từ Observable nguồn.

Ví dụ: Sử dụng toán tử combineLatest()

```javascript import { interval, combineLatest } from 'rxjs'; import { map } from 'rxjs/operators'; const interval1 = interval(1000); const interval2 = interval(2000); const combinedIntervals = combineLatest( interval1, interval2, (x, y) => `Interval 1: ${x}, Interval 2: ${y}` ); combinedIntervals.subscribe(value => console.log(value)); // Output (approximately): // Interval 1: 0, Interval 2: 0 // Interval 1: 1, Interval 2: 0 // Interval 1: 1, Interval 2: 1 // Interval 1: 2, Interval 2: 1 // Interval 1: 2, Interval 2: 2 // ... ```

Các mẫu RxJS phổ biến

RxJS cung cấp một số mẫu mạnh mẽ có thể đơn giản hóa các tác vụ lập trình bất đồng bộ phổ biến:

Debouncing:

Toán tử debounceTime() được sử dụng để trì hoãn việc phát ra các giá trị cho đến khi một khoảng thời gian nhất định trôi qua mà không có giá trị mới nào được phát ra. Điều này đặc biệt hữu ích để xử lý đầu vào của người dùng, chẳng hạn như các truy vấn tìm kiếm hoặc gửi biểu mẫu, nơi bạn muốn ngăn chặn các yêu cầu quá mức đến máy chủ.

Ví dụ: Debouncing một ô nhập tìm kiếm

```javascript import { fromEvent } from 'rxjs'; import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), // Wait 300ms after each key press distinctUntilChanged() // Only emit if the value has changed ); searchObservable.subscribe(searchTerm => { console.log('Searching for:', searchTerm); // Make an API request to search for the term }); ```

Throttling:

Toán tử throttleTime() giới hạn tốc độ phát ra các giá trị từ một Observable. Nó phát ra giá trị đầu tiên được phát ra trong một khoảng thời gian xác định và bỏ qua các giá trị tiếp theo cho đến khi cửa sổ thời gian đó đóng lại. Điều này hữu ích để giới hạn tần suất của các sự kiện, chẳng hạn như sự kiện cuộn hoặc sự kiện thay đổi kích thước.

Chuyển đổi (Switching):

Toán tử switchMap() được sử dụng để chuyển sang một Observable mới mỗi khi một giá trị mới được phát ra từ Observable nguồn. Điều này hữu ích để hủy các yêu cầu đang chờ xử lý khi một yêu cầu mới được khởi tạo. Ví dụ, bạn có thể sử dụng switchMap() để hủy một yêu cầu tìm kiếm trước đó khi người dùng nhập một ký tự mới vào ô tìm kiếm.

Ví dụ: Sử dụng switchMap() cho tìm kiếm gợi ý (Typeahead)

```javascript import { fromEvent, of } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), distinctUntilChanged(), switchMap(searchTerm => { // Make an API request to search for the term return searchAPI(searchTerm).pipe( catchError(error => { console.error('Error searching:', error); return of([]); // Return an empty array on error }) ); }) ); searchObservable.subscribe(results => { console.log('Search results:', results); // Update the UI with the search results }); function searchAPI(searchTerm: string) { // Simulate an API request return of([`Result for ${searchTerm} 1`, `Result for ${searchTerm} 2`]); } ```

Ứng dụng thực tế của RxJS

RxJS là một thư viện linh hoạt có thể được sử dụng trong nhiều ứng dụng khác nhau. Dưới đây là một số trường hợp sử dụng phổ biến:

• Xử lý đầu vào của người dùng: RxJS có thể được sử dụng để xử lý các sự kiện đầu vào của người dùng, chẳng hạn như nhấn phím, nhấp chuột và gửi biểu mẫu. Các toán tử như debounceTime() và throttleTime() có thể được sử dụng để tối ưu hóa hiệu suất và ngăn chặn các yêu cầu quá mức.
• Quản lý các hoạt động bất đồng bộ: RxJS cung cấp một cách mạnh mẽ để quản lý các hoạt động bất đồng bộ, chẳng hạn như yêu cầu mạng và bộ đếm thời gian. Các toán tử như switchMap() và mergeMap() có thể được sử dụng để xử lý các yêu cầu đồng thời và hủy các yêu cầu đang chờ xử lý.
• Xây dựng ứng dụng thời gian thực: RxJS rất phù hợp để xây dựng các ứng dụng thời gian thực, chẳng hạn như ứng dụng trò chuyện và bảng điều khiển. Observables có thể được sử dụng để đại diện cho các luồng dữ liệu từ WebSockets hoặc Server-Sent Events (SSE).
• Quản lý trạng thái: RxJS có thể được sử dụng như một giải pháp quản lý trạng thái trong các framework như Angular, React và Vue.js. Observables có thể được sử dụng để đại diện cho trạng thái ứng dụng và các toán tử có thể được sử dụng để biến đổi và cập nhật trạng thái để phản hồi các hành động hoặc sự kiện của người dùng.

RxJS với các Framework phổ biến

Angular:

Angular phụ thuộc rất nhiều vào RxJS để xử lý các hoạt động bất đồng bộ và quản lý các luồng dữ liệu. Dịch vụ HttpClient trong Angular trả về Observables và các toán tử RxJS được sử dụng rộng rãi để biến đổi và lọc dữ liệu trả về từ các yêu cầu API. Cơ chế phát hiện thay đổi của Angular cũng tận dụng RxJS để cập nhật giao diện người dùng một cách hiệu quả để phản hồi các thay đổi dữ liệu.

Ví dụ: Sử dụng RxJS với HttpClient của Angular

```typescript import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https://api.example.com/data'; constructor(private http: HttpClient) { } getData(): Observable { return this.http.get(this.apiUrl).pipe( map(data => data.map(item => ({ ...item, processed: true }))) ); } } ```

React:

Mặc dù React không có hỗ trợ tích hợp sẵn cho RxJS, nó có thể dễ dàng được tích hợp bằng cách sử dụng các thư viện như rxjs-hooks hoặc use-rx. Các thư viện này cung cấp các hook tùy chỉnh cho phép bạn đăng ký Observables và quản lý các đăng ký trong các thành phần React. RxJS có thể được sử dụng trong React để xử lý việc tìm nạp dữ liệu bất đồng bộ, quản lý trạng thái thành phần và xây dựng giao diện người dùng reactive.

Ví dụ: Sử dụng RxJS với React Hooks

```javascript import React, { useState, useEffect } from 'react'; import { Subject } from 'rxjs'; import { scan } from 'rxjs/operators'; function Counter() { const [count, setCount] = useState(0); const increment$ = new Subject(); useEffect(() => { const subscription = increment$.pipe( scan(acc => acc + 1, 0) ).subscribe(setCount); return () => subscription.unsubscribe(); }, []); return (

); } ```

Vue.js:

Vue.js cũng không có tích hợp RxJS gốc, nhưng nó có thể được sử dụng với các thư viện như vue-rx hoặc bằng cách quản lý thủ công các đăng ký trong các thành phần Vue. RxJS có thể được sử dụng trong Vue.js cho các mục đích tương tự như trong React, chẳng hạn như xử lý việc tìm nạp dữ liệu bất đồng bộ và quản lý trạng thái thành phần.

Các phương pháp hay nhất khi sử dụng RxJS

• Hủy đăng ký Observables: Luôn hủy đăng ký Observables khi chúng không còn cần thiết để ngăn chặn rò rỉ bộ nhớ. Sử dụng đối tượng Subscription được trả về bởi phương thức subscribe() để hủy đăng ký.
• Sử dụng phương thức pipe(): Sử dụng phương thức pipe() để xâu chuỗi các toán tử lại với nhau một cách dễ đọc và dễ bảo trì.
• Xử lý lỗi một cách duyên dáng: Sử dụng toán tử catchError() để xử lý lỗi và ngăn chúng lan truyền lên chuỗi Observable.
• Chọn đúng toán tử: Chọn các toán tử phù hợp cho trường hợp sử dụng cụ thể của bạn. RxJS cung cấp một loạt các toán tử, vì vậy điều quan trọng là phải hiểu mục đích và hành vi của chúng.
• Giữ cho Observables đơn giản: Tránh tạo các Observables quá phức tạp. Chia nhỏ các hoạt động phức tạp thành các Observables nhỏ hơn, dễ quản lý hơn.

Các khái niệm RxJS nâng cao

Subjects:

Subjects đóng vai trò vừa là Observables vừa là Observers. Chúng cho phép bạn phát đa hướng dữ liệu đến nhiều người đăng ký và cũng có thể đẩy dữ liệu vào luồng. Có nhiều loại Subjects khác nhau, bao gồm:

• Subject: Một Subject cơ bản phát đa hướng các giá trị cho tất cả những người đăng ký.
• BehaviorSubject: Yêu cầu một giá trị ban đầu và phát ra giá trị hiện tại cho những người đăng ký mới.
• ReplaySubject: Lưu vào bộ đệm một số lượng giá trị được chỉ định và phát lại chúng cho những người đăng ký mới.
• AsyncSubject: Chỉ phát ra giá trị cuối cùng khi Observable hoàn thành.

Schedulers:

Schedulers kiểm soát tính đồng thời của Observables. Chúng cho phép bạn thực thi mã đồng bộ hoặc bất đồng bộ, trên các luồng khác nhau hoặc với độ trễ cụ thể. RxJS cung cấp một số schedulers tích hợp sẵn, bao gồm:

• queueScheduler: Lập lịch các tác vụ sẽ được thực thi trên luồng JavaScript hiện tại, sau ngữ cảnh thực thi hiện tại.
• asapScheduler: Lập lịch các tác vụ sẽ được thực thi trên luồng JavaScript hiện tại, ngay sau ngữ cảnh thực thi hiện tại.
• asyncScheduler: Lập lịch các tác vụ sẽ được thực thi bất đồng bộ, sử dụng setTimeout hoặc setInterval.
• animationFrameScheduler: Lập lịch các tác vụ sẽ được thực thi vào khung hình động tiếp theo.

Kết luận

RxJS là một thư viện mạnh mẽ để xây dựng các ứng dụng reactive trong JavaScript. Bằng cách thành thạo Observables, các toán tử và các mẫu phổ biến, bạn có thể tạo ra các ứng dụng đáp ứng, có khả năng mở rộng và dễ bảo trì hơn. Cho dù bạn đang làm việc với Angular, React, Vue.js hay JavaScript thuần, RxJS có thể cải thiện đáng kể khả năng xử lý các luồng dữ liệu bất đồng bộ và xây dựng các giao diện người dùng phức tạp của bạn.

Hãy đón nhận sức mạnh của lập trình reactive với RxJS và mở ra những khả năng mới cho các ứng dụng JavaScript của bạn!