Vad är reaktiv programmering?

Reaktiv programmering är ett programmeringsparadigm som fokuserar på dataströmmar och förändringspropagering. Istället för att skriva kod som explicit hämtar och bearbetar data steg för steg, beskriver du hur data ska flöda och transformeras över tid. När värden förändras, sprids uppdateringar automatiskt genom din applikation. Tänk på det som ett kalkylblad: när du uppdaterar cell A1, beräknas alla celler som refererar A1 om automatiskt. Detta tillvägagångssätt är särskilt bra för att hantera asynkrona händelser som användarinteraktioner, HTTP‑svar, WebSocket‑meddelanden och timers.

Hur fungerar RxJS?

RxJS (Reactive Extensions for JavaScript) implementerar reaktiv programmering genom Observables — objekt som emitterar värden över tid. De centrala koncepten är:

  1. Observable: En datakälla som emitterar värden (t.ex. en ström av klick‑händelser eller API‑svar)
  2. Observer: En konsument som reagerar på emitterade värden via callbacks (next, error, complete)
  3. Subscription: Förbindelsen mellan en Observable och en Observer
  4. Operators: Funktioner som transformerar, filtrerar, kombinerar eller manipulerar dataströmmar
  5. Subjects: Special‑Observables som fungerar både som datakälla och konsument, vilket möjliggör multicasting

Du skapar datapipelines genom att kedja operators med pipe()‑metoden, vilket transformerar råa strömmar till exakt den datastruktur din applikation behöver.

Verktygsbeskrivning

RxJS Playground är en interaktiv, webbläsarbaserad sandbox för att experimentera med RxJS‑koncept. Skriv och kör RxJS‑kod direkt i editorn med full åtkomst till RxJS‑biblioteket och alla operators. Playgrounden kör din kod automatiskt medan du skriver (med debouncing) och visar konsolutdata i en terminal‑liknande panel. Perfekt för att lära sig RxJS‑koncept, prototypa datatransformationer, felsöka Observable‑pipelines och testa operator‑kombinationer utan att sätta upp en utvecklingsmiljö.

Funktioner

  • Full RxJS‑biblioteksåtkomst: Alla skaparfunktioner (of, from, interval, fromEvent, etc.) och operators tillgängliga
  • Körning i realtid: Koden körs automatiskt med 500 ms debounce när du skriver
  • Terminalutdata: Konsolloggar, fel och varningar visas i en stylad terminal
  • Syntaxmarkering: JavaScript‑kodredigerare med korrekt syntaxmarkering
  • Visning av returvärde: Slutliga uttrycks‑värden loggas automatiskt med pilnotation
  • Felhantering: Klara felmeddelanden för syntax‑ och körningsfel
  • Operators‑modul: Direkt åtkomst till rxjs/operators för pipe‑baserade transformationer

Exempel

Grundläggande Observable‑skapande:

const { of, from, interval } = rxjs;

// Emit individual values
of(1, 2, 3).subscribe((x) => console.log(x));

// Convert array to Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Användning av Operators:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Output: 20, 40

Kombinera Strömmar:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Subjects för Multicasting:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Transformations‑pipeline:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

Tillgängliga Moduler

rxjs (huvudmodul):

  • Skapande: of, from, interval, timer, range, generate, defer, iif
  • Kombination: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Verktyg: firstValueFrom, lastValueFrom, isObservable

operators (pipe‑bara operators):

  • Transformation: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtrering: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Kombination: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Felhantering: catchError, retry, retryWhen
  • Verktyg: tap, delay, timeout, toArray, share, shareReplay

Användningsområden

  • Lära sig RxJS: Förstå Observable‑koncept genom praktisk experimentering
  • Prototypa dataflöden: Designa och testa reaktiva datapipelines innan implementering
  • Felsökning av operators: Isolera och verifiera operators‑beteende med förenklade exempel
  • Intervjuförberedelse: Öva reaktiva programmeringsmönster och vanliga problem
  • Undervisningsdemonstrationer: Visa reaktiva koncept med levande, interaktiva exempel