RxJS

RxJS Marble Operator Playground

Zrozum timing Observable, zanim stanie się reaktywnym błędem. Wpisz mały marble source, przełącz operator i porównaj source oraz output na jednej deterministycznej osi czasu.

  • Input zostaje w przeglądarce
  • Tylko virtual time
  • Kuratorowany subset RxJS

Intuicja operatorów bez pełnego sandboxa

RxJS marble diagrams świetnie tłumaczą strumienie, ale pełny kod reaktywny potrafi ukryć decyzję timingową za schedulerami, subskrypcjami i inner observables. Ten playground trzyma review w małym zakresie: source marble string, jeden operator i wizualny output timeline.

MVP nie wykonuje JavaScriptu użytkownika, nie importuje rxjs/testing do publicznego runtime i nie wysyła marble inputu do backendu. To edukacyjny symulator typowych zachowań operatorów, ze snippetami odwołującymi się do języka prawdziwych testów RxJS.

Porównaj operator w virtual time

Wybierz preset albo wpisz kompaktowy marble string. Evaluator używa frame'ów, nie timerów, więc ten sam input zawsze daje ten sam wynik.

Uruchom operator

Zwykły source stream, w którym każda wartość jest transformowana bez zmiany timingu. Transformuje każdą wartość next. MVP zmienia wartości na uppercase.

Source stream

Znaki
80
Zdarzenia
40
Frame'y
120

Wynik operatora

Uruchom operator, aby zobaczyć source events, output events, diagnostykę i snippet w stylu RxJS.

Jak czytać ten RxJS playground

Najpierw virtual time

Każdy myślnik jest frame'em, a każda wartość jest notyfikacją next. Evaluator nie uruchamia realnych timerów, dlatego wynik jest powtarzalny i nadaje się do review.

Higher-order operators potrzebują kontraktu

mergeMap i switchMap używają tej samej stałej sekwencji inner, więc jedyną zmienną jest zachowanie anulowania. Dzięki temu porównanie jest użyteczne bez udawania pełnej aplikacji.

Użyj przed prawdziwym testem

Output jest wskazówką edukacyjną. Użyj prawdziwego RxJS TestScheduler albo testu aplikacji, gdy ważny jest scheduler, subskrypcje, hot observables albo realne źródła async.

FAQ

Czy to wykonuje mój kod RxJS?

Nie. Playground parsuje ograniczony marble string i uruchamia deterministyczny symulator. Nigdy nie wykonuje JavaScriptu użytkownika.

Czy output jest gwarantowanie taki sam jak w pełnym RxJS?

Nie. To kuratorowany subset edukacyjny dla intuicji operatorów. Do dokładnego zachowania schedulerów i subskrypcji użyj prawdziwych testów RxJS.

Kiedy użyć TestScheduler?

Użyj TestScheduler, gdy produkcyjny kod używa prawdziwych Observable, custom schedulerów, asercji subskrypcji, hot/cold behavior albo złożonych inner streams.

Jaka jest główna różnica między mergeMap i switchMap tutaj?

mergeMap utrzymuje poprzednią pracę inner, a switchMap odrzuca oczekujące zdarzenia inner, gdy pojawi się nowsza wartość source.