RxJS - forkJoin, zip, combineLatest, withLatestFrom

原文
RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom

zip - the love birds operator

I call zip operator the love birds operator. Love birds need to always be together. Remember Titanic, the “you jump, I jump” type.

zip 就像 love birds, 成雙成對, 所以結果會成對出現

初始資料

// 0. Import Rxjs operators
import { forkJoin, zip, combineLatest, Subject } from 'rxjs';
import { withLatestFrom, take, first } from 'rxjs/operators';

// 1. Define shirt color and logo options
type Color = 'white' | 'green' | 'red' | 'blue';
type Logo = 'fish' | 'dog' | 'bird' | 'cow';

// 2. Create the two persons - color and logo observables, 
// They will communicate with us later (when we subscribe)
const color$ = new Subject<Color>();
const logo$ = new Subject<Logo>();

// 4. The two persons(observables) are doing their job, picking color and logo
color$.next('white');
logo$.next('fish');

color$.next('green');
logo$.next('dog');

color$.next('red');
logo$.next('bird');

color$.next('blue');

使用 zip

1
2
3

// 3. We are ready to start printing shirt...
zip(color$, logo$)
    .subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));

combineLatest - the go dutch operator

I call combineLatest operator the go dutch operator. They are independent and doesn’t wait for each other, they take care of themselves.

1
2
3

// 3. We are ready to start printing shirt...
combineLatest(color$, logo$)
    .subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));

As mentioned, combineLatest is the go dutch operator - once they meet their mates one time, they will wait for no man. In our case, first function is triggered after both color and logo values change. There onwards, either color or logo value changed will trigger the log.

combineLatest 只要雙方在執行時是不同的值, 就會產生一個新結果

withLatestFrom - the master slave operator

At first, master must meet the slave. After that, the master will take the lead, giving command. The slave will just follow and has no voice. :(

1
2
3

// 3. We are ready to start printing shirt...
color$.pipe(withLatestFrom(logo$))
    .subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));

withLatestFrom 就像是領主(master) 和奴隸(slave) 之間的關係
master 會主導一切
在這裡 color 是 master

當 master 變動時, 會產出結果
但有個例外, 就是剛好這時候還沒有 slave 可以奴役
所以在這例子的一開始, 當 color (master) 是 white 時, 因為沒有 slave, 所以沒有產出結果

color is the master while logo is the slave. At first (only once), color(master) will look for logo(slave). Once the logo(slave) has responded, color(master) will take the lead. Log will get triggered whenever the next color(master) value is changed. The logo(slave) value changes will not trigger the console log.

forkJoin - the final destination operator

1
2
3

// 3. We are ready to start printing shirt...
forkJoin(color$, logo$)
    .subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));

How does forkJoin work?

forkJoin 只會等最後的結果, 在結合

forkJoin is the final destination operator! They are very serious to make sure each other are their final destination. In our code, both color and logo observables are not complete , we can keep pushing value by calling .next - that means they are not serious enough and thus they are not final destination of each other.

1 2	color$.complete(); logo$.complete();

const firstColor$ = color$.pipe(take(1));
const firstLogo$ = logo$.pipe(first());

forkJoin(firstColor$, firstLogo$)
    .subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));

forkJoin should use in (e.g. Angular httpClient.get).

Either forkJoin or zip will work and return same result because api calls are one-time only, auto-completed once result is returned (e.g. Angular httpClient.get).
However, by understanding the operators more, forkJoin might be more suitable in this case. It is because we “seriously” want to wait for all http responses to complete before proceed to the next step. zip is intended for observables with multiple emits. In our case, we expect only one emit for each http request. Therefore, I think forkJoin is more appropriate (oh well, either way, your code will run just fine & return the same result, but it’s good to know right?).

practice

結論 & practice 結果

zip:

love-birds 所以成雙成對, 遇到就成對了, 雙方都要有, 所以最多 4 個答案, log 只有 4 個

white-fish green-cow red-dog white-bird

comboneLatest:

最大排列組合的意思

white-fish white-cow green-cow green-dog red-dog white-dog white-bird blue-bird

withLatestFrom:

以 master 為主, 當下 master 有值, 而且 slave 有值, 就會產生結果

green-cow red-dog white-dog blue-bird

forkjoin:

看最後結果

blue-bird