¿Cómo podemos usar nuestra tienda?
Bueno, tenga en cuenta que al final aquí, estoy administrando mis comidas, no mis categorías, porque no tenemos ninguna acción
planificada que pueda cambiar nada allí, pero
estoy administrando mis comidas aquí.
Entonces, una gran tarea sería ir a todas partes en nuestra aplicación donde estamos importando comidas de los datos ficticios y deshacernos de esa
importación y, en su lugar, sacar los datos de nuestra tienda porque
la diferencia será que luego podemos agregar lógica para cambiar los datos en nuestra tienda, mientras que nuestros
datos ficticios nunca cambiarán.
Por lo tanto, deberíamos importar datos de nuestra tienda, para que luego podamos agregar lógica para
manipular esos datos, por ejemplo, para restringir las comidas que estamos mostrando.
Entonces, ¿dónde necesitamos las comidas entonces? En la pantalla de
categorías, no estamos importando comidas. Tenemos un par de otras importaciones de las que podemos deshacernos, pero eso es
solo
una nota al margen, no estamos importando comidas.
Las categorías pueden permanecer allí porque, de nuevo, no tendremos ninguna lógica
que cambie eso, por lo que podemos seguir adelante. La pantalla de categorías de comidas es una historia diferente, allí estamos importando comidas y
ahora el objetivo es deshacernos de esa importación y sacar las comidas de la tienda de Redux
y la pregunta es, por supuesto, ¿cómo hacemos esto? Nuevamente, el paquete React Redux nos ayuda con eso. Desde ese paquete
React Redux, podemos importar algo, podemos importar un gancho, el gancho selector de uso.
Esto nos permite seleccionar una porción de nuestro estado, de nuestro estado administrado globalmente y usarlo en este componente.
Ahora estoy usando el gancho aquí porque eso nos permite usar esto en un componente funcional,
también es posible que conozca otro enfoque en el que realmente importa la función de conexión y ajusta su exportación con eso
y usa el estado del mapa para los accesorios, el envío del mapa para los accesorios, eso es
algo que también puedes usar, absolutamente
funcionará, pero esto es un poco más ágil, así
que iré con el selector de uso aquí. Con eso agregado, ahora cuando
usamos nuestras comidas, no las estamos usando así, en
cambio ahora podemos obtenerlas con la ayuda del selector de uso. Entonces, para obtener nuestras comidas de exhibición, lo que
haré aquí es crear una nueva comida constante disponible, tal vez, el nombre depende de usted y usar el selector aquí de esta
manera porque esto me recuperará datos del estado y volverá así que eso
es lo que almacenaré aquí en esta constante, el valor devuelto y el selector de uso
toma una función, una función que React Redux ejecutará para nosotros.
Una función que obtiene el estado automáticamente como argumento, React Redux que ejecuta la función para nosotros proporcionará
el estado actual, el estado actual de Redux a esta función y luego puede devolver cualquier dato que queramos de ese
estado, de ese global tienda, desde el estado global y estoy usando
estos términos indistintamente aquí.
Entonces, ¿cómo podemos recuperar datos de ese estado aquí en el cuerpo de la
función y estoy usando la notación de flecha de acceso directo aquí, donde en el lado derecho de la flecha,
esto se devuelve automáticamente si no está envuelto en llaves. Bueno, para tener acceso a algo del estado,
tenemos que volver al lugar donde creamos la tienda, allí paso un reductor de raíz que se crea
combinando todos los reductores.
Nuevamente solo tenemos uno, pero le expliqué por qué hice esto.
Ahora tenemos esta clave, comidas que depende totalmente de usted, podría
nombrar esto como quiera.
Esto le da a esta porción de nuestro estado que es administrada por este reductor un
identificador y ahora podemos usar este identificador para obtener
esa parte de nuestro estado de la cual este reductor es responsable.
Entonces, al final, un estado que se verá así, como este estado inicial. Entonces, en la pantalla de categoría de
comida, aquí accedo al estado. comidas o lo que elija como identificador en
reductores combinados y luego aquí, accederé a las comidas filtradas. No comidas que también tendría allí, también
tenemos comidas aquí, pero quiero respetar cualquier filtro que esté configurado.
En este momento, no tenemos lógica para establecerlos, pero
con eso cambiaremos en el futuro, así que aquí quiero obtener mis comidas filtradas para que siempre obtenga
las comidas que realmente debería poder mostrar, las comidas que respetan los filtros configurados por
el usuario y ahora son las comidas disponibles las que quiero filtrar aún más aquí para encontrar la comida para la ID
de categoría que seleccioné o las comidas para la categoría que seleccioné. Con eso, no hay más comidas en mayúsculas en
este archivo, todo eso está en minúsculas aquí y nos deshicimos de esa
importación con éxito, ahora sigamos adelante. En la pantalla favorita, también estamos importando comidas
y,
como antes, deberíamos deshacernos de eso, así que hagamos esto. En cambio, también como antes, usaré el selector de uso de React
Redux para obtener mis comidas de la tienda y, por lo tanto, aquí donde uso las comidas, en realidad obtendré mis comidas disponibles con
el selector de uso.
Nuevamente, esto me da un estado y puedo acceder al estado. comidas comidas filtradas pero ahora en
realidad aquí
para los favoritos, no quiero respetar los filtros que se establecieron porque, en mi
opinión, tiene sentido que cuando queremos ver nuestros favoritos, siempre veamos todos los favoritos.
Por supuesto, podría tener una lógica diferente e ir por las comidas filtradas, pero usaré solo comidas aquí,
así que. comidas las
comidas pueden parecer extrañas, esto selecciona la porción de nuestro estado y luego en esta porción, esta cosa de comidas aquí accede a esta propiedad
de comidas en
nuestra porción del estado pero, por supuesto, si observa su reductor, esto solo tiene sentido en
parte porque tenemos una propiedad de comidas favoritas aquí y de hecho la tenemos.
Así que, en realidad, ya no necesitamos filtrar nuestros favoritos como este y de todos modos esto era solo
un filtro ficticio, siempre tomaba las comidas con m1 y m2 como ID, en lugar de nuestras comidas
favoritas, solo podemos obtenerlas accediendo aquí en nuestras comidas, indique las comidas favoritas, así que
esta propiedad porque más adelante administraremos las comidas favoritas en una matriz separada en nuestra tienda, por lo
que es aún
más fácil aquí, un código muy corto. Entonces, con eso, también nos deshicimos de la importación de
comidas, pasemos a la pantalla de filtros.
Aquí no hay importación de
comidas, la pantalla de detalles de comidas tiene una.
Así que aquí quiero
deshacerme de él y ahora aquí
necesitaremos esa otra propiedad de comidas que mostré hace un segundo porque nuevamente aquí, podemos usar el selector de uso
de React Redux para seleccionar nuestras comidas porque aquí, ahora tenemos nuestro componente aquí donde usamos nuestras comidas y allá, quiero tener una matriz con todas las comidas porque estoy tratando de cargar
una sola comida por ID y, por lo tanto, mi base, mi matriz en la que busco esa ID, por supuesto, debería ser
un matriz con todas las comidas y no filtrada porque no me interesan los filtros
establecidos, aquí estoy buscando una comida específica con una identificación específica y quiero obtener una lista
completa de comidas y, por lo tanto, es donde necesitaremos esta sin filtro lista de comidas que estamos
gestionando aquí.
Por lo tanto, aquí, ahora podemos obtener nuestras comidas disponibles con el selector de uso y
allí nuevamente, usamos las comidas estatales. comidas ahora de verdad y ahora podemos usar las
comidas disponibles aquí para encontrar la comida con esa identificación. Con eso, también nos deshacemos de esta importación aquí, también podemos eliminar la importación
del botón ahora que lo veo, pero en realidad tendremos un problema.
Puede notar que en el encabezado, en realidad también trato de encontrar una comida del conjunto de comidas
y eliminamos esa importación.
Ahora el problema también está aquí en las opciones de navegación, no podemos usar el gancho selector de uso
porque solo puede usar ganchos dentro de otros ganchos o dentro de componentes funcionales y esto no es
nada de eso, es una función normal, no funcional componente y tampoco un gancho.
Por lo tanto, no podemos usar el selector de uso aquí para que eso no funcione.
Ahora, por supuesto, podríamos recuperar la importación de comidas, pero eso sería algo barato porque en aplicaciones reales, a veces
tendrá esa situación en la que necesita datos de su tienda Redux en sus datos de navegación y, por
lo
tanto, en la próxima conferencia, aborde esto y asegúrese de que también podamos tener acceso a esto aquí.