RxJS ամբողջական ուղեցույց՝ A-ից Z

RxJS (Reactive Extensions for JavaScript)՝ մի հզոր գրադարան, որը թույլ է տալիս աշխատել ասինխրոն հոսքերի (streams) հետ՝ ֆունկցիոնալ ծրագրավորման ոճով։ Այն օգտագործվում է հիմնականում Observables-ի միջոցով տվյալքի հոսքը վերահսկելու և ձևափոխելու համար։

RxJS-ը լայնորեն օգտագործվում է Angular-ի մեջ, բայց օգտակար է նաև Vanilla JS, React կամ ցանկացած JavaScript ծրագիրում, երբ գործ ունենք ասինխրոն տվյալների հետ (օր.՝ WebSocket, HTTP հարցումներ, UI իրադարձություններ):

---

A. Observable — Տվյալների հոսք

Observable – RxJS-ի հիմքն է։ Դա օբյեկտ է, որը ներկայացնում է ասինխրոն տվյալների հոսք։ Դու կարող ես «բաժանորդագրվել» այդ հոսքին և ստանալ փոփոխվող տվյալները։

 import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next('Hello');
subscriber.next('RxJS');
subscriber.complete();
});

observable.subscribe({
next(value) { console.log(value); },
complete() { console.log('Done'); }
});

• next()՝ ուղարկում է տվյալ
• complete()՝ ավարտում է հոսքը

---

B. Observer — Բաժանորդագրվողը

Observer – օբյեկտ է, որը ունի next, error և complete մեթոդներ։ Դու դա փոխանցում ես subscribe()-ին՝ Observable-ից արժեք ստանալու համար։

 const observer = { next: x => console.log('Got value:', x), error: err => console.error('Error:', err), complete: () => console.log('Completed') };
observable.subscribe(observer);

---

C. Operators — Օպերատորներ

RxJS-ում ամենահզոր տարրերը **օպերատորներն** են։ Դրանք ֆունկցիաներ են, որոնք վերցնում են Observable և վերադարձնում են նորը։ Օրինակ՝ map, filter, mergeMap, switchMap, debounceTime, take և այլն։

 import { of } from 'rxjs'; import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
.pipe(
filter(x => x % 2 === 0),
map(x => x * 10)
)
.subscribe(console.log);

Արդյունք. 20, 40

---

D. Subject — Observable + Observer

Subject միաժամանակ և Observable է, և Observer։ Կարող ես next() անել նրա վրա, և այն փոխանցում է արժեքը բոլոր բաժանորդներին։

 import { Subject } from 'rxjs';
const subject = new Subject();

subject.subscribe(x => console.log('First:', x));
subject.subscribe(x => console.log('Second:', x));

subject.next('Hello Subjects!');

Երկու բաժանորդները կստանան նույն արժեքը:

---

E. BehaviorSubject — պահպանում է վերջին արժեքը

 import { BehaviorSubject } from 'rxjs';
const behavior = new BehaviorSubject('Initial');

behavior.subscribe(val => console.log('A:', val));
behavior.next('Next Value');
behavior.subscribe(val => console.log('B:', val));

Երկրորդ բաժանորդը կստանա նաև վերջին արժեքը:

---

F. ReplaySubject — պահում է նախորդ արժեքները

 import { ReplaySubject } from 'rxjs';
const replay = new ReplaySubject(2); // պահի վերջին 2 արժեքը

replay.next(1);
replay.next(2);
replay.next(3);

replay.subscribe(val => console.log('Subscriber got:', val));

Կստանա՝ 2 և 3

---

G. switchMap, mergeMap, concatMap

Օգտագործվում են nested Observable-ների դեպքում (օրինակ՝ HTTP request):

• switchMap – դադարեցնում է նախորդ հոսքը ու սկսում նորը
• mergeMap – միավորում է բոլոր հոսքերը
• concatMap – հերթով կատարում է բոլոր հոսքերը

 import { fromEvent, switchMap, interval } from 'rxjs';
fromEvent(document, 'click')
.pipe(
switchMap(() => interval(1000))
)
.subscribe(console.log);

Միայն վերջին click-ից հետո սկսված հոսքը կապահովի արժեքներ:

---

H. debounceTime և throttleTime

Օգտագործվում են input typing-ի կամ արագ իրադարձությունների կարգավորման համար։

 import { fromEvent } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators';
fromEvent(inputElement, 'input')
.pipe(
debounceTime(300),
map(e => e.target.value)
)
.subscribe(console.log);

Սպասում է 300մս, մինչև վերջին input-ը:

---

I. Error Handling — catchError

 import { of, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators';
throwError(() => new Error('Oops'))
.pipe(
catchError(err => {
console.error('Caught:', err.message);
return of('Fallback value');
})
)
.subscribe(console.log);

---

J. Finalize — երբ Observable-ը ավարտվում է

 import { of } from 'rxjs'; import { finalize } from 'rxjs/operators';
of(1, 2, 3)
.pipe(finalize(() => console.log('Finished')))
.subscribe(console.log);

---

K. Custom Operator

Դու կարող ես գրել քո սեփական օպերատորը՝ օգտագործելով `pipe` և `lift` մեթոդները կամ պարզապես բարձր մակարդակի ֆունկցիա՝ Observable վերադարձնող։