Domina RxJS 6 sin derramar una gota de sudor

1. Introducción al curso: Hola, aquí Maurice. Bienvenido a esta clase sobre dominar los RXJS 6 sin sudar. Entonces, ¿qué vamos a echar un vistazo en este curso? Bueno, vamos a empezar con qué problema está tratando de resolver RxJS y luego vamos a echar un vistazo a los RxJS y programación reactiva y cómo eso realmente intenta resolver el problema. Vamos a echar un vistazo a los observables, uno de los principales bloques de construcción de RxJS. Echaremos un vistazo a lo que son, diferentes formas de crearlos, crear tus propios observables personalizados, usar temas que son una forma de crear observables y veremos la diferencia entre caliente y frío observables. Por supuesto, vamos a buscar a los operadores. Sin operadores RxJS no sería tan útil. Entonces vamos a echar un vistazo al objetivo de los operadores, cómo podemos visualizarlos usando RxJS Mármoles. Vamos a echar un vistazo a muchos de los operadores existentes, no todos ellos, son demasiados, y vamos a echar un vistazo a la construcción de operadores personalizados para RxJS. Vamos a echar un vistazo al manejo de errores y cómo podría potencialmente reintentar operaciones fallidas y por supuesto, vamos a echar un vistazo a la unidad probando sus observables y sus operadores. Por último, vamos a echar un vistazo a una serie de escenarios diferentes donde los RxJS podrían tener mucho sentido. Cosas como buscar una solicitud de la web de manera periódica, manejar errores si falla una solicitud, volver a intentarla, y cosas por el estilo. Nos vemos en el siguiente video. 2. Introducción personal: Hola Maurice aquí, y bienvenido vuelve a este curso sobre dominar los RXJs 6 sin sudar. En este video, vamos a hacer una breve introducción personal, para que sepas quién soy. Mi nombre es Maurice de Beijer, y soy desarrollador de software independiente y formador. Vivo en Holanda, hermoso lugar, sobre todo en primavera, con un montón de hermosas flores como estos tulipanes. Tenemos unas playas hermosas, esta es Scheveningen, y tenemos nuestro hermoso molino de viento, especialmente en la puesta de sol así. Todas estas fotos fueron tomadas a menos de 20 kilómetros de donde vivo. También estoy felizmente casado con una esposa y un hijo. Soy desarrollador e instructor de software independiente desde 1995. De hecho, mis días de desarrollador van más allá que eso, pero fue entonces cuando me hice independiente, así que hace bastante tiempo. La mayor parte del profesional más valioso de Microsoft, un MVP, un premio anual que me han dado 14 veces seguidas ahora. Publico un Newsletter de React si estás interesado en desarrollos de React. Consulta las notas para un enlace. Nos vemos en siguiente video. 3. El problema: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Master RXJS 6 Sin Romper un Sudor. ¿ Cuál es el problema con el código tradicional? Vamos a sumergirnos en algún código, y echemos un vistazo. Tengo una pequeña aplicación de muestra aquí con un par de botones. La mayoría de ellos aún no hacen nada, sólo el Botón Borrar lo hace. Echemos un vistazo a los códigos. Vamos a hacer más o menos la misma acción con algunos artículos diferentes aquí. Vamos a empezar con algunos números. Vamos a añadir un oyente de eventos al botón. Entonces vamos a transformar los números en una forma diferente. vamos a filtrar, y vamos a poner los resultados en pantalla. Primera regla, utilice el operador de mapa en una matriz para cambiar a forma de solo un número a un objeto con una propiedad x, que contiene el número. Entonces usaremos el operador de filtro en una matriz para solo devolver los objetos que tienen un valor x que es menor que siete. Eso debería devolver una nueva matriz. Lo llamaremos datos. Ahora pongamos eso en la pantalla para que podamos ver el resultado. Ahí está la matriz resultante de objetos con un valor. Bastante simple. Hagamos lo mismo usando un intervalo basado en el tiempo. Nuevamente, añadiremos un manejador de clics al botón de intervalo. Esta vez en realidad voy a usar funciones de flechas gordas porque son más cortas. Aquí no hay beneficio técnico, sólo un poco más corto. Empezaremos un intervalo establecido, y dispararemos a cada segundo. En el interior, queremos incrementar un número, por lo que tenemos que guardar eso fuera de esta función de intervalo para que podamos incrementarlo y recordar el valor. Necesitaremos una matriz para empujar los números. En primer lugar, vamos a crear un nuevo objeto con la propiedad x que contiene el número. Nuevamente, al igual que antes, incrementaremos el número. Por supuesto, necesitamos filtrar. Vamos a filtrar para que el número sea menor a siete. Por supuesto, queremos asegurarnos de que nuestro intervalo se detenga de lo contrario, seguirá funcionando indefinidamente. Guardemos el mango y usemos el intervalo claro para que deje de funcionar de nuevo. Todavía necesitamos mostrar los resultados en pantalla. Por supuesto, todavía necesitamos empujar el objeto en la matriz. Ahora bien, si hago clic en el botón de intervalo, deberíamos ver que los números aparecen uno cada segundo. Ahí están. Objetos con los números menores a siete. Estamos logrando el mismo objetivo, pero el go es bastante diferente. Echemos un vistazo a la solicitud del Ajax. Voy a ir a URL a Ajax API endpoint, y eso va a devolver una broma, y usaremos la longitud de la broma como el número. Empezaremos con la solicitud de búsqueda. Fetch en la URL. Entonces tenemos que resolver a usar un manejador de abajo que nos dará la respuesta. Voy a mantener las cosas simples. Simplemente vamos a asumir que todo funciona y voy a llamar a una función json sin comprobar. Eso debería darnos los datos. El dato tendrá un valor, que tendrá la broma. Tomaremos la longitud de la broma. Una vez que tenemos el objeto, aún necesitamos filtrarlo y ponerlo en pantalla si pasa el filtro. En realidad usaré un valor de 75 aquí porque la mayoría de los chistes serán más largos que siete personajes, probablemente cada uno de ellos. Veamos si funciona el botón de solicitud Ajax. Vemos una broma de 40 personajes de largo y uno 73 y otro 54. Pero a veces, cuando hago clic a la interfaz de usuario, no se actualiza, porque vamos a conseguir una broma que tiene más de 75 caracteres. Hemos visto tres estilos de codificación diferentes. Hicimos un enfoque funcional con la matriz. Hicimos un enfoque asíncrono con el fetch, y también hicimos otro enfoque asíncrono usando intervalo establecido. Todos son API muy diferentes, completamente diferentes. Por lo general, es una mezcla de códigos funcionales y códigos imperativos. Pero todo eso está ligado a eventos, como si estuviéramos esperando nuestro click de botón y luego haciendo algo, y todo es API muy diferentes. Nos vemos en el siguiente video cuando echaremos un vistazo a cómo RxJS simplificarán esto en una sola API. 4. La solución: Hola, aquí Maurice. Bienvenido de nuevo a este curso para Master RXJS 6 sin sudar. En este video, vamos a echar un vistazo al código que hicimos en un video anterior, pero luego hacerlo más simple y conciso, usando RxJS. Vamos a sumergirnos justo en el código. El primero que tenemos que hacer es instalar RxJS, vamos a hacer un npm-install RxJS. Eso es RXJS instalado. Reiniciemos la aplicación y empecemos a usar RxJS. Aquí tenemos la aplicación. Entonces lo primero que tenemos que hacer, es importar algún código de RxJS. Empecemos con el Array. Para el Array, tenemos un conjunto estático de datos, por lo que necesitamos importar la función desde RCS. Eso nos permitirá convertir un array estático de datos en un observable. Vamos a teclear cabra en el manejador de eventos. Empiezo a trabajar en el carbón desde falso en el array de números, que gira no sintonizó observable y luego obtenemos el valor perdiendo para suscribir función. Suscríbase y le agreguemos el manejador, que será llamado para nuestros datos. Aquí solo vamos a mostrar los datos, entonces, ¿qué va a pasar? Esto va a convertir cada número individual en un evento. El contenido de texto sobre el resultado se actualizará diez veces y veremos el último ítem. Ahí vemos que 10 siendo exhibidos. Queremos poder manipular los datos entre crear tu observable en suscripción. Podemos hacer eso llamando a la función de tubería y deteniendo a los operadores RxJS en esa tubería. Vamos a importar algunos operadores. El primer operador importará es mapear porque queremos cambiar el número en un objeto con una X. Llamamos a mapa dentro de la función de tubería, y tomamos el número que entra y lo convertimos en un objeto con una propiedad X, al igual que teníamos antes. Vemos que obtenemos un objeto con el valor perdido de 10. Todavía necesitamos convertir esto en una matriz con todo el valor y filtro. Usaremos el filtro y el operador de escaneo para hacer eso. Los importaremos. Volver a la tubería después de que el mapeo en la tubería hará para filtrar. Al igual que antes filtramos en la propiedad x siendo más pequeña que siete. Entonces usaremos un operador de escaneo para convertir elementos individuales en una colección de elementos, se convertirá son los eventos separados en una matriz de eventos. El escaneado obtiene dos parámetros, emitiendo el valor anterior en el valor actual. Por lo que el anterior será una matriz, por lo que acabaremos de devolver una nueva matriz concatenando el valor actual a ella. diremos que empiece con una matriz vacía. Ahí lo tenemos. Una matriz con números desde cero hasta seis, todo menor que siete. Hagamos lo mismo con el intervalo, importaremos una nueva función de RxJS para iniciar un intervalo que es intervalo de oro, fácil. Reemplazaremos el cuerpo del manejador de clic de botón de intervalo para usar la función de intervalo de RxJS. De nuevo activará un evento cada segundo. Copiemos todo el código de abajo, toda la tubería con el operador. Ahí vemos el intervalo disparando, imprimiendo todos los números de cero a seis en los objetos. Ahora en este caso, el intervalo en realidad no se detiene todavía. Sigue disparando, pero no emitirá más eventos. Eso lo arreglaremos en otro video. Vamos a hacer el mismo ancho, la solicitud AJAX. Importaremos los objetos AJAX de RXJS/ AJAX. Usaremos eso para sacar el Json de la API de Chuck Norris. Usando Ajax.getJSON, obtenemos un observable con la solicitud AJAX o una respuesta, debo decir, que entrará en el código existente. De nuevo, copiaré el código que teníamos antes. Ahora el resultado es ligeramente diferente, así que sí tengo que hacer otra función de mapa, básicamente mapeada ligada de dos broma para devaluar. En este caso, sólo tener la longitud es lo suficientemente bueno porque ya lo estoy mapeando a un objeto en la línea de abajo. Cambiemos el valor del filtro de 70-75 porque son muy pocos, si hay chistes que son menos de siete caracteres. Ahí vemos funcionando la solicitud AJAX. Los tres eventos se hacen con casi el mismo código. Apenas a petición AJAX es ligeramente diferente por los datos y la longitud del filtro. Pero aparte de eso es idéntico. Todo es cuestión de funciones realmente, realmente simples. Pero en realidad podemos llevar esto un paso más allá, porque el manejador de eventos en los botones también puede ser observables. Cambiemos el evento de la firma de afinación. Podemos convertir los eventos DOM en un observable. Pasamos por abajo, y pasamos en los eventos. Nos interesa el evento click en este caso, tenemos un stream observable off clicks, podemos canalizar, eso es un uso de otro operador para cambiar de mapa. En realidad podemos convertir eso en un flujo de eventos diferente. Estamos cambiando de una secuencia de eventos a otra secuencia de eventos, que mapean desde los eventos de clic originales a los eventos AJAX. Ahí hay evento AJAX sigue disparando. Hagamos lo mismo para el intervalo y el botón de matriz de números. El intervalo está funcionando, deja claro, reinicia y veremos que la matriz también funciona. Solo estamos usando una API para eventos DOM, para buscar datos asincrónicos, para trabajar con un intervalo y trabajar con una matriz estática de datos, lo cual creo que es realmente ordenado. Simplemente aprende una API y estás bien para ir. Por lo que hemos visto que ArcGIS crea observables que producen eventos a lo largo del tiempo. Un evento click, fetch events, completado, un evento de intervalo, cualquier cosa por el estilo. Los eventos pueden disparar tantas veces como quieran. Podría tener un observable con cero eventos, podría tener uno con cientos de eventos. Hemos visto operadores donde podemos manipular esos eventos, cadenas y cambiar eventos o filtrar eventos o cosas nuevas con ellos. Al ver que esos operadores están muy enfocados, hacen una tarea que lo hace bien. Eso significa que tenemos funciones realmente simples que son fáciles probar por unidad y fáciles de combinar en algo más complejo. Hemos visto que podemos empezar con una sola cadena, un evento de clic, y luego convertirlo en una serie de otros eventos, lo cual es realmente bonito. Nos vemos en el siguiente video. 5. Aprovechar el máximo de este curso: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video, vamos a hablar brevemente de cómo puedes sacar el máximo provecho de este curso. Hay muchos videos, y una forma en que podrías empezar es simplemente mirarlos de principio a fin. No hay problema, puedes hacerlo si quieres. Pero si estás más interesado en casos de uso específicos para RxJS, es posible que quieras comenzar con la sección de escenarios. Allí describo varios casos de uso como una aplicación incremental de búsqueda o dibujo, y puedes mirar esos y decidir en qué videos te interesan. Entonces podría cambiar a operadores específicos. Por otra parte, podría que ya estés usando RxJS, por lo que podría interesarte operadores específicos o formas específicas de crear observables. Podrás ir directamente a estos videos. De cualquier manera, puedes obtener mucha información de estos videos. Ahora, voy a estar escribiendo muchos códigos. Cada vez que ves emergente a este tipo, no soy yo, pero uso esta diapositiva, entonces voy a escribir mucho código de muestra. Todo ese código de muestra está arriba en GitHub. Si quieres usarlo, y te recomiendo encarecidamente hacer, ve a GitHub y clonalo desde ahí. Este es el repositorio Explore. Mi nombre de usuario de GitHub es Mauricedb, y repositorio se llama master-rxjs-6-sin-breaking-a-sweat. Si quieres clonar esto, desplázate un poco hacia abajo, haz click en “Clonar o Descargar”. Si eres usuario de Git, solo tienes que copiar la URL aquí. Si no lo estás, ve a Descargar ZIP y descarga el código de esa manera. Sólo voy a copiar la URL. En la ventana de la consola, voy a clonar, git clonar y pegar en la URL y pulsar “Enter”. Esto descarga rápidamente el repositorio completo en una nueva carpeta. Ahora, si cd en esa carpeta, si ahora ejecutas npm install, instalará todos los paquetes npm requeridos, por lo que en realidad puedes ejecutar todo el código. Ahora, ahí hay una desagradable advertencia de seguridad. No te preocupes por eso. Eso no es de RxJS, en realidad son los resultados de un paquete de números primos que estoy usando, y eso tiene una dependencia de probabilidades lo que provoca el error. Si no estás usando eso, solo usando RxJS o Parcial que estoy usando para compilar y agrupar todo el código, va a estar bien, no verás ese mismo error. Ahí estamos. Echaremos un vistazo al código en un momento. Ahora bien, si te encuentras con algún problema con el curso o ejemplos, comprobar el código fuente es más o menos una primera. Compara tu código con mi código y tal vez encuentres una diferencia. Si necesitas saber más sobre uno de los operadores o formas de crear observables, la documentación de RxJS también es bastante buena. Este es el sitio web de RxJS, en rxjs. Es bastante bonito, y la sección de referencia es bastante buena. Se pueden ver todos los diferentes operadores de RxJS y formas de crear observables aquí, o con un bonito filtro. El sitio web reactivex.io también es bastante aseado. Contiene más información. Si voy aquí a los operadores, se puede ver mucha información sobre los operadores. Algo que es realmente bonito es el árbol de decisiones para decidir qué operador o función para crear un nuevo observable que realmente quieres. No sólo sobre RxJS, sino sobre toda la familia ReactiveX, sino muy recomendable. Por supuesto, puedes hacer preguntas en la sección de preguntas y respuestas y las responderé. Pero tal vez no sólo yo. Te recomiendo encarecidamente que respondas a nuestras preguntas también. No es porque no quiera contestar, pero pensar en una respuesta es en realidad una gran herramienta de aprendizaje. Una de las razones por las que me metí en enseñar sobre el desarrollo de software fue porque quería aprender más al respecto. La mejor manera de asegurarte de que conoces mayoría de las cosas de la tecnología si puedes explicárselo a los demás. Ahora, te recomiendo encarecidamente que practiques todo el código. Ver videos es ordenado, pero codificarlo en realidad es mucho, mucho mejor aprenderlo, así que codifica las cosas. He creado una pequeña plantilla de iniciación. Si abro el proyecto usando Visual Studio Code, mi editor de elección, puedes ver muchas carpetas aquí para todos los diferentes proyectos. Todavía no está ahí, pero lo añadiré antes de que este curso se ponga en marcha. Habrá una carpeta llamada 000-template. Esa es la placa de caldera que uso para todos estos. Tiene un pequeño botón de Inicio. Tiene cosas más importantes sobre trabajar con partial-js ahí dentro. Ese es un gran lugar de partida. Si desea ejecutar esto, en realidad necesita Nodo y NPM instalados. Tengo instalado Node. El modo en que puedo comprobar es ejecutar nodos dash version con un solo V. Entonces puedes ver que estoy en el Node 8.12, que en realidad está un poco desactualizado, pero eso está bien. Eso va a funcionar muy bien. Si necesitas instalar Nodes, ve al Sitio Web Node.js y aquí puedes descargar la última versión. Te recomiendo usar la versión LTS, la versión de Soporte a Largo Plazo, esa suele ser la mejor. Ya ves que estoy un poco desactualizado, pero eso en realidad no es problema. Ahora, generalmente cuando instalas Node, obtienes NPM gratis. Hay algunas distros donde no lo haces, pero normalmente eso está incluido. Se puede comprobar ejecutando la versión de npm dash dash, y luego se puede ver que estoy en NPM 6.4.1. Ambos son necesarios para ejecutar las cosas. También necesitas un navegador. Todos los ejemplos se ejecutan en un navegador. Yo uso Chrome, pero otro navegador moderno razonable como Safari, Firefox, Arch, todos van a funcionar bien. De verdad depende de ti. Necesitarás algún editor de código. Yo uso Visual Studio Code, pero realmente depende de ti. Se quiere usar Sublime, Bloc de notas plus, Visual Studio, WebStorm, realmente no importa. Visual Studio Code es realmente genial, por lo que es muy recomendable. Pero todos los demás también funcionarán. Ahora todas las muestras están en carpetas numeradas. Básicamente, las 100 carpetas son la intro. Las series 200 son todo sobre la creación de observables. Las series 300 son todo sobre operadores y las series 400 son todo sobre diferentes escenarios. Puedes ejecutarlos todos de la misma manera. Básicamente, bien escribir número para lo que sea que te interese. Supongamos que queremos ejecutar la búsqueda incremental, esa es la carpeta 403. Lo que hacemos es hacer un arranque de carrera npm: 403. Eso inicia un pequeño servidor web y compila ese ejemplo y lo hace listo para ejecutarse en el navegador. En el navegador, puedes abrir eso en el puerto localhost 1234. Vemos paquete parcial la aplicación e iniciamos un servidor en el puerto localhost 1234. Vamos a copiar eso. Una vez hecho, podemos ir al navegador, abrir una nueva pestaña, ir al puerto localhost 1234, y vemos la aplicación. Ahora esto buscará en realidad usuarios de GitHub. Si busco Maurice, veo a mi propio usuario como el segundo, todos los ejemplos funcionan de manera similar. En algunos casos, necesitarás abrir las herramientas de desarrollo porque sentencias console.log se utilizan para generar cosas en las herramientas de desarrollo, y en la mayoría de los casos, también verás mucha salida en esta pantalla normal. Si comienzas a editar cosas, parcial es realmente agradable. Si realizas un pequeño cambio, parcial recompilará automáticamente los códigos y actualizará el navegador, por lo que no es necesario presionar “F5" en el navegador la mayor parte del tiempo. Por lo general sólo funciona. Ocasionalmente, si alguna vez tuviste un error de sintaxis, parcial podría no poder actualizar el navegador, podría estar roto. Pero por lo general, eso funcionará automáticamente. Nos vemos en el siguiente video. 6. Bocas de RxJS: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video vamos a hablar de los principales bloques de construcción de RxJS. Aquí tenemos un bonito diagrama con los principales bloques de construcción. En realidad tomé esto del sitio web de ReactiveX, que es bastante limpio para echarle un vistazo. Aquí tienes a la página web ReactiveX y si vas a Docs Observables, encontrarás ese mismo diagrama ahí. Este sitio web es genial porque tiene mucha documentación, lo visitará de nuevo más tarde. Pero también nos mostrará todos los diferentes idiomas. Aquí hay bastantes. Pero si haces click en Otros, verás lista más larga. Conocer RxJS se traducirá bien a otros idiomas, lo cual siempre es agradable con la tecnología. Pero más sobre este diagrama. Para arriba se ve una línea de tiempo una cronología Observable. Las pequeñas formas en la parte superior de ella son eventos que se emiten a lo largo del tiempo. El pequeño renglón al final es el observable siendo cerrado. Después de eso, no se van a emitir más eventos. El flip aquí es un operador. Los operadores tienen la oportunidad de operar en todos los eventos que se emiten. En este caso, sólo les da la vuelta. Un observable es una colección o cero o más eventos a lo largo del tiempo. Los observables se pueden abrir o cerrar. Mientras estén abiertos, pueden emitir eventos, pero maravilla cerrar ya no pueden hacer eso, y pueden estar cerca por el cierre exitoso o por un error. Se trata de los sitios de RxJS Mármoles, que es un sitios realmente agradables para ver cómo funcionan las cosas. En realidad clonarlo y lo voy a usar para demo algunos de los ejemplos. Aquí tenemos cronología. Aquí hay una línea de tiempo vacía. No se emitirán eventos. Pero en una pequeña barra vertical a la derecha se puede ver donde se detiene el tiempo y lo observable está cerca. Aquí hay un intervalo. Probablemente el observable por excelencia, emite un evento cada tanto, en este caso, cada 20 milisegundos. Ahora, la pequeña línea al frente sugiere que es el extremo más cercano, pero no lo hace, solo sigue yendo para siempre. observables son sólo un largo tramo de eventos a lo largo del tiempo. Observables no serían mucho buenos si nadie los está observando. Tenemos un observador y el observado se suscribe a uno observable y es notificado de todos los eventos emitidos. Puede hacer lo que queramos hacer con él. En el ejemplo que voy a hacer, sólo voy a mostrarlos. También contamos con operadores. Los operadores son lo que realmente hace interesante a los RxJS. Los operadores pueden hacer todas las cosas. Al igual que aquí tengo el operador de filtros que filtra los valores antiguos. No toma prestado cero, dos o cuatro porque están parejos, sólo pasa sobre uno y tres a los objetivos observables. En este caso, vemos que la fuente y el objetivo observable, el de arriba y el de abajo tienen el mismo lapso de vida. Otro operador es tomar tres. Simplemente toma los tres primeros eventos que se emiten desde la fuente observable emite los en el objetivo observable y cuando se encuentra tres eventos se cierra. El origen emite 0, 1, 2, 3 y 4, pero en el objetivo sólo tenemos 0, 1, 2 y lo observable está cerrado. Los operadores suelen ser funciones realmente simples, puras, lo que los hace fáciles de escribir. El verdadero poder viene de combinarlos. Combina montones de diferentes operadores para lograr el efecto deseado. Cuando nos suscribimos a un observable, obtenemos un objeto de suscripción. En ocasiones no lo necesitas pero la suscripción puede ser útil si quieres darte de baja a un observable. Darse de baja impedirá que el observable emita más eventos. Vamos a sumergirnos en algunos códigos. Ahora, tal vez te estés preguntando por qué no estoy usando esas canicas de Rx, que acabo de mostrar para demostrar el código. El motivo es porque está basado en RxJS 5, y se pueden ver los códigos. Aquí está la sintaxis RxJS 6, bastante diferente. Nos estamos centrando en RxJS 6. No vamos a usar canicas de Rx para demostrar. Solo voy a usar un proyecto personalizado como este. El primero que tenemos que hacer es importar de RxJS. El que necesitamos importar en este caso es el intervalo porque voy a utilizar el observable por excelencia, emitiendo un evento cada segundo. Vamos a definir la variable stream para sostener todos los eventos observables y una convención. El convenio de nomenclatura que se utiliza con frecuencia es postfix variables que sostienen flujos observables con un dólar. No tienes que hacerlo, pero muestra por lo que es. Stream dollar es nuestra corriente observable emitiendo un evento cada segundo. Necesitamos un observador que escuche ese arroyo. El observador que voy a usar es un objeto que tiene una siguiente función y esa siguiente función va a ser código con cada evento que se emita. En este caso, es una función normal y E es el evento que se emite. Simplemente lo voy a mostrar en un poco de elementos div. Usando el stream puedo suscribirme posiblemente al observador y esto me devolverá un objeto de suscripción, que puedo usar para darse de baja más adelante si quisiera. Si presiono el botón de inicio, activará el intervalo observable y ahí vemos segundo ticking por. Añadamos un operador. Nuevamente, utilizamos una importación, pero esta vez utilizamos una importación de operadores RxJS. A los operadores se les importa de una parte ligeramente diferente del paquete. Vamos a importar el filtro y el operador de toma para lograr el mismo efecto que tuve en el diagrama de mármol Rx. La gran diferencia con RxJS 6 se utiliza operador de tubería para filtros con RxJS 5 que aún no existían. Yo uso tubería y especifico el primer operador ahí, el filtro. Con RxJS 6 se utiliza la función de tubería para pasar en operadores. En este caso, voy a pasar en el operador de filtro y filtrar todos los valores pares. Ahora, si golpeo inicio, veré 0, 2, 4, etc. Puedo combinar operadores especificados para tomar operador que solo quiero tomar los tres primeros valores. Ahora, si doy inicio, voy a ver 0, 2, 4. Pero entonces el operador luego patea y está más cerca de transmitir y no se van a emitir más valores. Bastante linda manera. Ahora es importante el orden de los operadores. Operan en el arroyo en el orden en que están definidos. Si pongo una toma primero, va a tomar en la corriente original emitiendo 0, 1, 2, 3, 4 y etc. Sólo va a tomar tres valores de su 0, 1, 2. El uno se deja caer por el filtro parejo y sólo vemos cero y dos. Ahora, deshabilitemos tomarnos un momento para que siga emitiendo valores, y podemos ver el efecto de darse de baja. Usaremos la suscripción y después de cinco segundos, llamaré a la función de darse de baja necesita para detener la suscripción. Ahora, cuando presione inicio veremos 0, 2 y 4 y más eventos porque nos hemos dado de baja. Los principales bloques de construcción de RxJS, observables, observadores, suscripciones, operadores, y la función de tubería para pasar a los operadores. Nos vemos en el siguiente video. 7. Observables con (): Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Mastering RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo al de función para crear nuevos observables con un conjunto fijo de valores. Of () es realmente simple, toma una serie de valores, cero o más, y creará un observable e inmediatamente emitirá todos esos valores sobre lo observable. Entonces cerrará automáticamente lo observable. Echemos un vistazo al código. Diagrama de canicas RxJS para un observable apenas emitiendo uno. puede ver que emite el valor uno y se cierra de inmediato. Para ello, necesitamos importar fuera de RXJS, para que eso creara un nuevo observable. Definiremos una nueva variable de cadena y la asignaremos al resultado de la clasificación de con los valores 1, 2, 4. A continuación me voy a suscribir, sólo voy a usar una función sencilla. Te explicaré más sobre las diferentes formas de suscribirte en otro video. Vamos a establecer el contenido del texto de los elementos de resultado. Si hago clic en Inicio, vemos el valor cuatro, hecho se emitieron todos los valores, pero eso es difícil de ver porque se emiten de inmediato, por lo que sólo vemos el último. Ahora agreguemos el console.log para que veamos que se emitieron todos los valores. Ahí están aparecen en el registro, y si vuelvo a hacer clic, se imprimen la segunda vez. Ahora imprimamos justo antes de suscribirnos y justo después de suscribirnos. Podemos ver eso es todo lo que ves incluso sincrónico. Estamos escribiendo código asíncrono, pero realmente se está ejecutando sincrónicamente en este tiempo. Ver que obtenemos antes de suscribirse y después suscribirse y en medio llegamos a valores que se emiten. El de () es una función realmente simple para crear observables. Es sincrónico, sólo emite todos los valores y se cierra. Nos vemos en el siguiente video, cuando echaremos un vistazo a algunas formas más de crear observables. 8. Observables utilizando EMPTY, ninguna y el throwError(): Hola. Aquí Maurice. Bienvenido de nuevo a este curso sobre Master RXJS 6 Sin Romper Un Sudor. En este video, vamos brevemente a echar un vistazo a tres formas especiales de crear observables. No vas a usar mucho esto en código de producción. Se utilizan principalmente para pruebas y algunos otros casos especiales. El primero es la función racional Vacío. Crea un observable, que está vacío. Nunca emite nada, y se cierra de inmediato. Si crea un observable usando el de función sin ningún parámetro, en realidad es lo mismo que usar vacío. Si miramos el sitio web de ReactiveX, podemos ver vacío. Simplemente crea un observable. Podemos ver la línea horizontal vacía con la pequeña línea vertical a la derecha. Cierra de inmediato, nunca pasa nada ahí. El siguiente en echar un vistazo es Nunca. Es aún más simple. Abre un observable. Nunca emite nada, pero no cierra, ni siquiera hace eso. En ese sentido, es aún más sencillo. Nunca se ve así. Hemos visto línea de tiempo horizontal vacía, pero ni siquiera la línea de cierre al final. El último modo de crear un observable que rápidamente quiero echar un vistazo es ThrowerRror. Los dos primeros fueron en realidad constantes. ThrowerRror es especial que crea una cadena observable y emite un error de inmediato. El error de cadena encierra. Tampoco se emiten realmente eventos en la corriente. Se ve así. Hemos visto línea de tiempo vacía, pero en lugar de la pequeña línea vertical para indicar que se cierra, vemos a través, esa es la indicación de que se cierra con un error, pero no hay otros eventos, nada. El vacío y nunca son en realidad constantes.También son funciones ahí para crearlos, pero están en desuso. Normalmente, se utiliza la constante para crear una nueva cadena. El ThrowerRror es una función. Se necesita un error objetos, los tres solo crean un observable vacío. El vacío en el ThrowerError inmediatamente lo cierran. El primero exitoso, el error de pérdida, y luego nunca no hace nada. Estos son útiles para probar operadores y otras cosas, y en algunos casos, para combinar cadenas. Nos vemos en el siguiente video cuando voy a usar estos operadores para mostrarte cómo configurar suscripciones y ver los diferentes eventos como cierre, erroring, y emitencia sucede. Nos vemos ahí. 9. Crear suscripciones de la creación de suscripciones: Bienvenido de nuevo a este curso en, Dominar RxJS6 Sin Romper Un Sudor. En este video vamos a echar un vistazo más de cerca a las suscripciones. Usando la función de suscripción, configuramos una suscripción, pero en realidad es una función sobrecargada y echaremos un vistazo a diferentes formas en que podemos pasarle parámetros. También es importante darse cuenta de que la suscripción suele activar un observable. La mayoría de los observables no hacen nada hasta que llame a suscribirse, y como hemos visto antes de que devuelvan un objeto de suscripción. El abono emite para darse de baja cuando ya no nos interesa la suscripción. Además de usar subscribe hay otra forma de obtener todos los valores de un observable. Se puede utilizar la función ForEach. Básicamente se suscribirá bajo el capó y recorrerá todos los artículos, pero echemos un vistazo al código. Aquí tenemos unas cuantas arroyos observables diferentes. El flujo de datos con los números 1-4, un flujo vacío, un flujo nunca y un flujo de error. Con el flujo de datos, todos los valores se omiten igual que antes, y sólo vemos el último. Pero si usamos una cadena vacía no se envía nada, no vemos nada. Actualicemos un poco a la suscripción. Resulta que esta variante de la suscripción toma una serie de devoluciones de llamada diferentes. El primero es para cuando se presenta un valor. La segunda función de devolución de llamada es para cuando se detecta un error. Recuerda que el error también cierra la cadena. Imprimamos el hecho de que ocurrió un error, y la tercera devolución de llamada es para cuando se cierra la cadena observable. No pasará ningún dato, pero podemos imprimir el hecho de que lo observable ha concluido, y ahora si usamos para vaciar observable, podemos ver que nos terminamos. Si usamos datos, se emiten los valores, pero nunca los vemos más, está terminado. Pero agreguemos un console.log para que realmente podamos ver los valores que se emiten. Ahora vemos que los valores 1-4 se emiten en la consola de la derecha. Completo solo aparece en la interfaz de usuario. Si usamos el observable vacío, sólo nos terminamos, y con lo nunca observable, nada pasa en absoluto. No está terminada. Nunca emite. Pero con el error observable, podemos ver que se imprime el mensaje de error. Algo malo simplemente pasa. Ahora con el fin de mostrar que un observable generalmente no hace nada, si no hay suscripción, importaré el operador de tap. El operador de tap es útil para la depuración. Puedes canalizar todos los eventos a través del tap y hacer algo como en este caso, solo imprimirlos en el console.log. Está destinado para efectos secundarios, no para los operadores normales o conjuntos de filtro o mapa o algo así. Simplemente voy a imprimir tap con el valor real, y si golpeo inicio, nos suscribimos y vemos tap 1 y luego el valor real uno que se está emitiendo, y lo mismo para los otros valores en la corriente completada, pero vamos comentar a suscripción. Ahora si hago clic en Inicio todavía creamos los datos observables. Seguimos llamando al operador de tap excepto que nunca se ejecuta. Sólo se ejecuta con una suscripción, pero esta es una forma de crear una suscripción, pero hay otra. También podemos utilizar el operador ForEach, para imprimir todos los valores. Objetivo de depósito al revés se llama por cada valor emitido y devuelve una promesa, y en este caso sólo voy a maneja un caso de éxito. Cuando la promesa se resuelve, observable está completo, y ahí vemos exactamente el mismo comportamiento excepto esta vez todo se imprime en la consola. Además de utilizar la función de suscripción con tres funciones como parámetros. También podemos pasar en un objeto observador, meta suscribirse con el observador. Si hago clic en Inicio todavía vemos las salidas de tap, por lo que se activó la suscripción. No sólo observar para objeto, podemos agregar tres funciones, siguiente que se llama cada vez que se emite valor de tiempo error, que se llama siempre que se produce un error y se completa, que se llama cuando se completa el observable y ya está hecho. Ahí lo tenemos todavía el mismo comportamiento. No importa cuál de los dos métodos de suscripción debería preferir, pero en la mayoría de los casos, siempre debes proporcionar devoluciones de llamada para ambos valores que se emiten, errores que ocurren y bastante a menudo para completados también, pero haz asegúrese de incluir siempre la devolución de llamada de error. Los errores pueden ocurrir y hay que estar al tanto de esos. Vamos a importar la función de creación de intervalos. Para crear un observable basado en el tiempo emitirá un evento cada segundo. El no después de cinco segundos, llamamos a la suscripción funcional nueva para darse de baja del intervalo. Ahí vemos la segunda se detiene, pero después de cuatro se detiene. Tenga en cuenta que no obtenemos una devolución de llamada completa, estamos dando de baja. No fue el flujo de eventos completando, sin error, sin finalización. Si hacemos lo mismo con el operador de toma, solo tomamos los tres primeros eventos. Ahora las cosas son un poco diferentes, pero se canalizarán en intervalo a través de operador de toma, tomando los tres primeros eventos y vemos 0, 1, 2 y luego en realidad se completa. Ahora es el completamiento observable antes de darse de baja, así que sí obtenemos la devolución de llamada completa. Usar suscripción es la forma preferida de obtener todos los valores preferidos en sobreutilizar ForEach te da más control, más flexibilidad, utiliza tres funciones diferentes allí. El siguiente, el error, y el completo también, si es necesario a que comprueba señales cuando el flujo se cierra de manera exitosa. Nos vemos en el siguiente video. 10. Observables del evento DOM: Hola, aquí soy Reece. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 Sin Romper Un Sudor. Entonces en este video, vamos a echar un breve vistazo forma del evento del foro de crear un observable. Usando eventos de foro, puede crear un observable a partir de cualquier evento DOM o cualquier evento estándar relacionado como Node.js. EventEmitter, también hay una función racional de patrón de ventilación anterior para otros eventos genéricos que aún no son compatibles. Echemos un vistazo al código. El primero que tenemos que hacer es importar desde evento e ignorar las líneas de código a continuación, solo hay acerca de escalar con una pantalla de DPI alta que tengo. Por lo que usando FromEvent, puedo especificar qué elementos de dominio, en este caso para iniciar botón, qué evento me interesa, el evento click, y luego puedo suscribirme a él. Entonces en este caso sólo voy a cerrar el elemento de resultado a las deudas de cadena, “me hicieron clic”. Ahí está, “me hicieron clic”. Por lo que usando el evento de formulario, no tienes que seleccionar un solo elemento de dominio a la vez, puedes seleccionar una colección completa. Usando selector de consultas todo he seleccionado todos los botones y usando ese selector solo puedo crear uno observable para todos ellos. Básicamente estableceré los elementos de resultados al texto del botón para que podamos ver que es cambiar entre inicio y parada. El área azul en la pantalla era de lona. Entonces juguemos un poco con el lienzo. Nuevamente, usaré eventos de formulario, este caso me suscribiré al lienzo y me voy a suscribir a los eventos de movimiento del ratón. Básicamente voy a dibujar en el lienzo cómo se mueve mi ratón. Por eso necesitaba la cabra escaladora abajo. Por lo que establecí una suscripción, obtengo el arco de eventos. Desde el arco de eventos puedo obtener compensaciones x e y en los elementos. Entonces usando el contexto del lienzo, puedo llenar un pequeño rectángulo de dos por dos píxeles donde el ratón es. Pero ahora si muevo el ratón sobre lienzo, se pueden ver los puntos que se dibujan. Si me muevo despacio, están cerca juntos, pero si me muevo demasiado más rápido, ves que en realidad hay algunos huecos porque no todos los píxeles son un evento. El FromEvent hace que sea realmente fácil callar los manejadores de eventos y crear observables basados en esos eventos, al menos para la mayoría de los eventos. Ocasionalmente, necesitarás usar dos el patrón FromEvent. Entonces nos vemos en el siguiente video. 11. Observables basados en el tiempo y el intervalo: Hola. Aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video, vamos a echar un breve vistazo a los observables basados en el tiempo, el temporizador y el intervalo. El temporizador es una función creacional muy sencilla. Crea un observable que espera la cantidad específica de tiempo y luego emite, y posiblemente emite varias veces dependiendo del segundo parámetro. El intervalo apenas empieza a emitir y sigue emitiendo, realmente simple. Ya lo hemos visto varias veces. Echemos un vistazo al código. Yo sólo voy a usar temporizador aquí porque ya hemos usado el intervalo varias veces. Importamos temporizador de RxJS, y luego usando temporizador, especificamos la cantidad de tiempo a esperar. Aquí un segundo. Después de un segundo, actualizamos los elementos de resultado con los eventos. Si hago click en “Inicio”, vemos después de un segundo, cero desnudo y nada más. Con el primer parámetro delay, solo obtenemos los eventos individuales. Si agregamos el segundo parámetro, en realidad determinará el intervalo para cada evento después del retraso inicial. Ahora, esperó cinco segundos para luego disparar un evento cada segundo. Algo bonito con el temporizador es que no sólo tenemos que especificar el número de milisegundos a esperar, sino que también podemos especificar fechas, objetos con la hora exacta en la que debe comenzar. Creemos la hora de inicio con la hora de fecha actual y le agreguemos cinco segundos, y luego le digamos que empiece en ese momento específico. De nuevo, si hago clic en “Inicio”, espera cinco segundos y luego comienza a emitir de nuevo. Pero ahora porque esa era la hora exacta de inicio, determinamos. El temporizador es realmente útil, espera y luego, ya sea emite una vez o dependiendo del segundo parámetro, comienza a emitir después de cada intervalo y el intervalo comienza a emitir de inmediato como hemos visto antes. Ambos realmente buenos para programar trabajos recurrentes. Nos vemos en el siguiente video. 12. Usar en() con iterables y promesas: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Master RRXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo a la función from () para crear nuevos observables. Desde () es muy versátil, básicamente tomará cualquier cosa que sea una suscripción o una promesa, o algo que pueda recorrer como una matriz o un iterable y crear un nuevo observable basado en eso. Muy similar a la de () cuando se trata de [inaudible] y conjunto de valores excepto con () necesitan ser valores conocidos. Aquí es solo una matriz. Si está utilizando una matriz o un iterable, presentará todos los valores de forma sincrónica. Por supuesto que con una promesa, no puede hacer eso. Echemos un vistazo. Primero necesitamos importar desde () desde RXDS, y luego usaremos desde () con él, una matriz de números 1, 2, 3 y solo los imprimiremos a la consola cuando nos suscribamos. Al hacer clic en el botón Inicio, vemos los números 1, 2 y 3 aparecen en la ventana de la consola. Agradable y sencillo. Podemos trabajar con cualquier cosa que podamos recorrer. Estoy usando un selector de consultas todo para seleccionar todos los LiElements anteriores. Vamos a bucle de sobredosis usando el from () para crear un observable. Un observable de elementos DOM. Nos suscribimos y en la suscripción voy a establecer el contenido de texto de los LiElements a usar desde (). Cuando presiono el botón de inicio, se actualizan los cinco LiElements. También podemos usar from () con promesas, que puede ser realmente conveniente si tienes alguna API basada en promesas como fetch o algo más. En este caso, solo voy a crear una promesa y después de dos segundos resolverlo con el valor 42. Por lo que usando de (), convierto la promesa en una observable y me suscribo a ella. Cuando se resuelva la promesa, se llamará a la suscripción y estableceremos los elementos de resultados al valor que se está resolviendo, 42 en este caso. El lis se actualizan de nuevo y vemos aparecer el valor 42. En todos estos casos, observable se cierra en cuanto sabe que se hace ya sea con un número fijo de valores o cuando se resuelve la promesa. Usar de () es muy sencillo y útil para colecciones o cuando se usan promesas. Al usar colecciones emite sincrónicamente todos los valores, y con una promesa, emite cuando la promesa se resuelve, y en todos los casos, se cierra justo después. Nos vemos en el siguiente video. 13. Observables por las peticiones de AJAX: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 Sin Romper Un Sudor. En este video vamos a echar un vistazo a hacer solicitudes Ajax. Si queremos hacer solicitud Ajax, tenemos que importar Ajax desde rxjs/ajax. No del propio rxjs sino del sub paquete llamado Ajax. Una cosa Ajax que recuperamos es a la vez un objeto y una función. Puedes usarlo como una función para hacer tu solicitud, pero hay una serie de funciones de utilidad desde ahí para facilitar la vida para la mayoría de las solicitudes. Por lo general sólo hago con ajax.getJSON o un ajax.put o un ajax.post. Todo se basa en torno al objeto XMLHttpRequest. Funciona en navegadores más antiguos. Hagamos una simple solicitud de búsqueda. En primer lugar, importaremos Ajax de rxjs/ajax. Primero usaré el ajax como función. Tenemos que especificar un objeto como parámetro, y ese objeto puede tener una serie de configuraciones diferentes. Si vas a la documentación de RxJS, buscas Ajax verás solicitud de Ajax. Aquí puedes ver la lista de parámetros que puedes especificar. En este caso, voy a mantener las cosas simples. Sólo voy a especificar la URL. Pero puedes ver que tienes un poco de control. Tengo la URL aquí a una API en línea que devuelve chistes de Chuck Norris. Cuando se realiza la llamada Ajax, devuelve un observable y que emitirá una vez finalizada la solicitud ajax. En este caso, el evento que se pasa es el XMLHttpRequest. Tiene un objeto de respuesta, y debajo de la respuesta está a la respuesta real, en este caso, hay un valor el cual tiene una broma. Ahí hay una broma de Chuck Norris y otra. Esto no es difícil, pero en la mayoría de los casos necesitarás especificar un poco más. Si sé que solo voy a solicitar algunos datos JSON, usaré la función de utilidad GetJSON, solo pásalo a URL y opcionalmente algunos encabezados, ve suscríbase y te devolverá a carga útil JSON real cuando el se completa la respuesta. Aunque de nuevo, llegaré a valor.joke de la carga útil y mostraré eso. Ahí vemos otra broma. Hacer solicitudes AJAX usando RxJS es realmente simple. Todo está basado en torno al objeto XMLHttpRequest por lo que funcionará con navegadores antiguos, y debido a que devuelve un observable, solo puedes tratarlo como cualquier otro observable. Nos vemos en el siguiente video. 14. Crear observables personalizados: Hola Maurice aquí. Bienvenido de nuevo a este curso sobre master RXJS 6 sin romperse un sudor. En este video, vamos a echar un vistazo a la creación de observables de los clientes. La primera regla de observables personalizados es no crearlos. Si quieres crear un nuevo observable, mira si puedes empezar con uno existente, esa siempre es la mejor opción. Aquí en el sitio web de ReactiveX, si vas a operadores y te desplazas un poco hacia abajo, verás esta opción sobre un árbol de decisiones para usar operadores. Bueno, también tiene este árbol de decisiones sobre el uso de funciones para crear nuevos observables, y vamos a crear un pequeño reloj, cada segundo que queremos emitir a la hora actual. Eso es como un intervalo. Queríamos intervalo excepto que no queremos los números del intervalo, queremos la hora actual. Eso es como usar un operador de mapa de ancho de intervalo mapeo combinado al número actual, a la hora actual. Pero si no puedes encontrar ninguna función creacional existente la cual funcionará a través de observable.create te permitirá crear nuevos observables. Obtendrás el objeto suscriptor, tiene una siguiente función completa y de error a la que puedes llamar para emitir valor. Echemos un vistazo al código. Hagamos primero lo simple y empecemos con un intervalo. Primero voy a crear una nueva función, que creará una nueva observable para mí. Porque quería basado en el tiempo, voy a llamarlo tiempo y pasar el número de milisegundos entre emitir la hora actual. Porque es realmente como intervalo, voy a empezar con el intervalo y lo voy a mapear a la hora actual. Si importante intervalo y mapa, y luego creo un nuevo intervalo especificando el número de milisegundos entonces usaré la función de tubería para ejecutar un filtro de mapa Trudeau, ignoró el número original, y trabajé en una nueva fecha a cadena de hora local. Puedo usar esta función creacional de tiempo igual que cualquier otra, solo llámelo con el número de milisegundos, devuelve un observable, por lo que nos suscribimos a ella, y cada vez que emita un evento, actualizamos nuestros elementos de resultados. Ahí vemos a nuestro pequeño reloj haciendo tic-tac. Agradable y sencillo y emitido para ser realmente el enfoque preferido. Pero echemos un vistazo a un enfoque diferente, si no hay observable estándar, realmente puedes usarlos. En ese caso, vamos a importar lo observable de rxjs y usar observable.create para crear un nuevo observable completamente en blanco. Estamos en pausa un objeto al suscriptor el cual tendrá que seguir, error, y completar la función. Estos chicos sólo van a usar junto para emitir valores. Porque realmente no acabamos con el tiempo, y no vamos a asumir crece y el error. Solo para demostrar que podemos emitir valores, estoy emitiendo la cadena hola, y aparece. Queremos emitir basado en tiempo así que vamos a crear un intervalo establecido, y cada tan a menudo milisegundos emite el tiempo actual. Ahí vemos a nuestros clientes tiempo observable emitiendo valores de tiempo. Genial. Ahora aún no hemos terminado del todo, porque estamos iniciando un intervalo establecido y seguirá funcionando para siempre. Añadamos un console.log en el intervalo para que realmente podamos ver cuándo se ejecuta. Capturemos la suscripción cuando nos suscribamos, para que podamos dar de baja después de cinco segundos. Si presiono el botón de inicio ahora, empezará a correr la hora, pero el elemento dejará de actualizarse después cinco segundos porque hemos cancelado nuestra suscripción, pero la salida de la consola sigue llegando. Tenemos que asegurarnos de detener ese intervalo. El modo en que realizas cualquier acción de limpieza cuando el usuario se da de baja de un observable es devolviendo la función de limpieza. A partir de lo observable.create, la función que crea lo observable devolverá una función de limpieza. Guardaremos para manejar desde el intervalo establecido y en claro en pleno [inaudible] en el mango lo que lo detendrá. Ahora cuando hago clic en “Inicio”, vemos que transcurre el tiempo, pero después de cinco segundos cuando damos de baja tanto la UI como la consola dejan de actualizarse, porque hemos detenido el intervalo. Crear observables de clientes es realmente fácil, aunque debes evitarlo. Si no tienes que hacerlo, si puedes usar uno de los observables estándar y simplemente usar un operador, ese es el mejor enfoque. Obtienes al suscriptor, puedes emitir zapatos de valor y a continuación puedes completar lo observable, o puede emitir error si quieres. todo, muy fácil de usar. Nos vemos en el siguiente video. 15. Temas: Hola, Maurice aquí, bienvenido de nuevo a este curso sobre masterización de RXJs 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo a los temas y algunos tipos de temas especiales. Los sujetos son otra forma de crear observables, pero son especiales porque ambos son utilizables como suscriptor, como observable. Normalmente los usas para algunos casos especiales, pero uno de ellos es multi-casting demasiados observables. Puedes suscribirte muchas veces al mismo tema. Es una clase de caso especial y realmente no deberías usarlos mucho. Si desea crear un nuevo observable, prefiera usar observable.Crear o aún mejor, uno de los estándares, funciones de creación observables. Existen tres tipos especiales de asignaturas. Tenemos el sujeto de clase base, que podemos usar, pero también tenemos un AsyncSubject, que solo emite cuando se completa. Tenemos un sujeto de comportamiento, que toma un valor inicial y cada vez que te suscribas, emitirá el valor perdido que se está emitiendo, o si nada se está emitiendo aún el valor inicial. Tenemos el objeto de reemplazo, que volverá a emitir todos los valores emitidos anteriormente. O si especifica el tamaño del búfer opcional, emitirá tantos eventos no necesariamente tienen que ser todos ellos. Echemos un vistazo al código. Empecemos importando tema de rxjs. Nuestro tema es una clase, por lo que solo tienes que crear una nueva usando el nuevo operador. Si tienes un tema, puedes ir a suscribirte para configurar una suscripción. En este caso solo voy a imprimir todos los valores a la consola. A continuación podemos emitir algunos valores. Emite dos restricciones rxjs es genial. Cuando ejecutamos esto, podemos ver que me he movido aquí en la ventana de la consola, igual que esperarías de un observable. Ahora si paso a la suscripción un poco abajo, así que después del 'es' primero emitiremos rxjs y luego 'es' y luego suscribirme y luego emita cool, solo vemos los eventos que se emiten después de suscribirnos. Sólo vemos cool en la consola. Ahora usemos los sujetos de comportamiento en lugar de los sujetos estándar esto toma un valor inicial que dirá inicio. Cuando te suscribas, también llegarás al último valor emitido. A pesar de que nos suscribimos después de emitir 'es', todavía se ve que es genial que se emita. Si paso a la suscripción a la parte superior, vemos que también se emite el valor inicial de inicio. Si paso a la suscripción justo hasta el final, sólo vemos lo último que se emite. Enfriar. Probemos los súbditos de reemplazo. Primera regla, no pasar ningún valor y emitiremos todo el valor primero antes de suscribirnos. Aún así, todo aparece en la consola. Con el sujeto de reemplazo por defecto, se búfer todos los eventos que se emitan y la nueva suscripción los recibirá todos. Pero podemos especificar el tamaño del búfer. En este caso, sólo dos, emitiendo los dos últimos valores. Los sujetos son un realmente útil si necesitas multifundir observables. O te has ido a envolver tu propio abrigo dentro de un observable.Crea. Pero son un olor [inaudible] así que no los uses demasiado. La mayoría de la gente piensa que nunca debes usarlos en absoluto. Nos vemos en el siguiente video. 16. Observadores calientes en frío: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Mastering RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo a los observables calientes versus fríos. La mayoría de los observables van a estar fríos. El frío observable solo comienza a emitir datos cuando hay una suscripción. Si no hay suscripción, no se emite nada. Por lo general, cada suscripción obtendrá su propia fuente de eventos. Si tienes dos suscriptores a uno observable, obtendrán su conjunto único de eventos. La mayoría de los observables en RxJs 6 son fríos, no hacen nada hasta que realmente te suscribes a ellos, lo cual está perfectamente bien. Del otro lado, también hay observables calientes. observables calientes comienzan a emitir valores aunque no haya suscripciones, no les importa. Acaban de empezar a sacar datos. Por lo general, si eso sucede, y tienes múltiples suscripciones, comparten el mismo flujo de datos. Diferentes formas en las que puedes crear suscripciones calientes, pero típicamente se hace usando un tema, aunque no necesariamente, realmente depende de dónde se cree la fuente de los datos. Echemos un vistazo a este comportamiento en código. Aquí tengo dos manejadores de botones. Primero creo un observable frío, y luego en el evento click, me suscribo a él. A continuación creo el hot observable, y de nuevo, en el evento click, me suscribo a él. Ambos se crean cuando se carga la página y ambos sólo están suscritos cuando se hace clic en su respectivo botón. Actualicemos la página para asegurarnos de que empezamos con una diapositiva limpia. Espere un poco, y luego haga clic en Iniciar frío. Ya ves que obtenemos valores emitidos, pero en realidad comenzó con el valor 0. Vamos a refrescar la página de nuevo y probarlo con caliente. Se ve que después de una breve pausa, empezamos con el valor 46. No empezamos a 0, nos metimos en medio de una corriente de números y empezamos a recibirlos. ¿ Cómo se ve realmente el código? Para un observable frío, ve lo observable se crea usando observable.create. En el interior iniciamos un intervalo y comenzamos a emitir valores. Para lo observable caliente, creamos un sujeto y de inmediato comenzamos a emitir valores independientemente de si existen suscripciones. Tampoco dejamos de enviar valores si alguien da de baja. La mayoría de los observables son fríos y eso está perfectamente bien. No necesitan hacer nada hasta que realmente estás solicitando datos. Algunos observables son calientes, siempre emiten valores. Ejemplos típicos de un observable caliente serían algo así como un comerciante de acciones. Si estás escuchando o no, se están negociando acciones, están emitiendo acciones de compra y venta. Si varias personas están escuchando, pueden escuchar la misma corriente. Con un frío observable, si nadie estaría prestando atención, no se harían ventas. Nos vemos en el siguiente video. 17. Encuentra el operador adecuado: Hola MORRIS aquí. Bienvenido de nuevo a este curso de masterización de arcos ES6 sin romper un sudor. En este video vamos a echar un vistazo brevemente a encontrar operadores para usar, porque hay muchos y encontrar los adecuados puede ser poco difícil. Tenemos los sitios web de RxJS y ahí hay mucha documentación sobre los operadores. De hecho vayamos allí por un momento. Aquí tenemos a sitios web de RxJS y referencia a todas las funciones que hay ahí. Hay muchos de ellos. Si me desplazo hacia abajo a los operadores, hay una lista bastante. Ahora si sabes qué operadores que están interesados, por ejemplo, se detienen. Simplemente lo puedes encontrar aquí e ir a ella. Pero si realmente no sabes qué operador usar, tienes un problema y qué operador necesito resolver. Este sitio es difícil de usar. En ese caso, al sitio web de ReactiveX es mucho más fácil. En realidad tienen estos gráficos de decisión sobre encontrar al operador adecuado, no todos los operadores están ahí, pero muchos sí. Está dividido de tal manera que en realidad se puede pasar. Esto es lo que quiero resolver. ¿ Qué operador usaría? Si abrimos esto, se puede ver que está dividido en diferentes secciones, calificando un nuevo observable, que no se trata de operadores, sino de muchas otras cosas. Supongamos que quiero emitir artículos de un observable después de transformarlos. Bueno, de uno a la vez, usa la función de mapa. Un observable en su momento, utilice mapa concat. Se puede ver que hay una buena decisión. Yo solo quiero volver a emitir ciertos artículos, lo cual sucede con bastante frecuencia. Se puede utilizar para filtrar o rápido o tomar o perder, o saltar algunos, etc. Es mucho más fácil encontrar operadores de esta manera así que uso esto con bastante frecuencia. Basta con tener en cuenta que algunos operadores tienen un nombre diferente. Si buscamos errores, como tengo un observable y quiero recuperarme con gracia de una notificación que podemos usar para atrapar operador. Deberíamos captar el error. Si me desplazo un poco hacia abajo, veré implementaciones para diferentes lenguajes así que veremos CatchError para RxJS. Pero si vamos y buscamos RxJS catch, vemos que en realidad se llama CatchError. El motivo es porque catch es una palabra clave reservada y es una función independiente por lo que no se puede nombrar después de una palabra clave reservada. Nos vemos en el siguiente video cuando empezaremos a usar diferentes operadores. 18. El operador de la tap: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video vamos a echar un vistazo al Operador de Tap. El operador del grifo está destinado a efectos secundarios. Úsalo para depurar, que a menudo hago, o algunos otros efectos secundarios, se necesita una suscripción al igual que la función de suscripción, por lo que ya sea tres funciones para el siguiente error incompleta, o un objeto con un tres funciones. A diferencia de suscribirse, en realidad no activa lo observable. Aquí en el sitio web de RxJS puedes ver tenemos documentación para arriba con los tres parámetros que toma. Página web no ReactiveX, también lo podemos encontrar, excepto que se llama “Do here”. El motivo es la muerte en la mayoría de las implementaciones Rx, reactiva X sweet con todos nuestros diferentes lenguajes utiliza para hacer operador. RxJS varía de eso con el número de operadores por restricciones. Con la mayoría de las demás implementaciones de ReactiveX, los operadores son funciones sólo objetos observables. Eso solía ser cierto también para los RXJS. En ese caso, Do y catch por ejemplo estaba bien pero hay palabras clave reservadas, bueno, puedes usarlas como una función en un objeto. No se pueden usar como palabras clave independientes. Con RxJs 6, vamos operadores capaces y tenían que ser funciones independientes para que no cambiaran el nombre de algunas de ellas, y Do se renombró a tap y catch se renombró a catch error. Por eso hay ligeras diferencias en la nomenclatura. El sitio web más antiguo de ReactiveX es genial porque la documentación es mucho más completa y hay buenos diagramas sobre cómo funciona. Echemos un vistazo a algunos códigos, aquí tenemos un temporizador simple, se fue por dos segundos y luego emite pero también antes de iniciar el temporizador, desactivamos el botón y cuando se dispara, lo volvemos a activar. El botón se desactiva y se vuelve a activar cuando se dispara el temporizador. De hecho, eso debió haberse hecho cuando está completo, pero me dijo fuegos una vez, no mucha diferencia. Vamos a importar grifo y vamos a utilizar la función de tubería para grifo operador en lo observable. Al igual que suscribirse, quien puede usar una función simple, cae en la función e imprime el elemento actual que se emite a la consola. Abre la ventana de la Consola, Inicio, y después de dos segundos vemos que se emite el ítem. Muy a menudo en realidad acortar esto acabo llamar Tap and Push en referencia a abogado bloqueará, lo que en realidad producirá exactamente lo mismo. Sintaxis un poco más corta. Ahí lo vemos. Ahora en este caso realmente tengo los efectos secundarios en la función de suscripción para volver a habilitar el botón. Ahí es donde entra el operador del grifo. Voy a utilizar para completar un retroceso en el operador de tap y volver a activar el botón ahí dentro. Ahora mi suscripción solo está interesado en el valor y efectos secundarios como volver a habilitar el botón o delegado a operador de tap. Funciona dentro de este caso, en realidad se ve un poco funky porque estoy pasando no dos veces por los dos primeros parámetros por lo que en este caso, pasar un objeto con la devolución de llamada completa tiene más sentido. Cambiemos la sintaxis, todavía se comporta exactamente de la misma manera cuando hago clic en “Inicio”, deshabilitado, y después emite está habilitado. Tap es un operador realmente útil, lo uso para depurar, pero es útil para otros efectos secundarios como deshabilitar, habilitar botones también. Nos vemos en el siguiente video. 19. El operador de los mapas: Hola, aquí Maurice. Volveremos a este curso, a dominar los RXJs 6 sin sudar. En este video, vamos a echar un vistazo al operador de mapas. El operador de Mapa es realmente útil. Toma los objetos de una entrada y lo transforma en algunos objetos de salida. Básicamente, la entrada va a la salida de alguna forma diferente. En algunos casos, todo lo que quieres hacer es extraer un solo valor del objeto de entrada. En ese caso, el operador de bloques es otra alternativa. Pero en este video, sólo voy a usar “Transformar”. Echemos un vistazo al código. Aquí tengo un ejemplo de lienzo que usamos hace un tiempo, cuando miramos a conseguir flujos observables de eventos DOM. Funciona muy bien. Pero no me suscribí, en realidad estoy usando los eventos originales del mouse, todo lo que hay, así que estamos obteniendo muchos más datos de los que realmente necesitamos. También estoy usando estos objetos de contexto global. Vamos a importar el operador de Mapa para arreglar eso. Vamos a canalizar los eventos a través del operador de mapas y extraeremos los valores que necesitamos. En este caso, el offsetX y offSetY. El suscribirse ya no recibe para completar arcos de eventos, solo recibe para posicionarse ahora. Actualicemos el código y suscríbase para reflejar eso, use la posición X en la posición Y. Nuestro lápiz todavía funciona y podemos dibujar en él. Genial. Seguimos usando esos objetos de contexto desde el alcance exterior. Capturemos eso también en el mapa, porque vamos a recuperar eso del eventact.targets.getcontext 2D. Ahora ya no dependemos de esa variable de contexto desde el alcance externo. Solo estamos publicando todo lo que el suscriptor realmente necesita. Genial. El operador de Mapa es realmente popular. Se usa mucho. Es realmente genial transformar un objeto de una forma a otra, o para el caso, no necesita ser un objeto, nada servirá. Nos vemos en el siguiente video. 20. El operador de filtro.: Hola. Aquí Maurice. Bienvenido de nuevo a este curso sobre Master en RxJS 6 sin sudar. En este video, vamos a echar un vistazo a un operador muy popular, el Filtro. Como el nombre sugiere el filtro solo seleccionará los artículos a paquear. Obtiene que cada elemento siendo emitido por la fuente observable y sólo en medio de cosas pasando el filtro en el objetivo observable. Importante señalar es que el filtro no afecta el cierre de observable. A diferencia de algunos otros operadores de filtrado relacionados como take y first, que harán eso. Aquí, podemos ver el diagrama de mármol Rx para filtro. Vemos el flujo observable de entrada con los valores 2, 30, 22, 5, etc. Vemos sólo los valores mayores a 10 siendo emitidos en la salida observable. Echemos un vistazo a algún código. Tengo un temporizador aquí y básicamente va a emitir un número nuevo cada medio segundo. Tengo que tocar operador para imprimirlo en la Consola y los voy a mostrar en la UI que vemos los valores 1, 2, 3, etc, apareciendo. Vamos a filtrar esto a sólo usar números primos. En primer lugar, importamos el operador del filtro. Adelante, vamos a la función para filtrar los primos. A continuación en la función de tubería, agregamos el filtro y por cada valor que se emite, probamos su primness. Estoy haciendo esto después de usar el operador de tap. Pero cuando haga clic en “Inicio”, veremos todos los números que se emiten en la Consola, pero sólo los números primos en la propia interfaz de usuario. No orden es importante si muevo primero filtro y toco, segundo operador, entonces primero voy a filtrar y luego voy a imprimir a la Consola. Ahora, sólo voy a ver números primos en la Consola. Filtros y otro operador muy álamo para bastantes filtros como operador para casos de uso muy distintos. Nos vemos en el siguiente video. 21. El toma y tomar los operadores de Last: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre el dominio de RxJS6 sin romper un sudor. En este video vamos a echar un vistazo a tomar operador y la toma relacionada perdida. El operador de toma te permitirá llevar el primer x número de artículos que se emiten a un observable, toma última es dos opuestos. Te dará el último x número de valores emitidos su propio observable. Por lo que toma es diferente del filtro, filtro no cambia cuando se cerró el observable. Take cerrará lo observable tan pronto como el número de valores requiera a nuestro frente. Aquí vemos el diagrama de canicas rx para tomar. Por lo que la entrada observable emite uno, dos, tres, y cuatro. Sólo nos llevamos los dos primeros. Entonces nos quedamos con uno y dos. Toma perdido con uno. Nuevamente, la entrada emite uno, dos, tres y cuatro. Take lost solo emite cuatro, pero ten en cuenta que solo emite cuando se cierra la entrada observable. Sólo entonces sabe qué es realmente el último ítem que se emite? Echemos un vistazo a algún código. Aquí, tengo un botón con un intervalo que emite un valor cada medio segundo. Vamos a imprimir en el registro de la consola. Lo vamos a mostrar en la UI y UI también vamos a mostrar el hecho de que lo observable se completó. Ahora lo observable simplemente sigue emitiendo valores porque nunca nos detuvimos. Tomemos los primeros cinco valores. Vamos a importar para tomar operador, y luego voy a canalizar lo observable verdadero para tomar operador. Ahí se publicarán cinco en para llevarse los primeros cinco artículos. Ahí vemos aparecer los ítems y lo observable siendo completo. Cambiemos esto para tomar perdido. Tomaremos los últimos cinco elementos. Al hacer clic en Inicio, se ven números emitidos por el operador de tap, que es antes de tomar perdido, pero no aparece nada en la interfaz de usuario. Eso se debe a que para entrada observable nunca cierra. Por lo que take lost no sabe cuándo emitir valores. Usemos ese operador para tomar los primeros 10 valores que se emiten, que más se acercan a lo observable después. Entonces usaremos tomar último para tomar los últimos cinco valores de esos. Podemos ver en el registro de la consola que se emitieron 10 valores, pero en la IU sólo vimos completados. Eso se debe a que toma últimos emite al finalizar. Pero cuando nos movemos al operador de tap como el último operador, en realidad podemos ver lo que se estaba emitiendo en la consola. Vuelve a hacer clic en Iniciar. Es emitir valores. Toma pérdidas, capturándolas, y ahora emite los cinco valores perdidos. Por lo que tomar y tomar perdido son bastante útiles para capturar un subconjunto de los elementos que se emiten. El primero o el último. Si solo quieres muy primero, o resultados muy perdidos sobre primero y último operador, que son útiles. También toman un predicados y el valor por defecto en caso no se esté emitiendo nada para el momento en que se cierre el observable. Capacidades que toman y toman perdidas no tienen. Entonces nos vemos en el siguiente video. 22. El operador de la toma: Hola Marie compartir. Volveremos a este curso de masterización de arcos ES6 sin romper un sudor. Entonces en este video, vamos a echar un vistazo a otro operador para filtrar datos el TakeWhile, operador. El TakeWhile es como el operador de filtro y el operador de toma combinado. Se necesita el primer número de elementos que se emiten sobre observables, pero a número de elementos que se emiten. Se necesita depende de los predicados. A diferencia de que tome, que toma un número fijo, utilizará un predicado al igual que el filtro. A diferencia del filtro que mantiene abierto lo observable y solo emite cualquier cosa que pase, TakeWhile cerrará tu observable tan pronto como el primer ítem admitido no pase el filtro. Aquí se puede ver el diagrama de canicas de arcos para tomar mientras ve la condición del filtro es x siendo menor que cinco y en cuanto se emita seis, se cierra la salida observable, y se puede ver si me muevo el seis después de los cuatro los cuatro lo ha hecho, y si me mudé a siete antes, la muerte más cercana a la cuerda. Echemos un vistazo a algún código. De nuevo, tenemos un pequeño intervalo que emitirá un nuevo número cada 500 milisegundos. Importar al operador TakeWhile y tomar elementos siempre y cuando estemos por debajo de cinco. Si hago clic en Iniciar ahora veremos que se emiten los primeros cinco elementos, pero en cuanto lleguemos a cinco, usted observable está cerrado. Toma pozos modelos bastante habituales versátiles como filtro, pero sigue siendo bastante útil. Recuerda que en realidad cierra la salida observable. Nos vemos en el siguiente video. 23. El operador de takeUntil: Hola, aquí soy Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video vamos a echar un vistazo a TakeUntil Operador. Ese operador TakeUntil es muy parecido a TakeWhile operador. Toma valores que se emiten de una corriente observable y emite valores hasta que se le dice que se detenga. No nos gusta TakeWhile, que usa un predicado, TakeHasta realmente usa otra corriente para determinar cuándo parar. Aquí puedes ver el diagrama de canicas naranjas. Se puede ver TakeHasta toma elementos de la primera corriente hasta que la segunda corriente emita. Si muevo el primer elemento en la segunda corriente, se puede ver lo observable resultante es en realidad un cambio. Echemos un vistazo al código. Al igual que antes, tengo el botón de inicio que escucha un evento de click y comenzaremos un intervalo emitiendo cada 500 milisegundos. En este caso, también tengo el botón de parada y ahora tú usando la función de eventos Forum para crear un observable cada vez que hacemos clic en él. Voy a tocar operador ahí sólo para que podamos ver cuando hacemos click en él. Tenga en cuenta que no me estoy suscribiendo al evento stop. Si hago clic en inicio, vemos que se emiten valores. Pero si hago clic en parar, no vemos que pase nada. No vemos el mensaje de la consola porque en realidad no estamos suscribiéndonos a ese evento. Usemos el botón de parada para detener la cadena de intervalo. Voy a importar operador TakeUntil y por el flujo de intervalo a través de TakeHasta y la política en la cadena stop allí. Doy click en inicio y se está ejecutando el flujo de eventos, hago clic en parar y se detiene. Tenga en cuenta que si solo hago clic en parar, no pasa nada porque todavía no hay características observables para ello. Tenemos que iniciar el primer flujo antes de que se suscriba el segundo stream. Take Hasta es bastante útil. Combina dos flujos, uno de entrada y otro de flujo para determinar cuándo dejar de tomar eventos del flujo de entrada. Recuerda que es cierra el flujo de salida en cuanto emita el segundo flujo. Nos vemos siguiente video. 24. El escaneo y los operadores: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Master RXJS 6 sin sudar. En este video, vamos a echar un vistazo a dos operadores muy comparables, el escaneo y el reductor. Son casi lo mismo. El operador de escaneo toma una función acumuladora la cual toma el resultado anterior y el valor actual que se emite, y obviamente toma un valor inicial y luego va a emitir cada valor del acumulador. Aquí podemos ver al operador de escaneo en el sitio de mármol de Rx. Se puede ver por cada valor que se emite en la entrada observable obtenemos un valor que se emite en la salida observable, el resultado de repetir el acumulador para cada valor. El operador reductor toma exactamente los mismos parámetros, una función acumuladora toma el valor anterior y el valor actual que se emite, y un valor inicial opcional. La diferencia sin embargo, es que sólo emite cuando se cierra la entrada observable. Aquí vemos al operador reducido en los sitios de mármol de Rx, y notamos que solo emite una vez al final cuando se cierra la entrada. Echemos un vistazo a esto en código. Tengo algún código de muestra, y empiezo con un rango de unos pocos números. Si hago clic en el botón de inicio, sólo vemos los números emitidos y veo el último número emitido un cinco en la interfaz de usuario. Vamos a importar escanear y reducir, y primero usemos para escanear al operador. El escaneo toma una función la cual tiene un resultado previo como primer parámetro y el valor actual que se emite como segundo parámetro. La primera vez que el valor anterior será el valor inicial que pasemos. Si no se pasa ningún valor inicial, entonces el primer valor que se emite no hará que se ejecute el acumulador, es sólo en el segundo. Entonces el primer valor es el anterior y el segundo valor que se emite es el actual. Pero en general, siempre uso un valor inicial, y si toco el botón de inicio ahora vemos la suma de 1-5, que es de 15 rodamientos. Hagamos lo mismo con la función reducida, en lugar de escanear usaremos reducir, y si golpeo “Inicio”, vemos exactamente la misma salida. Realmente no podemos decir la diferencia entre escanear y reducir en este momento, así que tomemos un intervalo en lugar de un rango fijo de números, y la gran diferencia aquí es por supuesto, que el intervalo no se cierra porque el tiempo sigue tomando. Con operador de escaneo, vemos todas las sumas inmediatas de los valores que se emiten y si intentamos lo mismo con el operador de reducción, eso no va a suceder. Si presiono “Inicio”, vemos valores que se emiten en la consola pero en la interfaz de usuario, realidad no vemos tus resultados. Eso se debe a que al intervalo se mantiene abierto, no se completa así que reducir nunca realmente emite un valor. Importar el operador de toma y tomar los primeros 10 valores del intervalo. Ahora lo observable completa y ahora reduce voluntad, después de que se emitan 10 valores, emitirá los resultados de la suma de todos los números emitidos. Escanear y reducir, muy similares, ambos toman una función acumuladora con un valor inicial opcional. La diferencia es cuando emiten, escanear emite cada vez, reducir las emisiones al finalizar, generalmente reduce un gran operador a usar, pero solo funciona si tienes un observable que más cerca. Entonces nos vemos en el siguiente video. 25. El operador de la parada: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video vamos a echar un vistazo al operador en pareja, que puede ser bastante útil en algunos casos. El operador por pares básicamente combina dos elementos que se emiten en la entrada observable en la salida observable. Cada evento emitido en la salida observable es una matriz que contiene dos valores, el valor anterior y el valor actual que se emite. Ahí dos operador r similar, BufferCount, que es un poco más flexible porque se puede especificar el tamaño de la matriz que se emite, no tiene que ser dos, o BufferTime que toma tiempo y simplemente recoge todos los elementos que se emiten en un intervalo de tiempo y los emite como una sola matriz. Aquí puedes ver al operador por pares en el sitio del RXMarble. Se puede ver que la entrada observable emite A, B, C, D, E, F. La salida observable emite las matrices A, B, B, C, D, etc. El primer ítem no tiene un ítem correspondiente que se emite en la salida, pero todos los el siguiente son sus valores con el anterior. Echemos un vistazo a algún código. Aquí tengo la muestra de Canvas otra vez que usamos antes. Recuerda cuando muevo el ratón a Canvas, podemos dibujar en él, pero dibuja puntos donde está el ratón. Si muevo el ratón rápido, obtenemos más separación entre los puntos si lo muevo despacio están cerca juntos. Usando esos puntos y emparejar sabios, realidad podemos convertir esos en una línea. Primero importemos el operador sabio par. Después de haber mapeado nuestros eventos, lo convertimos en pares canalizándolo al operador por pares. Ahora en nuestro Suscríbete, obtenemos pares de posiciones, no solo posiciones individuales. Usemos la [inaudible] la sintaxis estructurante para obtener el desde y el a posición del par. Obtendremos el contexto desde el primero, realmente no importa cuál de los dos utilizamos. Ahora usando la API de contexto, comience, pase a la línea dos y trazo. En realidad podemos trazar una pequeña línea entre los dos puntos. Por supuesto, el par debería ser una llamada a función. Entonces ahora si muevo el mouse sobre Canvas, obtenemos una linda línea en lugar de una fila de puntos separados. Pairwise puede ser muy útil para este tipo de situaciones en las que se quiere emparejar cosas. Los operadores BufferCount son un poco más flexibles porque puede especificar el tamaño exacto del búfer que desee. Nos vemos en siguiente video. 26. Los operadores de la fondos, mergeMap, concatMap y switchMap: Hola, Maurice aquí, bienvenido de nuevo a las anotaciones de Master RXJS 6 Sin Romper Un Sudor. En este video vamos a echar un vistazo a diversos operadores de mapas. Básicamente están todos diseñados para mapear uno observable en otro observable, por lo que veremos: FlatMap, MergeMap, ConcatMap y SwitchMap. En primer lugar veremos FlatMap y MergeMap, y los agruparemos porque FlatMap es solo un alias de MergeMap. Realmente son exactamente lo mismo. MergeMap comienza a emitir eventos desde un observable anidado tan pronto como el observable externo emite. MergeMap básicamente emitirá todos los valores de observables anidados independientemente de lo que esté sucediendo. Si el observable externo emite tres veces, inicia el observable anidado tres veces y solo seguirá emitiendo eventos de todos esos observables, por lo que todos están entrelazados juntos, realmente no hay orden discernible ahí entre ellos. ConcatMap es poco diferente. ConcatMap también emite eventos desde el observable anidado cuando el observable externo emite, pero espera a que el observable anidado se complete antes de que inicie el siguiente, por lo que no hay intercalado y todo está bien ordenado. Todavía espera a que el observable anidado se complete sin embargo, así que si no se completa, no volverá a disparar. Aquí ves el diagrama de RXMarbles para ConcatMap y verás si me paso a eventos C o a B en el observable externo que los observables solo están en cola. La última función de mapa, vamos a echar un vistazo a es SwitchMap. SwitchMap se parece algo a ConcatMap en que todo está bien ordenado, pero en este caso, cuando el observable externo emita de nuevo, va a cancelar lo observable interno. Aquí puedes ver el diagrama de RXMarbles. Aviso cuando muevo los eventos en lo externo observable, que los eventos desde lo observable interno se dejan caer si muevo la B a la izquierda, por lo que se dispara antes, vemos que no todos los eventos anidados desde el primero en nuestro observable en realidad fuego. Echemos un vistazo a algún código. Aquí tenemos algún código de muestra. El observable al aire libre es básicamente un clic observable desde el botón de inicio, por lo que lo estamos utilizando desde eventos para crear un observable. Eso lo cancela a un operador de escaneo solo para que obtengamos valores incrementantes y podamos ver qué click se dispara. Si hago clic en el “botón Inicio”, veremos el número 1, 2, etc. Usemos el MergeMap y el anidado observable en este caso es solo un rango de números 1-5 y utilizo el operador de mapa para convertirlo en una pequeña cadena mostrándote a partir de qué clic se originó o qué evento se encuentra en el observable anidado. Si hago clic en “Inicio”, vemos que se emiten cinco eventos y si hago clic en “Inicio” un par de veces, vemos exactamente lo mismo que se emite de nuevo. Probemos con ConcatMap y obtenemos exactamente la misma salida. A primera vista, parece que se comportan exactamente igual. Probemos rápidamente SwitchMap y nuevamente obtenemos el mismo resultado. No parece ser mucha diferencia. El motivo es que el observable anidado se crea a partir de una gama, por lo que corre realmente rápido y ya está hecho para cuando volvemos a hacer clic. Intentemos con un intervalo, así que cada segundo vamos a emitir un evento en el observable anidado y volveremos a tomar cinco eventos. Si hago clic en “Inicio” varias veces, ve que los eventos se entrelazan. Obtenemos click y los eventos se entrelazan todos juntos y no hay un verdadero buen orden discernible ahí. Cambiemos de MergeMap a ConcatMap ahora, y de nuevo si hago clic en “Inicio” varias veces, veremos un comportamiento muy diferente. En este caso, vemos todos los eventos de Click 1 y luego cuando eso esté hecho, vemos todos los eventos de Click 2 y luego todos los eventos de Click 3, así que todo está bien en orden. Ahora bien, si elimino eso toma cinco, básicamente tenemos un observable anidado que nunca se completa. Si hago click, verás todos los eventos de Click 1 aparecen, pero si hago clic un par de veces más, en realidad nunca vemos eventos, espera a que se complete ese observable anidado, que nunca es ahora. Echemos un vistazo a SwitchMap. Si hago clic en “Inicio”, veremos que aparecen los eventos desde el primer clic, pero si vuelvo a hacer clic en “Iniciar”, se cancela esa primera transmisión de eventos anidados y se inicia una segunda. Si hago clic en “Iniciar” varias veces, ve un nuevo flujo de eventos comenzando cada vez, pero el primero se cancela. Existen varios operadores de mapas para combinar streams, todos son similares, pero ligeramente diferentes en cómo manejan flujos de eventos anidados, así que escoge el que necesites para un trabajo específico, veremos qué sucede con el flujo de eventos anidados cuando ocurren múltiples eventos en el flujo de eventos externo. Todos son útiles, todos tienen sus casos de uso. Nos vemos en el siguiente video. 27. El operador: Hola, aquí Maurice. Bienvenido de nuevo a este curso de Dominar RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo al StartWith Operator. StartWith es un operador que permite agregar un evento inicial antes de que se emitan todos los demás. Simplemente insertaremos un valor y luego seguiremos emitiendo todos los demás eventos que reciba. Este es el diagrama [inaudible] Mármoles para StartWith. Se puede ver el originario observable emite dos y tres, pero StartWith comienza con uno, por lo que emite uno, dos, y tres. Echemos un vistazo a algunos códigos. Básicamente, tienes la misma configuración que en el último video, donde usamos la forma de eventos para obtener un flujo de eventos, cambiar a un flujo de intervalos usando switch map, pero el intervalo solo se dispara una vez cada dos segundos y medio. Si hago clic en “Inicio”, no vemos que pase nada durante dos segundos y medio. Hubo bastante retraso. Añadamos un evento inmediato en cuanto hagamos click. Importaremos StartWith, y luego, incluiremos startWith en la función de tubería. Empezaremos con el evento con la palabra inicio. En realidad lo movamos por debajo de la función Mapa. El primer evento apenas se iniciará, y luego los próximos eventos mostrarán qué click era y cuál era el número de evento. Ahora, si hago clic en “Inicio”, vemos inicio aparecer de inmediato, y después de dos segundos y medio, vemos pasar los eventos. Si vuelvo a hacer clic en “Iniciar”, vemos inicio aparecer inmediatamente de nuevo. El operador StartWith probablemente no es el operador más común, pero es bastante útil. Tengo un buen número de lugares donde realmente usé esto en mi código. Nos vemos en el siguiente video. 28. Operadores personalizados: Hola ahí. Bienvenido de nuevo a este curso sobre Master RXJS 6 Sin Romper un Sudor. En este video, vamos a echar un vistazo a la creación de operadores personalizados. Crear operadores personalizados es bastante fácil y bastante útil. El mejor modo es comenzar con uno de los operadores estándar. Si realmente estás haciendo algo que es más especialización de uno de los operadores estándar. Comienza su reutilizado en y ya terminas muy rápido. Si necesitas más flexibilidad, calificar y observable usando punto observable crear es el camino a seguir. Entonces echemos un vistazo al código. Aquí tengo el ejemplo que hicimos antes cuando estábamos filtrando en números primos. Básicamente estoy usando el operador de filtro, comprobando los números primos y esta es la función a la que realmente estamos llamando. Funciona como un encanto. Supongamos que queremos usar es primo más como un operador en lugar de algo que llamamos en el filtro. Entonces úsalo así. Si solo trato de llamarlo así, obtendremos un error en tiempo de ejecución. Todavía no es un operador, es solo una función simple. Pero convertir esta función en un operador es bastante sencillo. Empezamos importando el operador de filtro y acabamos de volver al operador de filtro con los parámetros necesarios. En este caso, consigue que se pase el número. y volvemos si ese número es un número primo o no. Funciona exactamente como cabría esperar. Realmente simple. Básicamente todo lo que hicimos se acaba de mover al operador de filtro desde el interior de la tubería a una función separada donde es reutilizable. Supongamos que necesitas ser un poco más flexible y solo usar el operador estándar no lo corta, podemos empezar con usar punto observable crear, nuevo exportará una función pero ahora usaremos observable para crear, para suscribirse al padre observable. Por lo que el parámetro fuente es una fuente observable utilizaremos y luego punto observable crear reinicios, suscribiéndose a puntos y escuchando el evento y emitiendo lo que queramos emitir. En este caso, todos los números primos. Por lo que implementamos el primer parámetro para suscribirse al siguiente manejador. Cada vez que se emite un número, comprobamos si es un primo y si lo es lo volvemos a emitir en este observador. Corregido mi error tipográfico y los artistas, obtenemos de nuevo los números primos. Esto es casi correcto. El que falta es manejar el error y los hechos que cierran los observables. Añadamos el manejador de errores y el manejador Completo como el segundo y el tercer parámetro. De nuevo, sólo vamos a pasar todo al siguiente observable. No hay necesidad de manejar nada específico aquí y todo sigue funcionando. En este caso, en realidad no estamos haciendo nada con errores o terminaciones. Por lo que no vemos diferencia al ejecutarlo. Crear operadores observables personalizados es realmente fácil. Si puedes reutilizar un Operador estándar, bueno para ti, hazlo, es la forma más fácil. De lo contrario, solo crea un nuevo observable y emite lo que quieras emitir entrando desde la entrada. Posiblemente actualizando valores de filtrado de valores, o tal vez emitiendo aún más elementos. Nos vemos siguiente video. 29. Operadores de prueba y observables: Hola Maurice aquí. Volveremos a este curso sobre Mastering RXJS 6 Sin Sudar. Entonces en este video vamos a echar un vistazo a operador de pruebas y flujos observables. En algunos casos simples como el operador de número primo, una simple prueba unitaria estándar realmente servirá. Pero en muchos casos eso no es suficiente y queremos más. Por lo que es una biblioteca realmente útil en npm llamada canicas RxJS, que es una biblioteca de pruebas de canicas. Para que puedas describir el arroyo que esperas como un diagrama de mármol. En realidad puedes probar si lo observable resultante es lo que esperas. Realmente fácil de usar y funcionó con muchos marcos de prueba diferentes. Voy a usar Jest, pero va a funcionar igual de bien con Jasmine o EVA o Mocha. Entonces echemos un vistazo al código. Aquí, tengo dos operador prime que creamos en el video anterior. Estoy usando la versión simple, solo extendiendo el operador de filtro y justo como recordatorio, cuando lo ejecuto, hago clic en Inicio, vemos todos los números primos aparecen. Genial. Entonces vamos a escribir una prueba unitaria para esto que ya acabo de configurar. Entonces si ejecuto esto y agrego el guión, guión opciones Schwartz, así que solo se mantiene activo 14 a los archivos fuente y ejecutamos pruebas según sea necesario. En realidad podemos empezar a probar. Por lo que puedes ver que ya hay un archivo de prueba hay preparado para probar toda bromas pero no hay prueba en él, así que simplemente realmente falla. Se espera un mínimo de una prueba. Hagamos lo simple primero, ustedes los operadores y observables de RxJS estándar y capacidades de prueba de Jest. Por lo que no se requieren bibliotecas adicionales. Entonces usaremos el rango para crear un rango de números y usaré para reducir operador, para reducir eso en una sola matriz con la que podamos probar. Por lo que vamos a crear un rango a partir de uno con el número cinco es función prime y vamos a utilizar para reducir eso en una sola matriz. Nuestra suscripción solo disparará una vez con resultados completos. Entonces vamos a probar si la matriz prime resultante es igual a una matriz conocida. Por lo que vamos a sumar los números 1, 3, 5, 7 y 8. Por lo que en realidad tenemos una prueba fallida aquí porque 1 y 8 no son números primarios. No obstante, si nos fijamos en una salida de Jest, vemos la prueba corrida y pasa. No falla. ¿Por qué es eso? Bueno, la prueba es asíncrona. observables son asincrónicos, por lo que la expectativa concluye después de las pruebas como ya terminadas. Por lo que al agregar el no llamar de nuevo, en realidad podemos asegurarnos de que Jest espere a que se complete nuestra prueba. Ahora vemos una prueba fallida. Podemos ver que no se esperan 1 y 8 pero se esperaba el número 2 porque ese es un número primo. Actualicemos la expectativa. Cambia 1 a 2 y quita 8 y nuestras pruebas van a pasar. Ahí Jest corre y reportes son pruebas como verdes. Genial. Ahora caso simple como este, esto realmente funcionaría, pero si queremos probar un poco más que esto no va a cortarlo. Una biblioteca realmente útil a la hora de probar operadores RxJS y flujos de canicas RxJS. Entonces vamos a importar canicas y vamos a crear una nueva prueba, probando Para números primos hasta 10. Tenemos una nueva prueba, pero en lugar de proporcionar una devolución de llamada, vamos a envolver la devolución de llamada dentro de la función de mármol. Nos dará un contexto que nos permitirá crear observables y probar observables. Entonces usando context.cold puedo crear un observable frío y aquí describo cómo debe ser mi observable. Por lo que cada posición es una ventana de 10 milisegundos. Entonces vamos a esperar 10 milisegundos, emitir 1, esperar otros 10 milisegundos, emitir 2 etc Todo el camino hasta 9 pesos, 10 milisegundos y luego el tubo vertical significa cerrar lo observable. Entonces esos son nuestros números de entrada observables. Podemos crear la expectativa de aspecto similar. Por lo que los números primos observables. Es la misma cadena, excepto ahora pasaremos a uno para el 6 al 8 y el 9 porque esos no son números primos. Por lo que ahora puedo crear un flujo observable resultante mediante el uso de la tubería es operador primo en el número de observable y que debería devolver solo números primos. Por lo que usando el contexto dot expect, podemos probar si esos resultados son nuestro número primo esperado observable. Ahí corre Jest y tenemos unas pruebas de paso. Ahora siempre me gusta tener una prueba fallida. Poco paranoico quería ver fallar mi prueba. Es bastante fácil escribir pruebas que no fallan. Entonces grabemos nueve como número primo inesperado, que por supuesto que no lo es y vemos fallar la prueba con la cantidad nueve más emitida pero esperada exactamente como esperamos. Entonces vamos a quitarlo y nuestra prueba es verde otra vez. Entonces estas obras pero es bastante simple. De hecho, si queremos empezar a emitir números más altos, no podemos hacerlo de esta manera porque cada dígito dentro del arroyo de mármol es algo que se está emitiendo. Entonces si queremos emitir mayor número, podemos hacerlo, pero necesitamos agregar un segundo parámetro a los contextos.cold cuando creamos lo observable, que es el valor real. Alguna gradación de valores objeto con A siendo 11, b 12, etc. Entonces en context.cold, voy a emitir A, B, C, D, E y cuando se va a emitir un A, ve que hay un valor, en el objeto de valores, y en realidad emitirá el valor en lugar de dos dígitos listados. De esa forma podemos emitir todo lo que queramos. Por lo que podemos crear los primos esperados observables de la misma manera. Con por supuesto, B, D, y E no son primos porque 12, 14, y 15 no son primos, por lo que sólo A y C son sobrantes. Ahora cuando ejecutamos la prueba usando Jest, pasa. Esto es realmente agradable vamos a cambiar por un momento de la simple implementación al operador usando observable.create. Vemos todavía pasar la prueba. Pero ahora si olvido o hago un error con la finalización, nuestra prueba también falla, porque con la barra vertical en lo observable, en realidad denota el cierre de un arroyo. Por lo que espera un cierre, pero no sucede porque cometimos un error en nuestro operador y nuestra prueba falla. No estamos probando dentro de la condición de error, pero si lo hiciéramos, pasaría exactamente lo mismo. Así que arregla ese cordón y la prueba vuelve a estar verde. Por lo que crear pruebas unitarias estándar puede ser útil. Fue útil en un caso sencillo como este. Pero en muchos casos donde quieres probar más que un solo operador con el único valor, entonces necesitas un poco más en la biblioteca de mármol RxJS lo hace realmente fácil. Trabaja con un montón de diferentes bibliotecas de pruebas. Funciona en cadenas observables, no solo en un solo operador, y hace que sea realmente fácil probar todo. Entonces nos vemos en el siguiente video. 30. Introducción: Hola, aquí Maurice. Bienvenido de nuevo al curso sobre Master RXJS 6 Sin Romper Un Sudor. En esta sección, vamos a echar un vistazo a diferentes escenarios en los que podría querer usar AJAX y cómo aplicarlo. Un par de los diferentes escenarios que vamos a echar un vistazo es manejar errores, búsqueda incremental con solicitudes AJAX, donde queremos evitar la duplicación de solicitudes y mover archivos a muchos, sondeando periódicamente una API AJAX y mostrar resultados, crear una aplicación similar a un banco, o usar un data store como Redux. Podría haber escenarios muy diferentes en los que te interesen, y algunos de ellos podría no haber cubierto. Si me avisas. Sólo tienes que enviarme un mensaje. Deja un comentario en el foro de preguntas y respuestas. Entonces podría simplemente agregar esos escenarios. Si es algo interesante para otros usuarios y tengo tiempo, sin duda lo añadiré. Sólo avísame en qué te interesa. Nos vemos en el siguiente video cuando empezaremos con el primer escenario. 31. Preventing los errores de completar un observativo: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Mastering RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo a cómo podemos captar errores que impiden que se completen los flujos observables. Por defecto, si se produce un error desde la corriente observable, va a emitir ese error y cerca de cadena. Usando el operador catch, en realidad podemos atrapar estos errores y reemplazar la corriente por una nueva corriente. Pero tu arroyo original todavía se va a cerrar. Nada que puedas hacer al respecto. Al combinar múltiples streams, en realidad podemos recuperarnos de esto cerrando una transmisión secundaria y manteniendo la corriente original en funcionamiento. Echemos un vistazo a algún código. Aquí estoy manejando el evento click desde un botón, generalmente desde el manejador de eventos y estoy usando el operador de mapa de fusión para fusionar en una nueva transmisión, que escribió error, informando que algo malo ha sucedido. Si hago clic en Inicio, podemos ver el error o algo malo sucede y luego cuando despejo e intento volver a empezar, no pasa nada. cerró el arroyo observable original del evento. Introduzcamos el error catch. El lugar donde agregamos esto es importante. Si agrego esto a la tubería desde la corriente de clic original, va a captar el error, pero todavía va a cerrar esa corriente. Con el error catch, devolvemos una nueva cadena. En este caso, voy a devolver la cadena con un solo evento. Vemos que la corriente observable ya no se equivocó sino que se completó. Si despejo y empiezo de nuevo, no pasa nada porque aún está terminado. En este caso, queremos captar el error en el arroyo donde ocurrió y no en el mainstream. En el arroyo que produce el error. Ahora si hago clic en iniciar, vemos el mensaje del operador catch pero no vemos el stream original cerrando y si despejo, podemos presionar start de nuevo y veremos un nuevo mensaje del operador catch para que el cuerda original permaneció abierta. Ten en cuenta que cualquier error completará la transmisión que ocurrieron al usar el error catch, puedes captar el error, pero aún así se cierra para transmitir. Combine múltiples flujos utilizando el mapa de fusión o el mapa de conmutador, o uno de esos operadores con el fin de mantener el flujo original abierto y seguir manejando errores. Nos vemos en el siguiente video. 32. Retratos de retrato: participación primaria. Bienvenido de nuevo al discurso con reunir a los RGs seis sin romper un sudor. Entonces en este video, vamos a echar un vistazo a reintentar acciones que produjeron perecer. Por lo que algunas acciones pueden producir errores, los cuales son reparables mediante un simple reintento. No a sangrar. Ajax solicita. Si hago una solicitud http, búsqueda de datos del sheriff para ese servidor podría estar temporalmente inactiva o mi conexión a Internet podría haber fallado. Podría estar en el dispositivo móvil yendo túnel de tripulación o algo así. Entonces ahí, a los operadores podemos usar para reintentar, fue reintentar, que lo hace de inmediato por un número de toneladas. Y el misterio. Prueba Win Operator, que toma una cadena anidada y observable y volverá a intentarlo cuando se complete esa corriente observable nacional. Por lo que ajax extranjero solicita hacer reintento inmediato. Típicamente es nuevo, no la mejor idea, porque no va a hacer una pausa. Va a enviar múltiples solicitudes al servidor muy rápidamente. Y si el servidor está fallando porque está ocupado, es poco probable que eso ayude. Por lo que reintentar cuando con una ligera fuerza, es típicamente un mejor enfoque. Entonces echemos un vistazo a algún abrigo. Ten un buen abrigo de tiempo al hacer click Estoy haciendo un Ajax dijo agitación a un A P Solicito. Eso en realidad no existe, ir a mi servidor y ofrecer por algo que no existe. Entonces eso se va a sentir con un 40 por fondos del Norte, sin manejo de aire en absoluto todavía. Por lo que si hago clic para botón de inicio, vemos que ocurre la solicitud y fallamos con los fondos 404 Norte. Si vuelvo a hacer clic, no se hacen otras peticiones como lo observable es la muerte. Entonces vamos a importar para reintentar operador y tú que en primer lugar, al igual que atrapar errores. importante la ubicación donde se vuelve a probar en la cadena. Si tuviera que volver a intentarlo después del cambio de mapa y hago clic en iniciar, lo único que va a pasar es que vamos a reintentar cambiar de mapa que en realidad no hace nada por útil. Si hago clic varias veces, podemos ver eventualmente que solicitar se siente así en este caso, realidad queremos reintentar conseguir a Jason. Entonces necesitamos agregar a la función de tubería allí y reintentar a eso Así se vuelve a intentar el gadge asiático . Ahora si hago clic en iniciar, se ven cuatro solicitudes en sucesión rápida, una solicitud inicial y tres reintento. Pero como dije, este difícil no es el mejor enfoque con las solicitudes de Ajax. Por lo que dejamos acostumbrado a reintentar uno para reintentar jefe winrow, el aershow debilita muy nuestro comportamiento, dependiendo del error. En este caso, sólo voy a utilizar a la Interpol y emitir una vez cada segundo. Lo que significa que la estación get será rejuzgada una vez cada segundo. Entonces cuando hago clic en iniciar, vemos múltiples solicitudes ocurriendo. Básicamente solicita cada segundo, y simplemente sigue en marcha. Nunca amigos. Eso se debe a que el intervalo no toma. Entonces si queremos que se limite el número fuera reintento. Nosotros solíamos tomar cooperator y solo tomamos el 1er 3 eventos por lo que haremos una solicitud inicial y luego tres vuelta Intenta solicitudes con segundos en el medio. Son cuatro las solicitudes. No, si vuelvo a hacer clic en empezar. No sintió la cadena observable, por lo que empieza a hacer solicitudes de nuevo. Entonces, ¿qué? Ciertos errores Reintentar es una estrategia muy útil, especialmente Ajax. Solicitar el uso para reintentar cuando el operador es típicamente el mejor enfoque. Entonces nos vemos en el siguiente video 33. Búsqueda incremental: Hola, aquí Maurice. Bienvenido de nuevo a este curso, Mastering RxJS 6 sin romper un sudor. En este video, vamos a echar un vistazo a hacer una búsqueda incremental escribiendo en un cuadro de texto y luego filtrando algunos datos en un servidor AJAX. Empezaremos con un evento DOM, lo mapearemos en el valor que nos interesa. Haremos una solicitud AJAX y se mostrará el resultado y agregaremos algunas bonitas para tener características como estrangular el número de solicitudes, filtrar errores y solicitudes inválidas, etc. Todas las cosas que es relativamente fácil de hacer con RxJS. Echemos un vistazo a algún código. Aquí, tengo la superficie que vamos a usar, es una API de GitHub que nos permite recuperar usuarios en función de su nombre de usuario. Aquí está el ejemplo cuando busco Torvalds. Esto es con lo que vamos a empezar, tenemos una entrada de búsqueda y cada vez que escribimos, vemos los eventos que se imprimen en la consola. Utilizamos los eventos de formulario y tap para lograrlo. No nos interesa todo el evento, solo nombre real. Lo primero que haremos es usar el operador de mapa para extraer el valor real del evento y ahí vemos los valores que se imprimen. Actualmente, obtenemos algo de salida por cada cambio realizado, cada tipo de caracteres y si convertimos cada tipo de personaje en una solicitud Ajax estaríamos usando bastante fuertemente la API de GitHub y todos los resultados intermedios son no se va a mostrar de todos modos. Usemos la función de tiempo de depuración para evitar hacer una solicitud Ajax hasta que el usuario haya pausado por un segundo. Ahora bien, si escribo mi nombre, sólo se ven las salidas después de que he pausado por un segundo. Si borro la salida y escribo Torvald, vemos Torvald y luego después de una pausa y luego si escribo DS, vemos los Torvalds completos pero aún después de una pausa. Convertiremos esto en una petición Ajax. Usaremos un operador de mapa de conmutadores para convertir el nombre de usuario en una solicitud de búsqueda en la API de GitHub. Ahora bien, si abro la pestaña Red y escribo mi nombre en el cuadro de entrada, veo sus solicitudes a GitHub para mi usuario y si lo cambio a Torvalds, vemos otra solicitud. Genial, así que la respuesta que obtenemos de vuelta tiene una propiedad de ítems y sólo nos interesan los ítems, así que mapeemos eso y descartemos el resto de la respuesta. Ahora, sólo vemos una matriz de elementos pero en realidad queremos procesar a los usuarios uno por uno, fin de mostrar alguna interfaz de usuario. Usemos el mapa de fusión, que convierte una colección de una matriz de usuarios en eventos individuales de usuarios. Si escribo mi nombre, vemos una lista de usuarios emitidos. En realidad es poco común codificar y suscribirse así que obtenemos un poco de interfaz de usuario agradable. Obtendremos la tarjeta bootstrap por cada usuario que sea devuelto. Si escribo mi nombre, nos vemos en el segundo ítem y otros. Ahora bien, si escribo Torvalds se hace la solicitud pero básicamente se está agregando a la lista, queremos un poco de efectos secundarios. Antes de buscar, realmente queremos borrar los resultados, usaremos operador de profundidad para establecer el HTML interno del div resultado para vaciar, por lo que se borra el resultado anterior. Ahora bien, si escribo mi nombre, nos vemos a mí y a otros usuarios con nombres similares pero si escribo Torvalds, en realidad llegamos a ver a Linus Torvalds y a otras personas con un nombre similar. Otro problema es, si hago algunos cambios pero termino con el mismo valor después de un segundo, así que eliminaré la S y lo volveré a agregar. En realidad creamos una segunda solicitud que es exactamente idéntica a la solicitud anterior, por lo que usando el operador distinto hasta cambio podemos evitar que eso no emita el mismo valor en secuencia. Si busco Torvalds, llegamos a ver a Linus pero si quito la S y la vuelvo a agregar, no hacemos otra solicitud. Sólo hasta que realmente cambie el valor que buscamos y pause el tiempo suficiente para que las solicitudes se activen, que sí hacemos una solicitud. Si eliminé un valor, vemos que en realidad hay un error de la solicitud Ajax. Ahora bien, si escribo, no pasa nada, hemos matado a lo observable, necesitamos volver a agregar algún manejo de errores. Sólo consigue JSON, usaré el operador de tubería y el operador de error catch para convertir eso en una cepa diferente y en este caso solo usaré una cadena vacía porque no hay nada que ver. Esto captará el error en la corriente Ajax y mantendrá intacta la corriente principal. Ahora bien, si busco a Linus, lo encontraré, si lo vacio, se hace solicitud pero se devuelve un error. Si escribo mi nombre, observable seguía bien, aún podríamos buscar. Aún así, es mejor prevenir ese error. El error es en realidad el resultado de buscar con un nombre de usuario vacío, así que usemos el operador de filtro para evitar buscar nombres de usuario vacíos. Usaremos el operador de doble nota para asegurarnos de que el usuario no esté vacío. La búsqueda de mi nombre, obtenemos los resultados, vaciamos las cosas, la pantalla está en blanco pero no hacemos una solicitud Ajax. Bastante cool. Hacer una búsqueda incremental usando RxJS es bastante fácil. Utilizamos puñado de operadores pero todos jugaban juntos realmente bien y manejaban todo el estado para nosotros mucho más fácil que hacer esto con código imperativo. Realmente me encanta usar RxJS en casos como este. Nos vemos en el siguiente video. 34. Encuesta las peticiones de Ajax: Oye, aquí Maurice. Bienvenido de nuevo a este curso con Master RxJS6 Sin Romper Un Sudor. En este video, rápidamente vamos a echar un vistazo a crear solicitudes de votación Ajax. Vamos a hacer solicitudes Ajax y vamos a seguir repitiendo las solicitudes en un intervalo basado en tiempo para mostrar al usuario los últimos datos. Pero vamos a empezar con un evento de temporizador, y al igual que en el video anterior, vamos a hacer una solicitud Ajax y mostrar los resultados. Echemos un vistazo al código. Esto es lo que vamos a usar un conjunto de datos, base de datos Chuck Norris. Tiene una API RESTful donde podemos conseguir el conjunto de chistes aleatorios de Chuck Norris. En el video anterior, utilizamos de eventos para empezar a solicitar. Ahora podrías pensar que empezaremos con el intervalo, pero si usamos el intervalo, verás que en realidad tenemos que esperar. He especificado cinco segundos y en realidad tarda cinco segundos antes de que se haga la primera solicitud. Una mejor manera de iniciar es con el temporizador, con el temporizador se podría especificar el tiempo de espera inicial 0 milisegundos, y luego opcionalmente con qué frecuencia se debe repetir, así que estoy usando cinco segundos para el intervalo de repetición aquí. En cuanto se carga la página, dispara una solicitud Ajax obtiene los primeros diez chistes y luego cada cinco segundos repite eso, tan bonito. Crear sondeo Solicitud Ajax es bastante fácil, Bastante similar a hacerlo en evento click o algo similar. Utilizamos prácticamente los mismos operadores que el último video, el ajax, CatchError, el VACÍO, MergeMap, SwitchMap, tap y en este caso empezamos las cosas con el temporizador. Nos vemos en el siguiente video. 35. Dibujar en un lienzo: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Master RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo al dibujo en el lienzo. Ya dibujamos algunos en el lienzo, pero ahora lo vamos a hacer un poco más explícito. Empezaremos a dibujar cuando presionemos el ratón hacia abajo. Seguiremos dibujando mientras el ratón esté abajo y pasemos al ratón. Pero con el ratón arriba, o cuando salgamos del lienzo, dejaremos de dibujar. Echemos un vistazo al código. Justo como recordatorio, aquí está el lienzo que teníamos antes. Si muevo el ratón sobre él, dibujamos. Este era el código original, y básicamente empezamos con los eventos de movimiento del ratón, y empezamos a dibujar. Ahora queremos ser un poco más explícitos. Esperamos nuestros eventos de ratón abajo, y sólo con el ratón hacia abajo, comenzamos a dibujar. Agrega otra corriente observable para el evento del mouse down, y en realidad nos suscribiremos a eso. Usaremos un operador de mapa de switch para cambiar del ratón hacia abajo al ratón mover corriente observable cada vez que el ratón esté terminado. Ahora bien, si muevo el ratón, no pasa nada, pero en cuanto baja el ratón, en realidad empiezo a dibujar. Excepto cuando suelto el ratón , sigue siendo dibujando. Todavía tenemos que dejar de dibujar. Agregaremos una tercera corriente observable para los eventos del mouse up. Vamos a importar toma hasta operador, y llevaremos eventos de movimiento de ratón hasta conseguir un mouse up eventos. Ahora asegúrate de agregar toma hasta que en el mouse mover eventos stream de lo contrario, detendremos todo el flujo de eventos. Simplemente queremos detener el movimiento del ratón y aún así escuchar bajadas del ratón para iniciar nuevos eventos de sorteo. Ahora puedo dibujar, puedo dejar de dibujar, y todo se ve bien. Eso es hasta que mi ratón sale del lienzo. Aunque suelte el botón del ratón fuera del lienzo, sigue dibujando. Si dejo el lienzo, también necesitamos hablar dibujo. Voy a crear un observable para el ratón fuera. Agrega stop usando la toma hasta el operador. Ahora, el dibujo en realidad se detiene cuando mi ratón sale del lienzo. Bastante dulce. Dibujar es bastante fácil. Ya tenemos el código básico de dibujo. Al usar el mapa del conmutador y la toma hasta el operador lo hicimos más explícito. Sólo empieza a dibujar cuando el ratón está abajo y deja de dibujar cuando el ratón sube, o salimos del lienzo. Nos vemos siguiente video. 36. Pintura: Hola Maurice aquí, bienvenido de nuevo a este curso sobre Mastering RxJ6 sin sudar. En este video, vamos a continuar con el Canvas y vamos a ampliar el dibujo para incluir alguna funcionalidad más parecida a la pintura. Empezaremos con el ejemplo de dibujo del último video, y añadiremos observables para especificar el color y el tamaño de línea de nuestro dibujo. Antes solíamos combinar en los operadores WithLatestFrom para insertar esos en la corriente observable. Entonces echemos un vistazo al código. Entonces este es básicamente nuestro ejemplo anterior donde podemos dibujar en el Lienzo. Pero he incluido las entradas de color y línea. Pero ahora mismo no hacen nada realmente todavía. Entonces empecemos con el color. Tengo una referencia a la entrada llamada estilo de trazo. Por lo que crearemos un nuevo flujo de estilo de trazo usando FromEvent y escucharemos el InputEvent. Por lo que estoy usando el control de entrada de color HTML5 estándar allí. Por lo que sólo nos interesa el valor show all use el operador de mapa para obtener el valor de la entrada. Al igual que lo hemos hecho una docena de veces antes. Ahora quiero inyectar eso en el arroyo, escuchamos para pintar. Operador tan conveniente para usar hay withLatestFrom, donde puedo combinar diferentes cadenas de entrada en una sola secuencia. Entonces los combinaré. MouseDown stream, que es una secuencia StrokeStyle, y el segundo parámetro es la función para combinar los diferentes valores, no interesados en un evento MouseDown, por lo que ignoraremos eso, y tomaremos al estilo de trazo y giraremos que en un objeto de opciones que tiene que trazar estilo agregará más a eso más adelante. Ahora está en el mapa de interruptores, obtenemos ese objeto de opciones con nuestro estilo de trazo. Entonces agregaré ese objeto 2D creado, lo que significa que es igual que formar objetos. Entonces agarraré las opciones a partir de ahí en la suscripción y estableceré el estilo de trazo de contexto, haga lo que sea el estilo de trazo que especificamos. Entonces ahora si selecciono el color, rojo por ejemplo, puedo dibujar una línea roja. El único problema si refresco la página y empiezo a dibujar, no pasa nada, porque aún no tenemos color inicial. Por lo que necesitamos hacer al estilo de trazo un poco más inteligente. Tienes que especificar que comienza con el valor inicial de la entrada. Por lo que solo especificaremos el valor inicial ahí, y ahora empieza con el valor para que podamos dibujar de inmediato. Podemos dibujar una línea negra, y ahora puedo cambiarla a azul y podemos dibujar una línea azul claro o más morada. Dulce. Hagamos lo mismo con el LineWidd. El enfoque es el mismo, así que solo copiaré esa cadena de estilo de trazo y cambiaré las variables para usar un LineWidd. Nota conLatestFrom operador es realmente conveniente. Podemos usar tantos flujos de entrada como queramos. Por lo que agregaremos el flujo LineWidt a eso y agregaremos eso a los objetos options. Ahora en nuestra suscripción, solo puedo establecer el LineWidd en el contexto, simple. Ahora solo podemos empezar a pintar. Pero si hago al tamaño de línea un poco más grande, obtenemos una línea más gorda. Si cambié el color a rojo, obtenemos la línea roja gorda, Niza. Entonces [inaudibles] somos expertos. A mí no me gusta duplicar esa cadena de entrada. Pero vamos a crear una pequeña función auxiliar, obtener cadena de entrada y pasaremos en elementos DOM y devolverá una corriente de sus valores utilizados para los elementos que se pasan, y ahora el flujo de estilo de trazo es el resultado de llamar a get input string. Haremos lo mismo para el flujo LineWidd, y todo sigue funcionando. Bonita función de ayudante pequeña. Por lo que agregar funcionalidad como pintura es bastante simple. Simplemente agregamos entradas para tomar cualquier propiedad que queramos y utilizaremos para StartWith y el withLatestFrom para agarrar el valor y para incrustarlos en el arroyo que solíamos pintar, dulce. Entonces nos vemos en el siguiente video. 37. Comparte las suscripciones: Hola, soy [inaudible]. Bienvenido de nuevo a este curso sobre Master RXJS 6 sin sudar. En este video, vamos a echar un vistazo rápido a compartir suscripciones. ocasiones necesitas compartir suscripción porque en la mayoría de los casos, cada vez que te suscribas a un observable, creará un nuevo observable y ejecutará de nuevo todo el código en lo observable. Ahora ese no siempre es el caso, pero en la mayoría de los casos lo es. El operador de acciones te permitirá realmente compartir todo el código en un observable. Por lo que sólo se ejecuta una vez por cada suscripción. Eso lo hace más rápido. Echemos un vistazo a algún código para un ejemplo. Aquí tengo nuestro ejemplo de búsqueda de nuevo donde estábamos buscando nombres de usuario en GitHub y escribí Torvalds. Vemos aparecer una lista de usuarios y se está haciendo una sola Solicitud Ajax. Parte de la solicitud es el número de usuarios devueltos, el total cuenta. Entonces si incluyo eso en los conteos de resultados, ahora vemos que en realidad hubo dos Rsequests Ajax hechos. Eso se debe a que se estaban suscribiendo al flujo de eventos dos veces. Por lo que todo ahí dentro se ejecuta dos veces, incluido el código Ajax. Ahora eso es un poco derrochador, así que hagamos un solo código Ajax para obtener ambos resultados de ese código único. Importaremos el operador de acciones, y agregaremos el operador de acciones a la tubería. Recuerda que agregas esto en los puntos donde todo antes que quieras compartir entre todas las suscripciones. Entonces lo estoy agregando después del código Ajax en este caso. Ahora si busco Torvalds, obtenemos el número total de usuarios 126 y la lista de usuarios con una sola solicitud. Si vuelvo a buscar mi nombre, una sola solicitud para el número total, y los propios usuarios, mucho mejor. En ocasiones lo mejor es compartir observables si vas a hacer múltiples suscripciones. No siempre es necesario, pero muy a menudo lo es. En este caso, quedó muy claro que la solicitud del Ajax se estaba haciendo varias veces. No siempre está tan claro. Básicamente el operador a utilizar es compartir. Existe una relación con el operador SharePlay, que es un poco más avanzado y en realidad recordará valores y los volverá a emitir cuando se hagan nuevas suscripciones. Eso lo usaremos en otro video. Nos vemos en el siguiente video. 38. Redux como la tienda: Hola, aquí Maurice. Bienvenido de nuevo al marcador de Master RXJS 6 Sin Romper Un Sudor. En este video, vamos a echar un vistazo a crear un almacén de datos simple como Redux. Redux es un contenedor de estado predecible para JavaScript. Muy popular, sobre todo en el mundo React y es muy capaz y extensible. No vamos a hacerlo tan avanzado. Vamos a hacer una implementación muy básica en RxJS porque en realidad es bastante simple de hacer. Echemos un vistazo al código. Este es el sitio real de Redux, por lo que el contenedor de estado predecible para JavaScript. Aprenderás más al respecto, te recomiendo encarecidamente que visites estos sitios. Para un iniciador, tengo una pequeña app con un incremento y un botón de decremento y un add 10. Aquí se ve el código, los manejadores de eventos para incrementos y decrementos. Ya ves importamos un reductor y una función CreateStore, y llamamos al CreateStore posiblemente en el reductor. Después nos suscribimos a la tienda y en realidad mostramos los estados actuales como una cadena JSON formateada. También nos suscribimos a los diferentes botones y acciones de despacho. pueden ver las acciones básicamente son objetos con un tipo que denota el tipo de acción, y en algunos casos como en el add 5, tiene una carga útil que contiene datos adicionales. En un escenario típico de Redux, estas acciones se crean usando funciones de ayuda, pero para que este ejemplo sea sencillo, no me molesté en hacer eso. Pero sí lo hace más confiable y más comprobable, por lo que recomendamos encarecidamente que lo hagas. Reductor es realmente simple. Básicamente escucha las acciones y devuelve un nuevo estado cada vez que la acción modifica el estado. Uno de los principios básicos son los datos inmutables. Nunca cambias el estado, siempre creas un nuevo objeto de estado. Eso es lo que estoy haciendo en las funciones de incremento y decremento. Básicamente estoy creando una copia del objeto de estado, estableciendo el conteo, en este caso no hay nada más en él, tan bastante simple. Pero si hubiera más datos en ella, se preservará y se actualizaría la cuenta JSTOR. El enunciado switch como esta no es muy funcional, pero es la forma en que el código Redux se escribe con bastante frecuencia. Te mostraré cómo hacer esto más funcional en un momento, pero por ahora dejaremos esto como una simple declaración de cambio. Una cosa más a destacar aquí es que la primera vez que se llamará esto, los estados serán indefinidos y el estado inicial se establecerá como el estado actual. Ahí es donde se usa esa variable de estado inicial. El firma para una función de reducción es muy simple y siempre la misma. Básicamente devuelve un nuevo estado el cual es resultado de aplicar una acción al viejo estado. Por lo que nuevo estado es viejo estado más acción. Simple. El CreateStore está bastante vacío. Hay una función CreateStore la cual exportamos pero no hay nada ahí todavía. En este caso, queremos controlar cómo se emiten los eventos por lo que el sujeto es una buena manera de crear nuevos observables. Entonces crearemos un flujo de acción porque básicamente es una corriente de acciones que se emiten, que es el resultado de un sujeto. Entonces la tienda es en realidad el resultado de trabajar con el estado actual y las acciones. Utilizamos un operador de escaneo para realmente computar el estado actual. Con el escaneo, pasamos una función reductora en y establecemos su valor inicial para que sea indefinido. De esa manera se llama al reductor con indefinido como el primer estado, lo que provocará que se establezca el estado inicial en el reductor. De esa manera toda la responsabilidad de lo que es estado real y cómo se actualiza está dentro del reductor y no en el más genérico CreateStore. Por lo que regresamos a tienda. Necesitamos poder despachar acciones, así que agreguemos una función de despacho a la tienda. Todo lo que hace es básicamente emitir esas acciones en el arroyo. Ahora si hago clic en “Incremento” o “Decremento”, podemos ver el cambio de estado. Lo único es que aún no había estado inicial. Entonces empecemos por emitir un evento para inicializar el estado. Usaremos el operador StartWith y antes del escaneo realmente despachará un evento. Lo llamaremos con tipo subrayado subrayado, en él subrayado subrayado. El nombre realmente no importa siempre y cuando sea único y solo esté destinado a inicializar el estado. Por lo que ahora ver el conteo empezar con cero. Una cosa más, este es estado de toda la aplicación por lo que debe ser compartido por todas las suscripciones. Usaremos el SharePlay. Aviso operador de acciones protege el SharePlay, por lo que las nuevas suscripciones realmente obtendrán la última versión del estado. Estamos pasando 1 porque sólo queremos recordar un último evento estatal, no todos los diferentes intermedios. Todavía funciona. Genial. Entonces hagamos un poco mejor este reductor. Porque las declaraciones de cambio como esta son agradables y eso es lo que se ve en muchos ejemplos de Redux. Pero lo haremos un poco más funcional porque RxJS se trata más de la programación de estilo funcional. Crearemos un diccionario con manejadores. Añadiré un manejador para la acción de incremento. Esto sólo toma el viejo estado como insumo. No nos importa la acción. Ahí no hay nada de utilidad. Básicamente regresaremos el nuevo estado a partir de ahí. Haz lo mismo con el decremento. Tenemos que poner estos entre paréntesis para que devuelva ese objeto, lo contrario se considerará un bloque de código. Entonces vamos a incluir el decremento. Ahora ya no necesitamos cambiar de sentencia, pero podemos hacer una simple búsqueda en el manejador de objeto para encontrar el manejador correcto para unas acciones específicas. Una vez que tengamos ese manejador podemos ejecutarlo con los viejos estados y la acción regresando al nuevo estado. Ahora podría haber acciones activadas que en realidad no manejamos, como ese subrayado guión bajo en ella acción de subrayado. Entonces vamos a agregar un manejador predeterminado que simplemente devuelve el estado actual. El manejador es el para el tipo especificado o el predeterminado. Nuestro comportamiento sigue siendo el mismo, pero el código es más funcional ahora. Ahora agreguemos un nuevo manejador para la acción de agregar. Crearemos un manejador llamado ADD. Se necesita un estado. También toma la acción porque la carga útil en la acción indicará cuánto se debe agregar al estado actual. En lugar de más 1, le agregamos la acción a la carga útil. Ahora todavía podemos aumentar y disminuir, pero también podemos sumar 5. Recrear reductores de esta manera es mucho más agradable. Obtenemos funciones comprobable muy pequeñas. Estos tipos no lo exporté pero sólo podemos exportar esos manejadores y hacerlos muy comprobable. Por lo que hacer la gestión estatal en un estilo Redux con RxJS es muy sencillo. Creamos una nueva corriente usando el tema. Básicamente utilizamos un operador de escaneo para computar el estado actual basado en el estado anterior y la acción. Utilizamos el operador startWith para inicializar el estado y usamos el SharePlay para que nuevas suscripciones lleguen automáticamente al estado actual y se comparta el estado entre todas las suscripciones. Bastante dulce. Entonces te veré en el siguiente video. 39. Las suscripciones de la tienda en Redux: Hola Maurice aquí. Bienvenido de nuevo a este curso sobre masterización de RXJS 6 sin romper un sudor. En este video, vamos a realzar un poco la tienda Redux. Vamos a agregarle suscripciones al estilo RxJS 6, por lo que no tenemos que usar solo códigos imperativos para despachar eventos. Esto resulta bastante fácil porque el tema que solíamos crear una corriente observable, también es la forma correcta para actuar como suscriptor. Simplemente puedes empujar esos sujetos en cuanto a la suscripción de flujos de eventos, y encadenar los diferentes flujos de esa manera. Echemos un vistazo al código. Así como recordatorio aquí tenemos el código anterior. Tengo un botón de incremento a las cinco e incremento. Si hago clic en incremento, vemos el aumento de conteo, y lo mismo con los otros botones. En lugar de fusionar add event lister, quiero hacer esto en un estilo más reactivo. Usaremos los eventos from para crear un flujo observable de eventos de clic, y usaremos el operador de mapa para crear el objeto de acción que enviamos. Entonces solo queremos suscribirnos a tienda a este flujo de eventos. Ahora no puedo simplemente pasar a almacenar, eso no va a funcionar, porque la tienda no es el tema real. Si nos fijamos en crear tienda, vemos que la tienda es solo un resultado del evento de canalización Struger, acción stream, y el flujo de acción, ese es el que realmente necesitamos suscribirnos. Podemos agregar eso a la exposición de la tienda de esa manera, entonces podemos usarlo en la suscripción. Nos suscribiremos usando tienda stream dot action stream. Ahora vemos que el incremento aún funciona. Por supuesto, más cinco y el decremento aún funcionan. Todavía no han cambiado. Vamos a actualizarlos de la misma manera. Copiemos el código y actualicemos los objetos de acción y los manejadores de eventos. Ese es el decremento hecho. Ese es el más cinco hecho. Veré trabajar a todos los manejadores de eventos. Agradable. Usar un estilo más reactivo con RxJS es realmente simple, porque son todos streams observables que solo podemos encadenar juntos. Dulce. Nos vemos siguiente video. 40. El final: Hola, aquí Maurice. Bienvenido de nuevo a este curso sobre Mastering RXJS 6 Sin Romper un Sudor. Enhorabuena, lo lograste. Has llegado al final del curso. Por lo que esperemos, has visto que RxJS es una gran biblioteca. Es genial para la programación asíncrona reactiva. Utilizar flujos observables, manipular esos flujos utilizando operadores, fusionando, filtrando flujos, transformando, etcétera. Muchas capacidades. Entonces ahora depende de ti. Adelante, construye algo genial usando RxJS, y avísame qué es. Si es algo público de cara y puedo ver, siempre me gusta ver lo que hace la gente usando las técnicas que les enseño. Entonces este es el final de este curso, pero siempre hay más que aprender. Para cualquier cosa más que quieras ver en este curso, para más escenarios o tal vez operadores que quieran ver cubierto, avísame. Los añadiré y te avisaré cuando esté hecho. Aprenderemos algo más sobre reacciona, o Angular, o GET, o cualquiera de esas cosas, soy juego. Entonces solo avísame y le echaré un vistazo. Así que buena suerte. Todo lo mejor, y diviértete con RxJS.