Comencemos con los favoritos.
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í
en la pantalla de favoritos donde actualmente no veo nada porque eliminé estos favoritos falsos.
Para eso
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,
pero sí, estos dos archivos son comidas. js aquí en acciones
y comidas. js en reductores y en las acciones comidas. js, configuraré
algunas acciones de Redux que generalmente comienzan configurando algunos identificadores únicos
que almaceno en constantes y que serán los favoritos de alternancia.
Puede usar lo que quiera aquí,
el valor que almacena aquí generalmente es el mismo identificador, por lo
que este es el valor del identificador y simplemente se almacena en una constante para que no tengamos que
escribirlo manualmente más tarde, pero siempre podemos importar Esta constante y evitar
errores tipográficos.
Una vez más, si
es nuevo para usted, definitivamente revise primero un recurso dedicado de React Redux.
Ahora también usaré el patrón creador de acciones aquí,
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
es solo un identificador a menudo y en este caso ese es el caso, también necesita
algo de carga adicional y, por lo tanto, en realidad tenemos una acción que es un objeto con identificador
y carga útil y, por lo tanto, aquí agregaré una función que me crea tal objeto de acción y nombraré este
favorito de alternar de esta
manera, seleccione el identificador pero en el caso del camello y esta es una función que puede recibir algunos
datos porque yo seré el que lo llame y que debería devolver un objeto Javascript que describa esta acción,
por lo que tiene un tipo,
así es como se llama ese campo identificador pero en general es libre de usar lo
que
quiera allí y, en mi caso,
ese será el favorito de alternar, por lo que señalo este identificador, uso esta cadena como identificador y luego cualquier dato adicional
que desee, por ejemplo, aquí ' necesitaré anunciar d la ID de comida de la comida que debe activarse y
eso significa que esta función también necesita obtener esta ID como entrada porque de lo contrario no
puedo almacenarla en la acción que creé.
Así que este es mi creador de acción para la acción favorita de
alternar, ahora en el reductor, quiero actuar cuando obtengo dicha acción favorita y para esto, usaré un patrón que probablemente habrás
visto
si trabajaste con Redux antes , Usaré una declaración de cambio aquí y encenderé mi tipo de
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ó.
Así que enciendo ese tipo de acción y luego manejo diferentes casos para las diferentes
acciones que podría tener.
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
por eso que estoy almacenando esto en la constante separada porque ahora no tengo que escribir manualmente alternar favoritos donde
podría tener un error tipográfico allí, en su
lugar, solo uso esa constante en la que se almacena la cadena. Y ahora aquí, ejecuto la lógica que quiero ejecutar para luego
trabajar con esa acción y cambiar mi estado de modo que la comida con el ID de comida que es parte
de mi acción se agregue a las comidas favoritas o se elimine de allí si ya era parte porque es una acción
de alternar aquí, quiero
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é
un
caso predeterminado donde solo devuelvo el estado sin cambios.
Realmente no deberíamos llegar a eso, pero en caso de que lo hagamos, bueno, eso es lo que
hacemos, pero volviendo al caso favorito de alternar. Allí, ahora quiero saber al
final si mi comida con la ID es parte de la acción porque estoy agregando la ID de
la comida a la acción,
si esa comida ya es parte de
las comidas
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
de comidas favoritas porque si eso es -1, sé que no encontré un índice, por lo que no fue parte, si es mayor o
igual
que cero, sé que el artículo era parte de eso. Así que tendré mi índice existente aquí y
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
que obtengo y allí, tendremos una propiedad de comidas favoritas y puedo use el método find
index, un método Javascript normal que puedo usar en las matrices para obtener el índice de un elemento que
coincida con ciertos criterios que configuré aquí en una función que paso para encontrar el índice, esta función
se ejecuta en cada comida en el matriz y si devuelve verdadero, entonces me da el índice del elemento por
el que se ejecutó.
Así que aquí quiero volver cierto si la comida. id es igual a la acción. mealId. Eso simplemente significa que la comida que
estoy viendo en mis comidas favoritas tiene la misma idea que la comida para la que ocurre
esta acción y eso significa que si eso es cierto para cualquier artículo en las comidas favoritas, la comida que estamos tratando
de alternar ya es parte de los favoritos, por lo que tendremos que eliminarlo porque ahora nos
devolverá
el índice del elemento, por lo tanto, el índice existente será mayor que -1 y, por lo tanto, podemos usar ese
índice para eliminarlo.
Si esto devuelve cierto para ningún artículo, por lo que si al
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
lo tanto, lo usaré aquí en una declaración if y verificaré si el índice
existente es mayor o igual a 0, lo que significa que ya tenemos esa comida como parte de las
comidas favoritas o no.
Ahora en el caso if, por lo que el artículo ya es parte de las comidas favoritas, quiero eliminarlo.
Entonces, aquí, al final, devolveré un nuevo estado porque en su reductor, al final, debe
devolver un nuevo estado, que es un objeto nuevo donde, en primer lugar, copie el estado existente con el operador de propagación aquí
para
extraer todos los pares clave-valor del estado existente, para que no pierda ningún estado
y no anule
ningún estado que no quiera anular y luego anularé solo las comidas favoritas, así que agregaré
esto propiedad nuevamente para anular las comidas favoritas existentes con mis nuevas comidas favoritas, que al final deberían
ser las comidas favoritas antiguas sin el elemento en este índice.
Y ahora aquí para obtener mis comidas favoritas actualizadas, crearé una nueva constante, comida favorita actualizada,
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
para crear una copia de esa matriz para que no manipule la matriz original si ahora empiezo a
trabajar en eso porque ahora quiero tomar mis FavMeals actualizados, llame al empalme aquí y luego elimine el
elemento en el índice existente y solo ese elemento.
Esto al final tomará este índice actualizado de FavMeals, lo editará y eliminará el elemento en este índice y editará
esta matriz, es por eso
que lo copié para que no edite la matriz original y ahora podemos usar esta matriz actualizada de FavMeals
aquí y guarde esto como comidas favoritas en nuestra tienda porque será la variedad de comidas
favoritas sin la comida que acabamos de eliminar.
En el caso contrario, que por supuesto es relevante si no estamos encontrando un producto, por
lo que queremos agregarlo, aquí también quiero devolver un nuevo estado donde primero copie el estado anterior y
luego anularé las comidas favoritas para Básicamente, son mis comidas favoritas y ahora puedo llamar
a Concat, un método Javascript integrado en Javascript que devuelve una nueva matriz que toma la
matriz anterior y agrega un nuevo elemento y allí, quiero agregar la comida para esa identificación aquí y, por
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
estructura de estado aquí por cierto y ahora aquí,
puedo encontrar la comida que quiero agregar y ya que esto se vuelve muy
durante mucho tiempo, realmente externalizaré esto en una nueva línea,
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í,
si mealId es igual a acción. mealId, entonces tengo la comida que quiero agregar y es esta comida
la que concateno con mis comidas favoritas, de modo que agrego esto a esa matriz. Esa debería ser la
lógica que funciona y que gestiona nuestros favoritos.
Ahora debemos asegurarnos de que realmente despachemos esta acción cada vez que hagamos clic en el icono de estrella en nuestro
encabezado.
Para despachar la
acción, vayamos a la pantalla de detalles de la comida porque ahí es donde
tenemos nuestro icono de estrella aquí y cuando presiono este botón, al final quiero enviar una acción.
La buena noticia es que despachar acciones es muy
fácil, tenemos un
selector de uso, también tenemos un despacho de uso que al final nos da una manera fácil de activar una función.
La mala noticia es que esto, por supuesto, solo se puede usar en el cuerpo del componente aquí, en nuestro componente funcional y no
en las opciones de navegación.
Entonces, nuevamente tendremos que trabajar con parámetros establecidos para comunicarnos entre las opciones de navegación y el componente, pero eso
es algo que, por supuesto, podemos hacer. Entonces, aquí en la pantalla de detalles de
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
podemos llamar para despachar nuevas acciones y la almacenaré en un despacho constante llamado. A continuación, quiero crear un controlador favorito
de alternar, que es una función que al final debería enviar esta acción.
Entonces, aquí quiero llamar al despacho que tengo disponible gracias a este gancho y ahora
para despachar, necesito reenviar la acción que quiero despachar y para esto,
usaré este creador de acción para alternar el favorito aquí.
Así que solo tenemos que importar esto, importar desde la carpeta de
la tienda, desde las acciones y desde las comidas. js, desde allí quiero importar alternar favorito, no
el identificador en mayúsculas sino esta función de creador de acción. Con eso importado aquí, en el envío podemos llamar
a alternar favorito como este y ahora aquí debemos reenviar la identificación
y, por supuesto, ese es el mealId que ya estamos
extrayendo allí o comida seleccionada. Id también funcionaría, lo que
quieras, simplemente iré por la comida Me gustaría así.
Ahora podemos reactivar el efecto de uso para comunicarnos a nuestro encabezado, no con esta línea, sino con los parámetros
de navegación de accesorios y ahora aquí, nombraré este conmutador favorito, el nombre depende de usted y
señalaré mi controlador favorito de alternar.
Ahora, por lo tanto, el controlador favorito de alternar debería agregarse como una dependencia aquí y para
evitar bucles infinitos, nuevamente usaré el uso de devolución de llamada que importo de React para ajustar esta función aquí.
Entonces, el uso de devolución de llamada está envuelto alrededor de esta función y necesitamos especificar dependencias aquí y la dependencia
número uno es despachada, React Redux se asegurará de
que esto nunca cambie, así que esa es una dependencia que nunca cambiará, la
dependencia dos es mealId,
eso también no debería cambiar mientras estamos
en esta página, siempre tendrá el mismo valor. Entonces, con eso, esta función no debería recrearse realmente, lo
que significa que este efecto nunca se volverá a ejecutar a menos que se vuelva a crear, lo que solo
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,
deberíamos tener un canal de comunicación seguro aquí.
Ahora en el encabezado, ahora podemos extraer ese controlador, por cierto, ya no
necesitamos la comida. Ya aquí,
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
favorito , así que ese es el nombre del parámetro que podemos extraer y esto debería
darnos acceso a esta función que pasamos. Ahora alternar favorito es lo que realmente debería ejecutarse cuando
presionamos este botón.
Así que aquí, apuntaré a alternar favorito porque esto tiene un puntero en esta función y, por lo
tanto, esta función se ejecutará cuando presionamos esta estrella. Bueno, veremos si eso funciona.
Guardemos eso y volvamos al spaghetti aquí y haga clic en esta estrella y haga clic en favoritos y eso se ve bien,
los
spaghetti son parte de los favoritos.
Hagamos clic en la estrella nuevamente aquí e ir a favoritos y se ha ido,
eso tiene mucho sentido.
Haga clic nuevamente, está de regreso, vaya a la página de detalles aquí en la pestaña de favoritos y haga clic en
la estrella y regrese, bueno, se ha ido.
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,
vaya a favoritos, aquí está, regrese,
haga clic en la estrella y se habrá ido. Entonces, esta lógica generalmente funciona.
Hay un par de cosas en las que todavía quiero trabajar, por ejemplo, quiero cambiar el
ícono en función del
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
uso de los datos funcionan incluso si lo necesitamos en un encabezado.