RxJS Operátorok

map

Egy adatfolyam minden elemét transzformálja és új elemeket generál a megadott transzformációs függvény alapján.

const { interval, fromEvent, from, of } = rxjs;
const {
  map,
  take,
  filter,
  tap,
  mergeMap,
  switchMap,
  catchError,
} = rxjs.operators;


const kattintasokAdatfolyama$ = fromEvent(
  document.getElementById("gomb"),
  "click"
).pipe(
  map(event => event.clientX)
)

kattintasokAdatfolyama$.subscribe({
  next: function (adatCsomag) {
    console.log(adatCsomag);
  },
  error: function (hiba) {
    alert("Hiba történt: " + hiba);
  },
  complete: function () {
    console.log("Adatfolyam lezárva...");
  },
})

take

Egy bizonyos mennyiségű adatcsomag után completed állapotba juttatja a rendszert. Öt kattintás után lefut a complete function és lezárja az adatfolyamot.

const kattintasokAdatfolyama$ = fromEvent(
  document.getElementById("gomb"),
  "click"
).pipe(
  map(event => event.clientX),
  take(5)
)

kattintasokAdatfolyama$.subscribe({
  next: function (adatCsomag) {
    console.log(adatCsomag);
  },
  error: function (hiba) {
    alert("Hiba történt: " + hiba);
  },
  complete: function () {
    console.log("Adatfolyam lezárva...");
  },
})

interval

Számláló – másoddpercenként kiír a console-ra egy növekvő számot.

const szamlalo$ = interval(1000);

szamlalo$.subscribe((adat) => {
    console.log(adat);
})

filter

Csak a páros számokat engedi tovább:

const szamlalo$ = interval(1000).pipe(
  filter(bemenet => bemenet % 2 === 0)
);

szamlalo$.subscribe((adat) => {
    console.log(adat);
})

map segítségével leképezhetjük szöveggé

const szamlalo$ = interval(1000).pipe(
  filter(bemenet => bemenet % 2 === 0),
  map(bemenet => bemenet + " másodperc telt el..."),
);

szamlalo$.subscribe((adat) => {
    console.log(adat);
})

mergeMap

A mergeMap lehetővé teszi az aszinkron események vagy adatok egyesítését egyetlen folyamba, így lehetővé téve a könnyebb kezelhetőséget és a szekvenciális vagy párhuzamos műveletek vezérlését.

const szamlalo$ = interval(1000).pipe(
  filter(bemenet => bemenet % 2 === 0),
  map(bemenet => bemenet + " másodperc telt el..."),
);

const formElkuldve$ = fromEvent(
  document.getElementById("szin-form"),
  "submit"
).pipe(
  tap((event) => {
    event.preventDefault();
  }),
  map(event => event.target.elements.szin.value),
  mergeMap(szin => szamlalo$.pipe(
    map(szoveg => [szin, szoveg])
  ))
)

formElkuldve$.subscribe(([szin, szoveg]) => {
  console.log('%c ' + szoveg, 'color: ' + szin);
})

forkJoin

Egy tömb Observable-t vesz és várakoztatja, amíg mindegyik Observable befejeződik, majd visszaadja az összes értéket egy tömbben.

zip

Az adott Observable-öket összefűzi, és egy új Observable-t hoz létre, amely a bemeneti Observable-ök értékeit párokba rendezi.

tap

Lehetőséget ad az adatfolyam elemeinek megfigyelésére anélkül, hogy befolyásolná azokat, hasznos hibakeresési vagy naplózási célokra.

takeUntil

Egy adatfolyamot vesz és figyeli egy másik vezérlő adatfolyamot, majd megszakítja az eredeti adatfolyamot, amikor a vezérlő adatfolyam első értéket bocsát ki.

Ezek az RxJS fogalmak fontos szerepet játszanak az aszinkron adatfolyamok kezelésében és a funkcionális reaktivitásban, és különböző feladatok megoldására használhatók az RxJS keretrendszerben.

switchMap

Az aktuális Observable áramlását egy másik Observable-re cseréli, és csak az utolsó, legfrissebb Observable eredményét bocsátja ki. A többiről automatikusan leiratkozik.

5 leggyakrabban használt RxJS operátor

Az RxJS, amely a reaktív programozást segíti elő az JavaScriptben, számos operátort tartalmaz, amelyek segítségével könnyebben kezelhetjük és módosíthatjuk az adatfolyamokat. Az 5 leggyakrabban használt operátor változhat projekt- és fejlesztői preferenciától függően, de a következők általánosan elterjedtek:

1. map(): Az adatfolyamon belüli értékek módosítására használt operátor. Minden értéket egy megadott függvény segítségével transzformál.
2. filter(): A feltételek alapján szűri az értékeket az adatfolyamon belül, és csak azokat az értékeket továbbítja, amelyek teljesítik a megadott feltételt.
3. mergeMap() (vagy flatMap()): Az adatfolyamok összefonására használják, amikor egy érték egy másik Observable-t eredményez, és ezen új Observable értékeit akarjuk a kimeneti adatfolyamba integrálni.
4. take(): Meghatározott számú értéket vesz az adatfolyamból és ezután leállítja az előfizetést.
5. catchError(): Az adatfolyamban előforduló hibák kezelésére használják. Lehetővé teszi a hibák elkapását és új értékek visszatérítését vagy más oldalsó hatások végrehajtását.

Ezen túlmenően sok más hasznos operátor is létezik az RxJS-ben, mint például switchMap(), debounceTime(), distinctUntilChanged() és reduce(). Az operátorok kiválasztása gyakran az adott probléma megoldásának igényeitől függ.

const szamlalo$ = interval(1000).pipe(
  filter(bemenet => bemenet % 2 === 0),
  map(bemenet => bemenet + " másodperc telt el..."),
);

const formElkuldve$ = fromEvent(
  document.getElementById("szin-form"),
  "submit"
).pipe(
  tap((event) => {
    event.preventDefault();
  }),
  map(event => event.target.elements.szin.value),
  switchMap(szin => szamlalo$.pipe(
    map(szoveg => [szin, szoveg])
  ))
);


const httpKeres$ = ajax.ajax("https://kodbazis.hu/api/cimek")
.pipe(map(e => e.response));

const click$ = fromEvent(document.getElementById("gomb"), "click")
.pipe(
  mergeMap(() => httpKeres$)
);

click$.subscribe(adat => {
  console.log(adat);
})