Depurar eventos de RxJS con Redux DevTools

A veces, mientras trabajamos en un proyecto, es posible que tengamos un caso en el que nos gustaría realizar un seguimiento de los eventos de RxJs por orden sin escribir console.log y eliminarlo cada vez antes de publicar PR. Este blog puede ser útil en los siguientes casos:

1 - El equipo se negó a integrar el proyecto con NgRx / Store || Akita || NgX durante la configuración inicial del proyecto porque sonaba como 'exagerado' (reacción típica), entonces el proyecto se hizo más grande como se esperaba y aquí vamos, estamos en producción y es tarde.
2 - Implementó una administración de estado perfecta con RxJs pero aún desea rastrear el orden de los eventos de RxJs para tener más confianza.

Nuestra solución debe cumplir las siguientes condiciones:

1- Disponible solo en modo Dev

2- Debe ser TreeShakable para que no cargue nuestra compilación de producción.

Paso 1 (Crear operador de depuración)

Primero, implementaremos un operador de depuración personalizado que espiaría los eventos de RxJ. Se vería a continuación:

Si no es paciente, puede verificar el código o la DEMO en vivo .

No es necesario dar detalles, solo escuchamos los eventos NEXT, ERROR y COMPLETE de RxjS, luego enviamos el evento JS para que pueda ser escuchado por nuestra lógica de integración DevTools que se tratará en el Paso 2.

Paso 2 (Conéctese a Redux DevTools)

Aquí intentaremos conectarnos a la extensión Redux DevTools (si está disponible) y escuchar nuestro evento de operador personalizado. Código o DEMO en vivo .

Después de capturar el evento, enviamos este evento Redux DevTools.

Paso 3 (inicialice nuestras herramientas de desarrollo)

Podemos inicializar nuestras devtools en el componente de la aplicación de la siguiente manera:

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

¿Cuándo no usarlo?

Cuando se encuentra en la fase inicial de la aplicación. En este caso, se recomienda una herramienta de gestión de estado adecuada.

Soy desarrollador de Xtreme Junior Fron End, puedes seguirlo en Twitter .