1 00:00:02,360 --> 00:00:04,430 ¿Cómo podemos usar nuestra tienda? 2 00:00:04,430 --> 00:00:11,240 Bueno, tenga en cuenta que al final aquí, estoy administrando mis comidas, no mis categorías, porque no tenemos ninguna acción 3 00:00:11,240 --> 00:00:13,490 planificada que pueda cambiar nada allí, pero 4 00:00:13,670 --> 00:00:15,530 estoy administrando mis comidas aquí. 5 00:00:15,650 --> 00:00:22,990 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 6 00:00:23,110 --> 00:00:26,970 importación y, en su lugar, sacar los datos de nuestra tienda porque 7 00:00:26,980 --> 00:00:32,650 la diferencia será que luego podemos agregar lógica para cambiar los datos en nuestra tienda, mientras que nuestros 8 00:00:32,650 --> 00:00:34,170 datos ficticios nunca cambiarán. 9 00:00:34,180 --> 00:00:38,980 Por lo tanto, deberíamos importar datos de nuestra tienda, para que luego podamos agregar lógica para 10 00:00:39,280 --> 00:00:42,970 manipular esos datos, por ejemplo, para restringir las comidas que estamos mostrando. 11 00:00:42,980 --> 00:00:47,510 Entonces, ¿dónde necesitamos las comidas entonces? En la pantalla de 12 00:00:47,510 --> 00:00:52,130 categorías, no estamos importando comidas. Tenemos un par de otras importaciones de las que podemos deshacernos, pero eso es 13 00:00:52,130 --> 00:00:52,490 solo 14 00:00:52,550 --> 00:00:53,840 una nota al margen, no estamos importando comidas. 15 00:00:53,870 --> 00:00:58,340 Las categorías pueden permanecer allí porque, de nuevo, no tendremos ninguna lógica 16 00:00:58,490 --> 00:01:05,690 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 17 00:01:05,690 --> 00:01:09,530 ahora el objetivo es deshacernos de esa importación y sacar las comidas de la tienda de Redux 18 00:01:09,530 --> 00:01:16,640 y la pregunta es, por supuesto, ¿cómo hacemos esto? Nuevamente, el paquete React Redux nos ayuda con eso. Desde ese paquete 19 00:01:16,730 --> 00:01:25,010 React Redux, podemos importar algo, podemos importar un gancho, el gancho selector de uso. 20 00:01:25,020 --> 00:01:32,210 Esto nos permite seleccionar una porción de nuestro estado, de nuestro estado administrado globalmente y usarlo en este componente. 21 00:01:32,220 --> 00:01:36,660 Ahora estoy usando el gancho aquí porque eso nos permite usar esto en un componente funcional, 22 00:01:36,660 --> 00:01:42,480 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 23 00:01:42,480 --> 00:01:47,220 y usa el estado del mapa para los accesorios, el envío del mapa para los accesorios, eso es 24 00:01:47,220 --> 00:01:49,010 algo que también puedes usar, absolutamente 25 00:01:49,020 --> 00:01:51,560 funcionará, pero esto es un poco más ágil, así 26 00:01:51,580 --> 00:01:56,140 que iré con el selector de uso aquí. Con eso agregado, ahora cuando 27 00:01:56,260 --> 00:01:59,510 usamos nuestras comidas, no las estamos usando así, en 28 00:01:59,710 --> 00:02:07,270 cambio ahora podemos obtenerlas con la ayuda del selector de uso. Entonces, para obtener nuestras comidas de exhibición, lo que 29 00:02:07,270 --> 00:02:15,400 haré aquí es crear una nueva comida constante disponible, tal vez, el nombre depende de usted y usar el selector aquí de esta 30 00:02:15,400 --> 00:02:19,920 manera porque esto me recuperará datos del estado y volverá así que eso 31 00:02:19,930 --> 00:02:25,450 es lo que almacenaré aquí en esta constante, el valor devuelto y el selector de uso 32 00:02:26,110 --> 00:02:29,920 toma una función, una función que React Redux ejecutará para nosotros. 33 00:02:29,920 --> 00:02:36,430 Una función que obtiene el estado automáticamente como argumento, React Redux que ejecuta la función para nosotros proporcionará 34 00:02:36,430 --> 00:02:44,140 el estado actual, el estado actual de Redux a esta función y luego puede devolver cualquier dato que queramos de ese 35 00:02:44,200 --> 00:02:48,810 estado, de ese global tienda, desde el estado global y estoy usando 36 00:02:48,850 --> 00:02:50,640 estos términos indistintamente aquí. 37 00:02:52,910 --> 00:02:56,380 Entonces, ¿cómo podemos recuperar datos de ese estado aquí en el cuerpo de la 38 00:02:56,420 --> 00:03:01,370 función y estoy usando la notación de flecha de acceso directo aquí, donde en el lado derecho de la flecha, 39 00:03:01,370 --> 00:03:06,860 esto se devuelve automáticamente si no está envuelto en llaves. Bueno, para tener acceso a algo del estado, 40 00:03:06,860 --> 00:03:12,560 tenemos que volver al lugar donde creamos la tienda, allí paso un reductor de raíz que se crea 41 00:03:12,560 --> 00:03:14,120 combinando todos los reductores. 42 00:03:14,150 --> 00:03:17,250 Nuevamente solo tenemos uno, pero le expliqué por qué hice esto. 43 00:03:17,300 --> 00:03:20,980 Ahora tenemos esta clave, comidas que depende totalmente de usted, podría 44 00:03:20,990 --> 00:03:22,640 nombrar esto como quiera. 45 00:03:22,640 --> 00:03:29,030 Esto le da a esta porción de nuestro estado que es administrada por este reductor un 46 00:03:29,030 --> 00:03:32,950 identificador y ahora podemos usar este identificador para obtener 47 00:03:33,020 --> 00:03:37,820 esa parte de nuestro estado de la cual este reductor es responsable. 48 00:03:37,820 --> 00:03:45,070 Entonces, al final, un estado que se verá así, como este estado inicial. Entonces, en la pantalla de categoría de 49 00:03:45,070 --> 00:03:51,210 comida, aquí accedo al estado. comidas o lo que elija como identificador en 50 00:03:51,310 --> 00:03:58,490 reductores combinados y luego aquí, accederé a las comidas filtradas. No comidas que también tendría allí, también 51 00:03:58,540 --> 00:04:03,380 tenemos comidas aquí, pero quiero respetar cualquier filtro que esté configurado. 52 00:04:03,450 --> 00:04:06,690 En este momento, no tenemos lógica para establecerlos, pero 53 00:04:06,760 --> 00:04:12,970 con eso cambiaremos en el futuro, así que aquí quiero obtener mis comidas filtradas para que siempre obtenga 54 00:04:12,970 --> 00:04:17,930 las comidas que realmente debería poder mostrar, las comidas que respetan los filtros configurados por 55 00:04:18,130 --> 00:04:25,420 el usuario y ahora son las comidas disponibles las que quiero filtrar aún más aquí para encontrar la comida para la ID 56 00:04:25,420 --> 00:04:33,880 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 57 00:04:33,890 --> 00:04:39,500 este archivo, todo eso está en minúsculas aquí y nos deshicimos de esa 58 00:04:39,500 --> 00:04:45,890 importación con éxito, ahora sigamos adelante. En la pantalla favorita, también estamos importando comidas 59 00:04:45,890 --> 00:04:46,650 y, 60 00:04:46,670 --> 00:04:54,770 como antes, deberíamos deshacernos de eso, así que hagamos esto. En cambio, también como antes, usaré el selector de uso de React 61 00:04:54,770 --> 00:05:02,720 Redux para obtener mis comidas de la tienda y, por lo tanto, aquí donde uso las comidas, en realidad obtendré mis comidas disponibles con 62 00:05:02,720 --> 00:05:04,260 el selector de uso. 63 00:05:04,310 --> 00:05:10,370 Nuevamente, esto me da un estado y puedo acceder al estado. comidas comidas filtradas pero ahora en 64 00:05:10,370 --> 00:05:11,240 realidad aquí 65 00:05:11,240 --> 00:05:16,250 para los favoritos, no quiero respetar los filtros que se establecieron porque, en mi 66 00:05:16,250 --> 00:05:21,000 opinión, tiene sentido que cuando queremos ver nuestros favoritos, siempre veamos todos los favoritos. 67 00:05:21,050 --> 00:05:25,930 Por supuesto, podría tener una lógica diferente e ir por las comidas filtradas, pero usaré solo comidas aquí, 68 00:05:26,090 --> 00:05:28,490 así que. comidas las 69 00:05:28,520 --> 00:05:36,950 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 70 00:05:36,950 --> 00:05:37,940 de comidas en 71 00:05:40,820 --> 00:05:46,180 nuestra porción del estado pero, por supuesto, si observa su reductor, esto solo tiene sentido en 72 00:05:46,180 --> 00:05:51,050 parte porque tenemos una propiedad de comidas favoritas aquí y de hecho la tenemos. 73 00:05:51,330 --> 00:05:58,260 Así que, en realidad, ya no necesitamos filtrar nuestros favoritos como este y de todos modos esto era solo 74 00:05:58,260 --> 00:06:04,710 un filtro ficticio, siempre tomaba las comidas con m1 y m2 como ID, en lugar de nuestras comidas 75 00:06:04,760 --> 00:06:10,310 favoritas, solo podemos obtenerlas accediendo aquí en nuestras comidas, indique las comidas favoritas, así que 76 00:06:10,310 --> 00:06:16,880 esta propiedad porque más adelante administraremos las comidas favoritas en una matriz separada en nuestra tienda, por lo 77 00:06:16,880 --> 00:06:18,280 que es aún 78 00:06:18,290 --> 00:06:23,290 más fácil aquí, un código muy corto. Entonces, con eso, también nos deshicimos de la importación de 79 00:06:23,300 --> 00:06:25,460 comidas, pasemos a la pantalla de filtros. 80 00:06:25,460 --> 00:06:27,080 Aquí no hay importación de 81 00:06:27,170 --> 00:06:29,840 comidas, la pantalla de detalles de comidas tiene una. 82 00:06:29,840 --> 00:06:31,280 Así que aquí quiero 83 00:06:31,310 --> 00:06:33,220 deshacerme de él y ahora aquí 84 00:06:33,290 --> 00:06:39,800 necesitaremos esa otra propiedad de comidas que mostré hace un segundo porque nuevamente aquí, podemos usar el selector de uso 85 00:06:40,610 --> 00:06:51,720 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 86 00:06:51,810 --> 00:06:59,280 una sola comida por ID y, por lo tanto, mi base, mi matriz en la que busco esa ID, por supuesto, debería ser 87 00:06:59,370 --> 00:07:04,440 un matriz con todas las comidas y no filtrada porque no me interesan los filtros 88 00:07:04,440 --> 00:07:09,900 establecidos, aquí estoy buscando una comida específica con una identificación específica y quiero obtener una lista 89 00:07:09,900 --> 00:07:16,140 completa de comidas y, por lo tanto, es donde necesitaremos esta sin filtro lista de comidas que estamos 90 00:07:16,140 --> 00:07:17,180 gestionando aquí. 91 00:07:20,140 --> 00:07:27,880 Por lo tanto, aquí, ahora podemos obtener nuestras comidas disponibles con el selector de uso y 92 00:07:27,880 --> 00:07:34,360 allí nuevamente, usamos las comidas estatales. comidas ahora de verdad y ahora podemos usar las 93 00:07:34,420 --> 00:07:41,070 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 94 00:07:41,070 --> 00:07:44,090 del botón ahora que lo veo, pero en realidad tendremos un problema. 95 00:07:44,430 --> 00:07:51,780 Puede notar que en el encabezado, en realidad también trato de encontrar una comida del conjunto de comidas 96 00:07:51,780 --> 00:07:53,770 y eliminamos esa importación. 97 00:07:53,790 --> 00:07:59,010 Ahora el problema también está aquí en las opciones de navegación, no podemos usar el gancho selector de uso 98 00:07:59,010 --> 00:08:04,170 porque solo puede usar ganchos dentro de otros ganchos o dentro de componentes funcionales y esto no es 99 00:08:04,170 --> 00:08:08,340 nada de eso, es una función normal, no funcional componente y tampoco un gancho. 100 00:08:08,340 --> 00:08:11,870 Por lo tanto, no podemos usar el selector de uso aquí para que eso no funcione. 101 00:08:11,900 --> 00:08:17,400 Ahora, por supuesto, podríamos recuperar la importación de comidas, pero eso sería algo barato porque en aplicaciones reales, a veces 102 00:08:17,400 --> 00:08:22,710 tendrá esa situación en la que necesita datos de su tienda Redux en sus datos de navegación y, por 103 00:08:22,710 --> 00:08:23,160 lo 104 00:08:23,190 --> 00:08:28,470 tanto, en la próxima conferencia, aborde esto y asegúrese de que también podamos tener acceso a esto aquí.