RxJS Toàn Tập (P4 Transformation Operator RxJS – map, mergeMap, switchMap, concatMap)

Ở bài viết này mình sẽ hướng dẫn các bạn phân biệt cách sử dụng, khi nào thì cần sử dụng theo cách đơn giản nhất, không quá hàn lâm này nọ 🙂

map

Cái này đơn giản nhất, giống như là khi mình sài map của mảng trong Javascript. Trong mảng thì nó chuyển đổi các phần tử trong mảng thành một phần tử khác tương ứng. Xét ví dụ, chuyển đổi mảng có 3 phần tử [1, 2, 3], thành mảng mới với các phần tử được nhân đôi lên.

const dataSource = [1, 2, 3];

dataSource = dataSource.map( item => item * 2);

// Kết quả sẽ ta sẽ có một mảng mới [2, 4, 6]

Cũng ví dụ này, khi sử dụng RxJS

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'

const source$ = Observable.from(1,2,3);
const doubleSource$ = source$.pipe(
	map(val => val * 2)
);

doubleSource$.subcrible(val => console.log);

còn trong RxJS thì nó chuyển đổi các giá trị được phát ra từ Observable nguồn ra phần tử tương ứng khác (có thể là 1 Observable khác)

mergeMap (alias flatMap)

Sử dụng mergeMap  là kết hợp của toán tử chuyển đổi map, và mergeAll. Xét ví dụ dưới để hiểu rõ hơn.

Ở ví dụ trên, Observable source là

Observable inner là

Kết quả của mergeMap Làm sao ta lại có kết quả như trên, để biết được ta theo dõi từng bước sau

• Cú pháp
• Phân tích

Cú pháp

mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable Nhìn thì có vẻ hơi khó hiểu, nhưng bạn đừng quan tâm, cứ hiểu như vầy thôi + project là observable mà ta cần merge với observable ban đầu (1 observable) + resultSelector: cái này là cái  bộ chọn bạn cần lấy ra. + concurrent: số lượng quan sát đầu vào tối đa được đăng ký đồng thời. Mặc định là Number.POSITIVE_INFINITY Nếu không có tham số resultSelector này thì khi sử dụng mergeMap nó chỉ làm cho ta cái nhiệm vụ là ứng với mổi giá trị phát ra từ observable source thì sẽ gọi đến observable inner. Nghĩa là observable nguồn sẽ phát ra 3 lần là các giá trị A, B và C. ứng với mổi lần vậy thì nó sẽ trả về observable inner 1, 2, 3. Theo dõi hình bên dưới

Phân tích

Làm sao để từ observable source (1) và đích (2), ta ra được kết quả (3) như hình bên dưới

Đầu tiên, giá trị A ở observable source được emit ra, phát sinh ra 1 observable innner, tiếp đến B và C A: a, b, c B: a, b, c C: a, b, c

Kết quả mergeMap là sau khi các observable inner được tạo trả từ observable inner, kết quả sau đó được làm phẳng (flatten), ta được kết quả như hình trên

Tham khảo thêm: mergeMap