Debuguj zdarzenia RxJS za pomocą Redux DevTools

Czasami podczas pracy nad projektem możemy mieć przypadek, gdy chcielibyśmy śledzić zdarzenia RxJs według kolejności bez pisania console.log i usuwania go za każdym razem przed wydaniem PR. Ten blog może być przydatny w poniższych przypadkach:

1 - Zespół odmówił integracji projektu z NgRx/Store || Akita || NgXs podczas początkowej konfiguracji projektu, ponieważ brzmiało to jak „przesada” (typowa reakcja), potem projekt stał się większy zgodnie z oczekiwaniami i zaczynamy, jesteśmy w produkcji i jest późno.
2 - Zaimplementowałeś doskonałe zarządzanie stanem za pomocą RxJs, ale nadal chcesz śledzić kolejność zdarzeń RxJs, aby być bardziej pewnym siebie.

Nasze rozwiązanie powinno spełniać poniższe warunki:

1- Dostępne tylko w trybie deweloperskim

2- Powinien być TreeSakable, aby nie ładował naszej wersji produkcyjnej.

Krok 1 (Utwórz operator debugowania)

Najpierw zaimplementujemy niestandardowy operator debugowania, który będzie śledził zdarzenia RxJs. Wyglądałoby to jak poniżej:

Jeśli nie jesteś cierpliwy, możesz sprawdzić kod lub Live DEMO .

Nie potrzeba szczegółów, po prostu słuchamy zdarzeń NEXT, ERROR i COMPLETE RxjS, a następnie wysyłamy zdarzenie JS, aby mogło być nasłuchiwane przez naszą logikę integracji DevTools, która zostanie omówiona w kroku 2.

Krok 2 (Połącz z Redux DevTools)

Tutaj spróbujemy połączyć się z rozszerzeniem Redux DevTools (jeśli jest dostępne) i wysłuchać naszego zdarzenia operatora niestandardowego. Kod lub DEMO na żywo .

Po przechwyceniu wydarzenia wysyłamy to wydarzenie Redux DevTools.

Krok 3 (zainicjuj nasze narzędzia deweloperskie)

Możemy zainicjować nasze devtools w komponencie aplikacji poprzez:

if (isDevMode()) {
 rxjsDevTools();
}

Kiedy go nie używać?

Kiedy jesteś w początkowej fazie aplikacji. W takim przypadku zalecane jest odpowiednie narzędzie do zarządzania państwem.

Jestem programistą Xtreme Junior Fron End, możesz śledzić na Twitterze .