1
00:00:00,300 --> 00:00:06,060
Bienvenidos en esta clase vamos a ver el operador TAP, que también es bastante importante, junto con

2
00:00:06,180 --> 00:00:11,770
el MAP, uno de los operadores más utilizados en todo este paradigma en este mundo de programación Reactive

3
00:00:11,870 --> 00:00:15,220
Stream, que es muy importante y es la base para trabajar en Angular.

4
00:00:15,510 --> 00:00:17,460
Bien, pero de qué se trata este operador?

5
00:00:17,550 --> 00:00:21,930
Tap tap viene de la palabra tomar, hacer algo con los valores.

6
00:00:22,020 --> 00:00:28,230
Los item se van transmitiendo y podemos tomar estos valores y realizar alguna tarea, algún proceso,

7
00:00:28,290 --> 00:00:31,560
pero sin modificar, sin tocar los valores en sí mismos.

8
00:00:31,590 --> 00:00:35,400
Típicamente, por ejemplo, guardar algo o registrar estos datos.

9
00:00:35,490 --> 00:00:41,480
Estos valores en el log o asignar a un atributo de la clase justamente lo que hace en la clase component.

10
00:00:41,490 --> 00:00:48,030
Por ejemplo, el método suscribe que toma el valor que se emite de este flujo reactivo y lo asigna al

11
00:00:48,030 --> 00:00:48,900
atributo clientes.

12
00:00:48,930 --> 00:00:51,570
En el tap podríamos ser exactamente lo mismo.

13
00:00:51,830 --> 00:00:56,910
De hecho, en el script lo podríamos dejar completamente en blanco y hacer esta operación que es asignar.

14
00:00:56,970 --> 00:01:05,250
Lo podríamos ser entonces el TAP, si bien no realiza el suscrip, no suscribe un observador a nuestro

15
00:01:05,250 --> 00:01:08,190
zer bable, pero si nos permite realizar algo bien.

16
00:01:08,310 --> 00:01:09,450
Veamos algunos ejemplos.

17
00:01:10,050 --> 00:01:16,440
Lo primero es tener que importar acá el operador igual que cualquier operador map el cache de error,

18
00:01:16,500 --> 00:01:18,480
el tap se tiene que importar.

19
00:01:18,690 --> 00:01:22,280
Luego en el pipe siempre dentro del pipe lo podemos utilizar.

20
00:01:23,160 --> 00:01:28,770
Recuérdense para ir por comas, ya que lo importante si se fijan acá en el MAP hacemos la conversión

21
00:01:28,860 --> 00:01:29,670
a clientes.

22
00:01:29,790 --> 00:01:34,590
El MAP se encarga de transformar el tarnos, pero acá el tipo de dato sigue siendo del tipo object.

23
00:01:34,720 --> 00:01:37,200
Si, fijate que en el map es object, en el tab también.

24
00:01:38,130 --> 00:01:42,960
Por ejemplo responsos y acá podríamos ejecutar alguna tarea.

25
00:01:43,020 --> 00:01:47,070
Ahora, por ejemplo, si yo quiero mostrar los datos de los clientes en el log.

26
00:01:47,560 --> 00:01:51,180
Tomar el response y por ejemplo invocar el foreach.

27
00:01:51,220 --> 00:01:55,410
Pero como es del tipo object, acá el foreach no existe.

28
00:01:55,530 --> 00:02:01,790
Entonces lo que tenemos que hacer es previamente indicar que el response es del tipo cliente corchete.

29
00:02:02,940 --> 00:02:10,140
Hacer esto, cambiar el tipo justamente como lo hicimos en el MAP no modifica los sitten del flujo.

30
00:02:10,650 --> 00:02:12,990
Entonces acá en vez de response podríamos colocar clientes.

31
00:02:14,800 --> 00:02:21,070
Y acá si podemos usar el forillo, el foreach tampoco toca los valores, simplemente va mostrando los

32
00:02:21,070 --> 00:02:21,400
datos

33
00:02:24,610 --> 00:02:27,370
y acá podemos mostrar los datos de cada cliente.

34
00:02:27,400 --> 00:02:29,530
Los valores lo podemos registrar en el log.

35
00:02:33,240 --> 00:02:39,060
Por ejemplo, el cliente punto nombre, si se fijan, acá estamos tomando la respuesta y se la asignamos

36
00:02:39,120 --> 00:02:41,620
al área de clientes del tipo cliente corchete.

37
00:02:41,940 --> 00:02:48,480
Solamente estamos creando una variable dentro del TAP como un arreglo de clientes y mostramos los datos,

38
00:02:48,540 --> 00:02:51,690
pero no cambia, no modifica el flujo dato.

39
00:02:51,780 --> 00:02:55,470
Si se fijan acá es el tipo object y acá también es del tipo Object.

40
00:02:55,500 --> 00:03:02,010
Por lo tanto, en el TAB en ningún momento cambiamos el tipo de dato a cliente, mientras que si tuviéramos

41
00:03:02,100 --> 00:03:09,090
un poco más abajo del MAP, otro tap tap ya sería del tipo corchete cliente, ya que este map se encarga

42
00:03:09,090 --> 00:03:16,890
de cambiar el response del tipo Object a un tipo cliente corchete porque lo está retornando, está retornando

43
00:03:16,980 --> 00:03:20,700
este cambio y además con todos los cambios de cada ítem, por ejemplo con el nombre en mayúscula.

44
00:03:20,820 --> 00:03:29,130
Pero bien, vamos a copiar entonces este tap tal cual lo vamos a pegar justo debajo del map, una coma

45
00:03:30,630 --> 00:03:35,580
para separar, pero bien, acá el response ya del tipo cliente, como había explicado por el MAP.

46
00:03:35,820 --> 00:03:37,350
Así que esto ya no es necesario.

47
00:03:37,350 --> 00:03:40,330
Simplemente podemos usar el response en vez de clientes.

48
00:03:40,680 --> 00:03:41,710
Esa es la gran diferencia.

49
00:03:41,940 --> 00:03:45,810
Entonces también es importante el orden en que implementemos los TAP.

50
00:03:46,050 --> 00:03:49,700
Por ejemplo, el primer tap, el response del tipo Hoggett.

51
00:03:49,950 --> 00:03:57,660
Luego el map cambia el respond Hoggett a un tipo cliente corchete a un tipo listado cliente y a calta

52
00:03:57,780 --> 00:03:59,460
es del tipo corchete client.

53
00:03:59,640 --> 00:04:02,790
Entonces, por tanto, acá siempre el orden es fundamental.

54
00:04:04,420 --> 00:04:11,980
Incluso acá podríamos colocar también un mensaje en el log, como por ejemplo vamos a colocar el nombre

55
00:04:11,980 --> 00:04:15,610
de la clase 2 punto tab 1.

56
00:04:18,660 --> 00:04:21,070
Y acá colocamos el top 2 para diferencia.

57
00:04:22,240 --> 00:04:25,310
Ahora levantamos tanto nuestro backend como nuestro frontend.

58
00:04:25,420 --> 00:04:27,310
Ambas aplicaciones vamos a estar consola.

59
00:04:28,090 --> 00:04:30,340
Si se fijan, aparece cliente ser vista.

60
00:04:30,420 --> 00:04:36,610
Uno es el primero que se invoca y aparecen todos los nombres en minúscula, pero luego se ejecuta el

61
00:04:36,700 --> 00:04:37,570
map que cambia.

62
00:04:37,570 --> 00:04:43,840
La respuesta del tipo Hoggett la convierte a una lista, a un arreglo de cliente cliente corchete y

63
00:04:43,840 --> 00:04:47,800
también cambia cada nombre de cada ítem, de cada objeto en mayúscula.

64
00:04:47,890 --> 00:04:51,070
Y acá en el tab 2 ya se muestran los nombres convertió mayúsculas.

65
00:04:51,100 --> 00:04:55,210
Entonces importante la secuencia, el orden también que le debemos en nuestro flujo rectivos.

66
00:04:55,270 --> 00:04:57,410
Bien, vámonos a clientes.

67
00:04:57,430 --> 00:04:58,270
Component.

68
00:04:58,450 --> 00:04:59,380
A nuestro componente.

69
00:04:59,500 --> 00:05:01,210
Acá en el ingi?

70
00:05:01,300 --> 00:05:08,170
On init, justamente donde estamos asignando este atributo diss cliente con el valor del cliente que

71
00:05:08,170 --> 00:05:10,870
viene del flujo de flujo observable.

72
00:05:11,130 --> 00:05:12,460
Bien importemos el tap.

73
00:05:15,130 --> 00:05:17,380
Recuerden que acá hay que agregar las llaves.

74
00:05:17,440 --> 00:05:19,220
Es importante porque son operadores.

75
00:05:19,240 --> 00:05:20,530
Podríamos tener más de uno

76
00:05:24,670 --> 00:05:26,020
rx operato.

77
00:05:26,350 --> 00:05:26,650
Ahora.

78
00:05:26,650 --> 00:05:30,120
Cómo podrían implementar acá este operador en get clientes?

79
00:05:30,220 --> 00:05:31,450
Este es nuestro observable.

80
00:05:31,450 --> 00:05:40,420
Así que con Pipe acá podríamos tener nuestro operador y acá el suscrip como es un solo operador no es

81
00:05:40,420 --> 00:05:48,310
necesario entonces ningún tipo de coma bien, este ya viene del tipo clientes corchete por el MAP.

82
00:05:48,430 --> 00:05:49,720
En el map lo convertimos.

83
00:05:49,780 --> 00:05:52,630
Así que acá también podríamos imprimir valores.

84
00:05:53,380 --> 00:05:55,570
Por ejemplo, vamos a copiar esto.

85
00:05:57,760 --> 00:05:58,480
Y lo pegamos acá.

86
00:05:58,720 --> 00:06:04,330
Tengo que cambiar acá el response por clientes, quien sería el tap 3.

87
00:06:05,940 --> 00:06:07,530
Que se ejecuta en la clase.

88
00:06:07,560 --> 00:06:08,490
Clientes, componentes.

89
00:06:08,730 --> 00:06:14,730
Entonces vamos a cambiar clientes servis por clientes compen para diferenciar y faltaría cerrar el paréntesis

90
00:06:14,820 --> 00:06:17,380
del forito con su puntico.

91
00:06:17,640 --> 00:06:23,720
Vamos a guardar y ahora vemos que tenemos el tab 3 dentro de clientes compone mayúscula.

92
00:06:24,000 --> 00:06:29,430
Entonces el TAP nos sirve justamente para eso, trabajar con los datos para realizar algún tipo de tarea.

93
00:06:29,730 --> 00:06:31,190
Ahora bien, qué pasa con el script?

94
00:06:31,320 --> 00:06:36,390
El script, a pesar de que no estamos sufriendo en el observable, también podemos hacer algo similar

95
00:06:36,480 --> 00:06:37,020
que era el tap.

96
00:06:37,140 --> 00:06:40,950
De hecho, podríamos hacer exactamente lo mismo realizar algo sin cambiar los datos.

97
00:06:41,040 --> 00:06:44,400
Es importante tener en cuenta que el operador TAP no retorna nada.

98
00:06:44,490 --> 00:06:47,180
Es un point, nos retorna el item que estamos emitiendo.

99
00:06:47,220 --> 00:06:52,470
Entonces por ejemplo, en el script podríamos cortar esto lo podríamos quitar y dejamos el script sin

100
00:06:52,470 --> 00:06:53,580
ningún tipo de operación.

101
00:06:53,700 --> 00:06:56,040
No estamos escribiendo si, pero sin hacer nada.

102
00:06:56,130 --> 00:06:59,100
Y en el TAP podríamos dejar esto.

103
00:06:59,160 --> 00:07:04,170
Podríamos asignar los clientes al atributo clientes y eso estaría perfecto.

104
00:07:04,260 --> 00:07:06,060
También lo podríamos hacer dentro del TAP.

105
00:07:07,640 --> 00:07:08,900
Lo dejamos de esa forma.

106
00:07:09,020 --> 00:07:14,660
Obviamente, clientes, que sería el que estamos pasando por argumen toca en el tap, se lo asignamos

107
00:07:14,660 --> 00:07:16,580
al atributo clientes y guardamos.

108
00:07:16,790 --> 00:07:19,670
Vemos que el resultado es exactamente el mismo.

109
00:07:19,760 --> 00:07:20,420
Ningún cambio.

110
00:07:24,160 --> 00:07:30,310
Si se fijan, incluso el TAP solamente podría tener esto, lo cortamos y lo pegamos acá.

111
00:07:30,850 --> 00:07:37,690
Simplemente asignar el valor, el valor clientes al atributo clientes y dejamos el shockley completamente

112
00:07:37,780 --> 00:07:39,250
sin hacer nada vacío.

113
00:07:39,580 --> 00:07:40,060
Lo mismo.

114
00:07:41,930 --> 00:07:43,460
Ahora, qué pasa si omitimos a Sucre?

115
00:07:44,060 --> 00:07:48,500
Obviamente no pasa nada, no pasa nada hasta que nos subiríamos cn el suscrip.

116
00:07:48,590 --> 00:07:53,520
El observable nunca se va a ejecutar, vamos a tener nada en el navegador.

117
00:07:53,600 --> 00:07:59,570
No hay ningún ítem que estemos transmitiendo, por eso es siempre fundamental e importante el suscri

118
00:07:59,870 --> 00:08:00,020
ben.

119
00:08:00,020 --> 00:08:05,800
Por lo tanto, usar el TAB asignando al atributo prácticamente lo mismo que esto.

120
00:08:06,390 --> 00:08:12,350
Si en el TAP o ahí podríamos ir variando el script puede hacer algo, algún tipo tarea y el tap o los

121
00:08:12,350 --> 00:08:17,780
tap, porque podríamos tener varios tabs dentro del ciclo día, podrían ejecutar diferentes tareas,

122
00:08:17,840 --> 00:08:18,800
diferentes procesos.

123
00:08:21,770 --> 00:08:24,080
Lo vamos a dejar así, pero de cualquier forma estaría bien.

124
00:08:24,200 --> 00:08:25,430
Bien, eso es todo.

125
00:08:25,550 --> 00:08:32,270
Quería dar un poco más de énfasis a los operadores, diferenciar un poco entre el suscrip, el tap.

126
00:08:32,480 --> 00:08:38,240
Bueno, el sucre no es un operador, más bien es un método que nos permite suscribirnos dentro de flujos,

127
00:08:38,240 --> 00:08:39,740
suscribir un observador.

128
00:08:39,800 --> 00:08:44,560
Como decía siempre importante el Sucre y nos permite también hacer algo.

129
00:08:44,750 --> 00:08:51,110
Pero el TAP no suscribe, simplemente podemos realizar algún tipo de tarea y hemos llegado a su fin

130
00:08:51,230 --> 00:08:52,520
y hasta la próxima.

131
00:08:52,580 --> 00:08:53,240
Nos vemos.