1
00:00:02,630 --> 00:00:05,410
Comencemos con los favoritos.

2
00:00:05,420 --> 00:00:13,270
Quiero asegurarme de que cuando estoy en una receta, puedo hacer clic en esa estrella y eso agrega esto como favorito y lo muestra aquí

3
00:00:13,660 --> 00:00:18,490
en la pantalla de favoritos donde actualmente no veo nada porque eliminé estos favoritos falsos.

4
00:00:19,880 --> 00:00:20,200
Para eso

5
00:00:20,210 --> 00:00:25,830
comenzaré en la carpeta de la tienda, en la carpeta de acciones y agregaré una nueva carpeta que también nombraré comidas. js, puedes nombrarlo de manera diferente si eso te confunde,

6
00:00:25,840 --> 00:00:30,570
pero sí, estos dos archivos son comidas. js aquí en acciones

7
00:00:30,560 --> 00:00:34,970
y comidas. js en reductores y en las acciones comidas. js, configuraré

8
00:00:34,960 --> 00:00:41,900
algunas acciones de Redux que generalmente comienzan configurando algunos identificadores únicos

9
00:00:41,930 --> 00:00:48,760
que almaceno en constantes y que serán los favoritos de alternancia.

10
00:00:49,070 --> 00:00:50,710
Puede usar lo que quiera aquí,

11
00:00:50,780 --> 00:00:53,860
el valor que almacena aquí generalmente es el mismo identificador, por lo

12
00:00:54,350 --> 00:00:59,570
que este es el valor del identificador y simplemente se almacena en una constante para que no tengamos que

13
00:00:59,570 --> 00:01:02,870
escribirlo manualmente más tarde, pero siempre podemos importar Esta constante y evitar

14
00:01:02,870 --> 00:01:03,690
errores tipográficos.

15
00:01:03,860 --> 00:01:05,440
Una vez más, si

16
00:01:05,440 --> 00:01:09,730
es nuevo para usted, definitivamente revise primero un recurso dedicado de React Redux.

17
00:01:09,950 --> 00:01:12,680
Ahora también usaré el patrón creador de acciones aquí,

18
00:01:12,680 --> 00:01:19,190
lo que significa que tengo ese identificador aquí, pero ahora también exportaré una función que me crea una acción porque una acción no

19
00:01:19,280 --> 00:01:24,050
es solo un identificador a menudo y en este caso ese es el caso, también necesita

20
00:01:24,050 --> 00:01:29,630
algo de carga adicional y, por lo tanto, en realidad tenemos una acción que es un objeto con identificador

21
00:01:29,780 --> 00:01:35,930
y carga útil y, por lo tanto, aquí agregaré una función que me crea tal objeto de acción y nombraré este

22
00:01:35,930 --> 00:01:37,430
favorito de alternar de esta

23
00:01:37,490 --> 00:01:42,950
manera, seleccione el identificador pero en el caso del camello y esta es una función que puede recibir algunos

24
00:01:42,950 --> 00:01:48,500
datos porque yo seré el que lo llame y que debería devolver un objeto Javascript que describa esta acción,

25
00:01:48,500 --> 00:01:50,300
por lo que tiene un tipo,

26
00:01:50,330 --> 00:01:55,010
así es como se llama ese campo identificador pero en general es libre de usar lo

27
00:01:55,010 --> 00:01:55,590
que

28
00:01:55,670 --> 00:01:57,490
quiera allí y, en mi caso,

29
00:01:57,500 --> 00:02:03,700
ese será el favorito de alternar, por lo que señalo este identificador, uso esta cadena como identificador y luego cualquier dato adicional

30
00:02:03,740 --> 00:02:09,500
que desee, por ejemplo, aquí ' necesitaré anunciar d la ID de comida de la comida que debe activarse y

31
00:02:09,500 --> 00:02:14,540
eso significa que esta función también necesita obtener esta ID como entrada porque de lo contrario no

32
00:02:14,540 --> 00:02:16,700
puedo almacenarla en la acción que creé.

33
00:02:16,710 --> 00:02:21,120
Así que este es mi creador de acción para la acción favorita de

34
00:02:21,120 --> 00:02:27,810
alternar, ahora en el reductor, quiero actuar cuando obtengo dicha acción favorita y para esto, usaré un patrón que probablemente habrás

35
00:02:27,810 --> 00:02:28,370
visto

36
00:02:28,380 --> 00:02:34,020
si trabajaste con Redux antes , Usaré una declaración de cambio aquí y encenderé mi tipo de

37
00:02:34,020 --> 00:02:40,890
acción porque tenga en cuenta que la acción será un objeto con una propiedad de tipo que identifica la acción que ocurrió.

38
00:02:40,890 --> 00:02:45,330
Así que enciendo ese tipo de acción y luego manejo diferentes casos para las diferentes

39
00:02:45,330 --> 00:02:46,650
acciones que podría tener.

40
00:02:46,650 --> 00:02:53,040
Así que aquí tengo la acción favorita de alternar y para esto, debes importar la opción de alternar favorita de las comidas y es

41
00:02:53,390 --> 00:02:58,590
por eso que estoy almacenando esto en la constante separada porque ahora no tengo que escribir manualmente alternar favoritos donde

42
00:02:58,590 --> 00:03:00,820
podría tener un error tipográfico allí, en su

43
00:03:00,840 --> 00:03:07,410
lugar, solo uso esa constante en la que se almacena la cadena. Y ahora aquí, ejecuto la lógica que quiero ejecutar para luego

44
00:03:07,410 --> 00:03:13,310
trabajar con esa acción y cambiar mi estado de modo que la comida con el ID de comida que es parte

45
00:03:13,350 --> 00:03:19,470
de mi acción se agregue a las comidas favoritas o se elimine de allí si ya era parte porque es una acción

46
00:03:19,470 --> 00:03:20,790
de alternar aquí, quiero

47
00:03:20,820 --> 00:03:28,770
agregar elementos que aún no son favoritos, quiero eliminar elementos que sí lo son. Nota al margen, en la declaración de cambio, también agregaré

48
00:03:28,770 --> 00:03:29,250
un

49
00:03:29,250 --> 00:03:33,150
caso predeterminado donde solo devuelvo el estado sin cambios.

50
00:03:33,150 --> 00:03:36,900
Realmente no deberíamos llegar a eso, pero en caso de que lo hagamos, bueno, eso es lo que

51
00:03:37,380 --> 00:03:40,800
hacemos, pero volviendo al caso favorito de alternar. Allí, ahora quiero saber al

52
00:03:42,770 --> 00:03:48,740
final si mi comida con la ID es parte de la acción porque estoy agregando la ID de

53
00:03:48,740 --> 00:03:50,450
la comida a la acción,

54
00:03:50,450 --> 00:03:52,550
si esa comida ya es parte de

55
00:03:52,550 --> 00:03:53,660
las comidas

56
00:03:53,690 --> 00:04:00,960
favoritas, si sí quiero eliminarlo, si no es así, quiero agregarlo. Entonces, para esto, comenzaré por encontrar el índice de la comida en la matriz

57
00:04:00,960 --> 00:04:07,380
de comidas favoritas porque si eso es -1, sé que no encontré un índice, por lo que no fue parte, si es mayor o

58
00:04:07,390 --> 00:04:07,820
igual

59
00:04:07,840 --> 00:04:13,540
que cero, sé que el artículo era parte de eso. Así que tendré mi índice existente aquí y

60
00:04:13,540 --> 00:04:21,960
lo obtengo usando las comidas favoritas del estado y allí ingresé un signo de igual y el estado es simplemente mi instantánea del estado actual

61
00:04:22,010 --> 00:04:27,510
que obtengo y allí, tendremos una propiedad de comidas favoritas y puedo use el método find

62
00:04:27,510 --> 00:04:33,780
index, un método Javascript normal que puedo usar en las matrices para obtener el índice de un elemento que

63
00:04:33,840 --> 00:04:39,810
coincida con ciertos criterios que configuré aquí en una función que paso para encontrar el índice, esta función

64
00:04:40,230 --> 00:04:47,040
se ejecuta en cada comida en el matriz y si devuelve verdadero, entonces me da el índice del elemento por

65
00:04:47,040 --> 00:04:48,610
el que se ejecutó.

66
00:04:48,660 --> 00:04:56,900
Así que aquí quiero volver cierto si la comida. id es igual a la acción. mealId. Eso simplemente significa que la comida que

67
00:04:56,930 --> 00:05:02,090
estoy viendo en mis comidas favoritas tiene la misma idea que la comida para la que ocurre

68
00:05:02,090 --> 00:05:08,450
esta acción y eso significa que si eso es cierto para cualquier artículo en las comidas favoritas, la comida que estamos tratando

69
00:05:08,540 --> 00:05:13,490
de alternar ya es parte de los favoritos, por lo que tendremos que eliminarlo porque ahora nos

70
00:05:13,490 --> 00:05:13,990
devolverá

71
00:05:13,990 --> 00:05:20,090
el índice del elemento, por lo tanto, el índice existente será mayor que -1 y, por lo tanto, podemos usar ese

72
00:05:20,090 --> 00:05:21,120
índice para eliminarlo.

73
00:05:21,170 --> 00:05:23,660
Si esto devuelve cierto para ningún artículo, por lo que si al

74
00:05:23,720 --> 00:05:29,870
final devuelve -1, sé que el artículo aún no forma parte de las comidas favoritas. Entonces, el índice existente contiene información muy importante y, por

75
00:05:29,870 --> 00:05:34,520
lo tanto, lo usaré aquí en una declaración if y verificaré si el índice

76
00:05:34,520 --> 00:05:40,760
existente es mayor o igual a 0, lo que significa que ya tenemos esa comida como parte de las

77
00:05:41,390 --> 00:05:43,040
comidas favoritas o no.

78
00:05:43,040 --> 00:05:48,290
Ahora en el caso if, por lo que el artículo ya es parte de las comidas favoritas, quiero eliminarlo.

79
00:05:48,290 --> 00:05:53,210
Entonces, aquí, al final, devolveré un nuevo estado porque en su reductor, al final, debe

80
00:05:53,210 --> 00:06:00,740
devolver un nuevo estado, que es un objeto nuevo donde, en primer lugar, copie el estado existente con el operador de propagación aquí

81
00:06:00,740 --> 00:06:01,110
para

82
00:06:01,110 --> 00:06:05,810
extraer todos los pares clave-valor del estado existente, para que no pierda ningún estado

83
00:06:05,870 --> 00:06:06,980
y no anule

84
00:06:06,980 --> 00:06:12,200
ningún estado que no quiera anular y luego anularé solo las comidas favoritas, así que agregaré

85
00:06:12,200 --> 00:06:17,870
esto propiedad nuevamente para anular las comidas favoritas existentes con mis nuevas comidas favoritas, que al final deberían

86
00:06:17,930 --> 00:06:21,520
ser las comidas favoritas antiguas sin el elemento en este índice.

87
00:06:24,250 --> 00:06:30,360
Y ahora aquí para obtener mis comidas favoritas actualizadas, crearé una nueva constante, comida favorita actualizada,

88
00:06:30,360 --> 00:06:39,470
primero crearé una nueva matriz y la completaré con mis comidas existentes, así que muevo mis comidas favoritas existentes de esta manera y hago esto

89
00:06:39,470 --> 00:06:46,240
para crear una copia de esa matriz para que no manipule la matriz original si ahora empiezo a

90
00:06:46,250 --> 00:06:53,000
trabajar en eso porque ahora quiero tomar mis FavMeals actualizados, llame al empalme aquí y luego elimine el

91
00:06:53,660 --> 00:06:57,470
elemento en el índice existente y solo ese elemento.

92
00:06:57,470 --> 00:07:03,950
Esto al final tomará este índice actualizado de FavMeals, lo editará y eliminará el elemento en este índice y editará

93
00:07:04,250 --> 00:07:06,200
esta matriz, es por eso

94
00:07:06,200 --> 00:07:12,110
que lo copié para que no edite la matriz original y ahora podemos usar esta matriz actualizada de FavMeals

95
00:07:12,110 --> 00:07:17,330
aquí y guarde esto como comidas favoritas en nuestra tienda porque será la variedad de comidas

96
00:07:17,390 --> 00:07:19,880
favoritas sin la comida que acabamos de eliminar.

97
00:07:23,360 --> 00:07:29,680
En el caso contrario, que por supuesto es relevante si no estamos encontrando un producto, por

98
00:07:29,690 --> 00:07:36,380
lo que queremos agregarlo, aquí también quiero devolver un nuevo estado donde primero copie el estado anterior y

99
00:07:36,380 --> 00:07:42,230
luego anularé las comidas favoritas para Básicamente, son mis comidas favoritas y ahora puedo llamar

100
00:07:42,230 --> 00:07:48,380
a Concat, un método Javascript integrado en Javascript que devuelve una nueva matriz que toma la

101
00:07:48,410 --> 00:07:55,520
matriz anterior y agrega un nuevo elemento y allí, quiero agregar la comida para esa identificación aquí y, por

102
00:07:55,700 --> 00:08:05,130
supuesto, Puedo encontrar esa comida en mi estado, allí en las comidas, esta es esta propiedad, el estado aquí siempre se refiere solo a esta

103
00:08:05,130 --> 00:08:08,940
estructura de estado aquí por cierto y ahora aquí,

104
00:08:08,940 --> 00:08:14,240
puedo encontrar la comida que quiero agregar y ya que esto se vuelve muy

105
00:08:14,380 --> 00:08:18,210
durante mucho tiempo, realmente externalizaré esto en una nueva línea,

106
00:08:18,490 --> 00:08:27,770
por lo que mi comida que quiero agregar se puede encontrar con el método find que se ejecuta en todas las comidas y allí,

107
00:08:27,800 --> 00:08:33,560
si mealId es igual a acción. mealId, entonces tengo la comida que quiero agregar y es esta comida

108
00:08:33,560 --> 00:08:40,180
la que concateno con mis comidas favoritas, de modo que agrego esto a esa matriz. Esa debería ser la

109
00:08:40,180 --> 00:08:45,690
lógica que funciona y que gestiona nuestros favoritos.

110
00:08:45,700 --> 00:08:52,120
Ahora debemos asegurarnos de que realmente despachemos esta acción cada vez que hagamos clic en el icono de estrella en nuestro

111
00:08:52,120 --> 00:08:52,540
encabezado.

112
00:08:55,360 --> 00:08:56,570
Para despachar la

113
00:08:56,570 --> 00:09:00,550
acción, vayamos a la pantalla de detalles de la comida porque ahí es donde

114
00:09:00,550 --> 00:09:05,590
tenemos nuestro icono de estrella aquí y cuando presiono este botón, al final quiero enviar una acción.

115
00:09:05,710 --> 00:09:08,520
La buena noticia es que despachar acciones es muy

116
00:09:08,530 --> 00:09:09,800
fácil, tenemos un

117
00:09:09,850 --> 00:09:16,190
selector de uso, también tenemos un despacho de uso que al final nos da una manera fácil de activar una función.

118
00:09:16,200 --> 00:09:24,110
La mala noticia es que esto, por supuesto, solo se puede usar en el cuerpo del componente aquí, en nuestro componente funcional y no

119
00:09:24,260 --> 00:09:26,150
en las opciones de navegación.

120
00:09:26,210 --> 00:09:32,690
Entonces, nuevamente tendremos que trabajar con parámetros establecidos para comunicarnos entre las opciones de navegación y el componente, pero eso

121
00:09:32,720 --> 00:09:37,970
es algo que, por supuesto, podemos hacer. Entonces, aquí en la pantalla de detalles de

122
00:09:38,040 --> 00:09:45,470
la comida, simplemente comenzaré llamando al despacho de uso y lo que esto hace es que nos da una función de despacho, una función que

123
00:09:45,470 --> 00:09:53,650
podemos llamar para despachar nuevas acciones y la almacenaré en un despacho constante llamado. A continuación, quiero crear un controlador favorito

124
00:09:53,650 --> 00:10:01,210
de alternar, que es una función que al final debería enviar esta acción.

125
00:10:01,210 --> 00:10:06,390
Entonces, aquí quiero llamar al despacho que tengo disponible gracias a este gancho y ahora

126
00:10:06,610 --> 00:10:10,600
para despachar, necesito reenviar la acción que quiero despachar y para esto,

127
00:10:10,600 --> 00:10:14,410
usaré este creador de acción para alternar el favorito aquí.

128
00:10:14,620 --> 00:10:18,340
Así que solo tenemos que importar esto, importar desde la carpeta de

129
00:10:20,780 --> 00:10:27,410
la tienda, desde las acciones y desde las comidas. js, desde allí quiero importar alternar favorito, no

130
00:10:27,410 --> 00:10:35,740
el identificador en mayúsculas sino esta función de creador de acción. Con eso importado aquí, en el envío podemos llamar

131
00:10:35,740 --> 00:10:40,940
a alternar favorito como este y ahora aquí debemos reenviar la identificación

132
00:10:40,940 --> 00:10:45,440
y, por supuesto, ese es el mealId que ya estamos

133
00:10:48,480 --> 00:10:53,310
extrayendo allí o comida seleccionada. Id también funcionaría, lo que

134
00:10:55,350 --> 00:10:58,910
quieras, simplemente iré por la comida Me gustaría así.

135
00:10:59,010 --> 00:11:07,110
Ahora podemos reactivar el efecto de uso para comunicarnos a nuestro encabezado, no con esta línea, sino con los parámetros

136
00:11:07,110 --> 00:11:14,130
de navegación de accesorios y ahora aquí, nombraré este conmutador favorito, el nombre depende de usted y

137
00:11:14,130 --> 00:11:16,890
señalaré mi controlador favorito de alternar.

138
00:11:16,890 --> 00:11:22,980
Ahora, por lo tanto, el controlador favorito de alternar debería agregarse como una dependencia aquí y para

139
00:11:23,580 --> 00:11:30,180
evitar bucles infinitos, nuevamente usaré el uso de devolución de llamada que importo de React para ajustar esta función aquí.

140
00:11:30,180 --> 00:11:37,060
Entonces, el uso de devolución de llamada está envuelto alrededor de esta función y necesitamos especificar dependencias aquí y la dependencia

141
00:11:37,200 --> 00:11:40,020
número uno es despachada, React Redux se asegurará de

142
00:11:40,020 --> 00:11:44,640
que esto nunca cambie, así que esa es una dependencia que nunca cambiará, la

143
00:11:45,210 --> 00:11:46,730
dependencia dos es mealId,

144
00:11:46,740 --> 00:11:49,270
eso también no debería cambiar mientras estamos

145
00:11:49,340 --> 00:11:54,900
en esta página, siempre tendrá el mismo valor. Entonces, con eso, esta función no debería recrearse realmente, lo

146
00:11:54,900 --> 00:12:00,360
que significa que este efecto nunca se volverá a ejecutar a menos que se vuelva a crear, lo que solo

147
00:12:00,360 --> 00:12:07,820
es el caso si tuviéramos una nueva ID, en cuyo caso sería bueno que se recreara, pero de lo contrario, esto ganó No cambie y, por lo tanto,

148
00:12:07,820 --> 00:12:10,340
deberíamos tener un canal de comunicación seguro aquí.

149
00:12:10,550 --> 00:12:16,490
Ahora en el encabezado, ahora podemos extraer ese controlador, por cierto, ya no

150
00:12:16,510 --> 00:12:19,040
necesitamos la comida. Ya aquí,

151
00:12:19,150 --> 00:12:28,420
simplemente podemos obtener la función favorita de alternar de nuestra navegación de datos de navegación, obtener parámetros y luego nombrar ese alternador

152
00:12:28,420 --> 00:12:35,080
favorito , así que ese es el nombre del parámetro que podemos extraer y esto debería

153
00:12:35,080 --> 00:12:41,050
darnos acceso a esta función que pasamos. Ahora alternar favorito es lo que realmente debería ejecutarse cuando

154
00:12:41,050 --> 00:12:42,130
presionamos este botón.

155
00:12:42,550 --> 00:12:49,570
Así que aquí, apuntaré a alternar favorito porque esto tiene un puntero en esta función y, por lo

156
00:12:49,600 --> 00:12:56,740
tanto, esta función se ejecutará cuando presionamos esta estrella. Bueno, veremos si eso funciona.

157
00:12:56,750 --> 00:13:04,760
Guardemos eso y volvamos al spaghetti aquí y haga clic en esta estrella y haga clic en favoritos y eso se ve bien,

158
00:13:04,760 --> 00:13:05,450
los

159
00:13:05,450 --> 00:13:07,600
spaghetti son parte de los favoritos.

160
00:13:07,670 --> 00:13:11,440
Hagamos clic en la estrella nuevamente aquí e ir a favoritos y se ha ido,

161
00:13:11,480 --> 00:13:12,730
eso tiene mucho sentido.

162
00:13:12,740 --> 00:13:18,290
Haga clic nuevamente, está de regreso, vaya a la página de detalles aquí en la pestaña de favoritos y haga clic en

163
00:13:18,290 --> 00:13:20,550
la estrella y regrese, bueno, se ha ido.

164
00:13:20,750 --> 00:13:27,410
Verifiquemos también en Android, para el schnitzel quizás, los favoritos están vacíos en este momento. Volvamos y haga clic en la estrella,

165
00:13:27,410 --> 00:13:30,560
vaya a favoritos, aquí está, regrese,

166
00:13:30,560 --> 00:13:39,250
haga clic en la estrella y se habrá ido. Entonces, esta lógica generalmente funciona.

167
00:13:39,250 --> 00:13:43,150
Hay un par de cosas en las que todavía quiero trabajar, por ejemplo, quiero cambiar el

168
00:13:43,150 --> 00:13:44,250
ícono en función del

169
00:13:44,260 --> 00:13:49,600
estado favorito, también quiero mostrar algo de texto en la pantalla favorita cuando está vacío, pero en general, el envío y el

170
00:13:49,600 --> 00:13:52,840
uso de los datos funcionan incluso si lo necesitamos en un encabezado.