1 00:00:02,250 --> 00:00:08,070 Continuaremos trabajando en la aplicación que creamos en el último módulo del curso con nuestras recetas 2 00:00:08,070 --> 00:00:15,070 aquí y con los filtros que podríamos configurar y así sucesivamente, y hay dos cosas que debemos agregar donde necesitaremos Redux. 3 00:00:15,090 --> 00:00:21,870 Una es que en realidad podemos marcar una receta como favorita haciendo clic en el ícono de la estrella, que esto en realidad lo marca 4 00:00:21,870 --> 00:00:27,900 como favorito y que, por nuestra parte, también cambiamos este ícono para mostrar si ya es un favorito o no, pero lo 5 00:00:27,900 --> 00:00:28,980 más importante, que 6 00:00:28,980 --> 00:00:35,400 podemos ver esa receta como favorita aquí en la pestaña de favoritos. Y la otra cosa en la que necesitaremos Redux 7 00:00:35,400 --> 00:00:41,280 es aquí en los filtros, allí cuando establecemos un filtro y luego lo guardamos, por supuesto, esto 8 00:00:41,280 --> 00:00:49,080 debería tener un efecto en las comidas que estamos cargando aquí en nuestra pestaña de comidas en la lista de comidas cuando 9 00:00:49,080 --> 00:00:51,470 seleccionamos una categoría. Allí esto 10 00:00:51,500 --> 00:00:58,880 debería reflejarse, lo que establecemos en los filtros. En eso es en lo que trabajamos, para lo que necesitaremos 11 00:00:58,880 --> 00:01:02,300 Redux y para eso, instalemos Redux y comencemos con él. 12 00:01:03,350 --> 00:01:07,760 Para comenzar con Redux, cerraré mi servidor de exposición aquí, 13 00:01:07,760 --> 00:01:12,830 el proceso de inicio de npm, lo cerraré temporalmente e instalaré 14 00:01:12,860 --> 00:01:15,030 un paquete y ese sería 15 00:01:15,110 --> 00:01:22,460 Redux y además de Redux, también necesitamos instalar React Redux porque eso es También se requiere trabajar 16 00:01:22,460 --> 00:01:23,760 con Redux. 17 00:01:23,780 --> 00:01:28,700 Entonces, ambos paquetes deben instalarse aquí y mientras se están instalando, ya podemos comenzar a trabajar en 18 00:01:28,700 --> 00:01:34,280 nuestros archivos de código allí un poco porque en este proyecto, quiero agregar una nueva carpeta ahora y es la 19 00:01:34,280 --> 00:01:35,780 carpeta de la tienda. 20 00:01:35,780 --> 00:01:40,810 Ahora puede nombrar esta carpeta como quiera, no tiene que llamarse tienda, a Redux no le importa, 21 00:01:41,000 --> 00:01:46,970 pero esta es la carpeta en la que quiero administrar mi configuración de Redux porque Redux se trata de esa 22 00:01:46,970 --> 00:01:48,390 tienda central del estado. 23 00:01:48,530 --> 00:01:56,150 Entonces, aquí en esa carpeta de la tienda, ahora podemos comenzar con Redux y no cubriré a Redux con el mayor detalle aquí, tengo un 24 00:01:56,150 --> 00:01:57,230 curso completo de 25 00:01:57,260 --> 00:02:02,510 React and Redux para eso si quieres aprender los entresijos de eso, por En este curso, en 26 00:02:02,570 --> 00:02:08,450 realidad, asumo el conocimiento previo de React y Redux y, por lo tanto, esto solo será un breve repaso. 27 00:02:09,890 --> 00:02:14,980 Redux al final tiene que ver con reductores, acciones y luego construir una tienda basada en estos 28 00:02:14,980 --> 00:02:16,010 reductores y acciones. 29 00:02:16,360 --> 00:02:23,230 Ahora, para eso aquí en esa carpeta de la tienda, agregaré una carpeta de acciones y agregaré una carpeta de reductores, en realidad 30 00:02:23,320 --> 00:02:29,320 solo tendremos una acción y un archivo reductor en este proyecto, pero si tuviera más archivos que eso, tener Subcarpetas 31 00:02:29,320 --> 00:02:34,180 separadas puede ser una buena idea para mantenerlo organizado y es por eso que las 32 00:02:34,180 --> 00:02:39,820 creo aquí, a pesar de que para esta aplicación simple, no lo necesitaríamos porque no tendremos tantos archivos. 33 00:02:39,880 --> 00:02:44,230 Comencemos con el reductor. En la carpeta 34 00:02:44,350 --> 00:02:52,630 del reductor aquí, agregaré mis comidas. js y ese es el archivo donde fui a administrar la lógica de actualización del estado de mi reductor 35 00:02:52,630 --> 00:02:53,310 de comidas. 36 00:02:53,410 --> 00:02:58,750 Así que al final está el archivo donde escribiremos la lógica para marcar una comida 37 00:02:58,750 --> 00:03:01,330 como favorita y para administrar nuestros filtros. 38 00:03:01,430 --> 00:03:04,700 Ahora, un reductor en React es solo una función, así 39 00:03:04,700 --> 00:03:10,550 que aquí crearé una función, la nombraré reductor de comidas, el nombre depende totalmente de usted y esta función 40 00:03:10,610 --> 00:03:17,360 realmente recibirá dos argumentos: el estado, la instantánea del estado actual en la que puede construir arriba y derivar un nuevo estado 41 00:03:17,360 --> 00:03:22,250 porque un reductor al final tendrá que devolver un nuevo estado que luego será tomado 42 00:03:22,370 --> 00:03:24,860 por Redux y almacenado en su tienda. 43 00:03:24,860 --> 00:03:30,230 Entonces obtienes el estado actual, antiguo aquí y obtienes la acción porque Redux ejecuta la función reductora 44 00:03:30,230 --> 00:03:31,940 aquí cada vez que se 45 00:03:31,940 --> 00:03:36,710 envía una nueva acción y, por lo tanto, tenemos acceso a la acción aquí para 46 00:03:36,710 --> 00:03:40,370 que podamos averiguar si necesitamos actuar y lo que necesitamos hacer. 47 00:03:40,520 --> 00:03:44,960 Entonces, dentro de esta función, al final, debe devolver un nuevo estado, en su forma más simple 48 00:03:44,960 --> 00:03:49,220 que, por supuesto, significa que devolvemos el estado actual, lo que, por otro lado, significa que 49 00:03:49,220 --> 00:03:52,470 este reductor no hace nada útil, pero lo haremos cambia eso. 50 00:03:52,650 --> 00:03:58,170 Ahora, cuando ejecutamos nuestra aplicación por primera vez, también queremos configurar un estado inicial que se 51 00:03:58,170 --> 00:04:00,000 usa inicialmente, por lo 52 00:04:00,000 --> 00:04:06,510 que inicializa nuestro estado cuando se inicia esta aplicación y para esto, agregaré aquí un nuevo estado inicial constante 53 00:04:06,510 --> 00:04:14,970 que contiene un simple Javascript objeto y allí, quiero almacenar una lista de mis comidas y luego también una lista de mis comidas filtradas porque 54 00:04:15,120 --> 00:04:22,060 necesitaremos ambas: una lista de todas las comidas y una lista de las comidas que se ajustan a los filtros 55 00:04:22,060 --> 00:04:31,130 que el usuario configuró y yo También quiero tener mis comidas favoritas aquí. Entonces, tres tipos de matrices de comidas que almaceno al final y, por 56 00:04:31,130 --> 00:04:31,610 supuesto, 57 00:04:31,670 --> 00:04:34,800 ese es solo un enfoque posible que podría 58 00:04:34,830 --> 00:04:40,340 tomar aquí, ciertamente podemos encontrar otras formas de administrar nuestros datos aquí, pero me gusta esta. 59 00:04:40,590 --> 00:04:53,140 Ahora, lo que necesitaré en este archivo son los datos ficticios de mis comidas, por lo que importaré comidas desde mi carpeta de datos 60 00:04:53,140 --> 00:04:59,860 y allí desde los datos ficticios. js e inicializaré las comidas aquí con mi matriz de datos ficticios de comidas. 61 00:05:00,550 --> 00:05:06,220 Las comidas filtradas también se inicializan con eso porque inicialmente cuando se inicia esta 62 00:05:06,330 --> 00:05:11,840 aplicación, no tenemos configuración de filtros. Por otro lado, las comidas favoritas inicialmente son una matriz vacía porque, de nuevo, cuando se 63 00:05:11,840 --> 00:05:13,130 inicia la aplicación, no tendremos comidas favoritas. 64 00:05:13,130 --> 00:05:18,230 Por supuesto, en una aplicación real, es posible que desee almacenar ese estado en un servidor, de modo que cuando 65 00:05:18,230 --> 00:05:21,400 el usuario cierre la aplicación y regrese más tarde, no comience desde 66 00:05:21,470 --> 00:05:23,230 cero nuevamente, pero eso no es 67 00:05:23,240 --> 00:05:28,580 algo que haremos aquí, usted Aprenderemos cómo llegar a un servidor y guardar datos allí y cargar datos desde allí 68 00:05:28,610 --> 00:05:29,440 en módulos 69 00:05:29,460 --> 00:05:33,040 separados más adelante en este curso, aquí mantendremos esto simple para enfocarnos en Redux. 70 00:05:33,140 --> 00:05:39,170 Así que este es mi estado inicial, aquí en esta función ahora podemos usar una sintaxis de Javascript donde 71 00:05:39,230 --> 00:05:44,690 asignamos nuestro estado inicial como un valor predeterminado para el argumento de estado, lo que significa que 72 00:05:44,690 --> 00:05:51,290 cuando se ejecuta esta función reductora y el estado no está definido, que es el caso cuando Redux ejecuta nuestro 73 00:05:51,590 --> 00:05:53,700 reductor por primera vez, comenzaremos 74 00:05:53,750 --> 00:05:56,330 con ese estado inicial, por lo que luego 75 00:05:56,330 --> 00:06:02,760 cargará automáticamente nuestro estado inicial, por ejemplo, porque cuando Redux se inicia y se inicia, se enviará una acción inicial 76 00:06:02,790 --> 00:06:07,910 que es solía pasar por el reductor una vez y luego cargará nuestro estado inicial. 77 00:06:07,980 --> 00:06:14,160 Con eso, podemos trabajar con un estado inicial que es bueno pero que por sí solo no nos 78 00:06:14,160 --> 00:06:16,190 ayuda demasiado. Por el momento, eso 79 00:06:16,200 --> 00:06:17,070 es todo, 80 00:06:17,250 --> 00:06:23,640 ahora conectemos este reductor a Redux para que podamos usar nuestra tienda Redux en todas partes de la aplicación antes de 81 00:06:23,640 --> 00:06:30,860 comenzar a enviar acciones y hacer cosas más útiles en el reductor. Por lo tanto, aquí por ahora, solo exportaré 82 00:06:30,860 --> 00:06:39,890 el reductor de comidas por defecto aquí y ahora en la aplicación. js, que es el archivo donde se inicia 83 00:06:39,890 --> 00:06:42,190 toda nuestra aplicación, 84 00:06:42,230 --> 00:06:47,960 necesitamos configurar nuestra tienda Redux. Para 85 00:06:48,080 --> 00:06:57,270 eso aquí, importamos crear tienda de Redux. 86 00:06:57,510 --> 00:07:02,010 Además, tendremos que importar reductores combinados desde allí. 87 00:07:02,010 --> 00:07:06,090 Esto nos permite ahora crear una tienda, solo necesitaremos nuestro reductor, así que 88 00:07:06,090 --> 00:07:12,610 aquí importaré mi reductor de comidas y ahora apuntaré a la carpeta de la tienda, la carpeta de reductores y 89 00:07:12,610 --> 00:07:15,280 allí, las comidas. js y 90 00:07:15,330 --> 00:07:26,520 ahora tal vez aquí, podemos crear nuestra tienda aquí llamando a crear tienda. Ahora crear tienda toma un reductor al final 91 00:07:26,640 --> 00:07:31,910 que debe pasar. Ahora, por supuesto, aquí, tenemos un reductor 92 00:07:31,920 --> 00:07:36,780 y podríamos pasarlo, pero en aplicaciones más grandes, es posible que tenga más de un 93 00:07:36,780 --> 00:07:43,710 reductor porque a menudo tiene reductores para las diferentes áreas de funciones de su aplicación, una para autenticación, otra para sus 94 00:07:43,710 --> 00:07:49,740 productos, uno para el área de soporte de su aplicación y necesita fusionar todos estos reductores individuales, estos 95 00:07:49,800 --> 00:07:53,970 diferentes reductores en un reductor raíz y eso es lo que hace la 96 00:07:54,000 --> 00:07:58,800 función de reductores combinados, nuevamente aquí no lo necesitaríamos porque solo tenemos un reductor 97 00:07:58,800 --> 00:08:01,060 pero para mostrarle el enfoque que 98 00:08:01,140 --> 00:08:07,890 también podría usar con múltiples reductores, lo usaré aquí también. Así que tendré mi reductor de raíz aquí, que creo 99 00:08:07,890 --> 00:08:14,460 llamando a los reductores combinados, los reductores combinados toman un objeto Javascript donde ahora asignamos nuestros reductores individuales, nuestros 100 00:08:14,460 --> 00:08:16,130 diferentes reductores a teclas. 101 00:08:16,130 --> 00:08:21,870 Entonces, por ejemplo aquí, podríamos tomar las comidas como una clave, pero ese nombre depende totalmente de usted y conectarlo 102 00:08:22,740 --> 00:08:24,900 con el reductor de comidas, como este. 103 00:08:24,900 --> 00:08:32,760 Lo que esto hace es que al final fusiona este reductor de comida en este reductor de raíz y luego podremos 104 00:08:32,760 --> 00:08:37,380 trabajar con el estado administrado por el reductor de comidas, por lo 105 00:08:37,380 --> 00:08:43,440 que con este estado que se inicializa así, con la ayuda de estas comidas propiedad, podremos acceder 106 00:08:43,440 --> 00:08:44,900 a este estado, 107 00:08:44,910 --> 00:08:49,630 esta porción del estado con esta propiedad más adelante, pero verá todo eso. 108 00:08:49,740 --> 00:08:54,780 Así que ese es nuestro reductor de raíz y ahora solo tenemos que pasar el reductor de raíz para 109 00:08:54,780 --> 00:08:57,900 crear una tienda, esto nos da una tienda y ahora ¿qué? 110 00:08:57,900 --> 00:09:03,210 Ahora esta tienda necesita ser proporcionada a nuestra aplicación y para eso, necesitamos 111 00:09:03,240 --> 00:09:06,960 ese otro paquete que instalamos que es React Redux. 112 00:09:07,170 --> 00:09:18,300 A partir de ahí, podemos importar el componente del proveedor, proveedor como este. Luego envolvemos al proveedor alrededor de nuestro componente de la aplicación raíz al final, por 113 00:09:18,390 --> 00:09:25,200 lo que alrededor del componente superior que contiene todos los demás componentes que eventualmente interactuarán con nuestra tienda 114 00:09:25,200 --> 00:09:30,000 y el navegador de comidas es bastante bueno para eso porque contiene 115 00:09:30,060 --> 00:09:35,960 todas nuestras pantallas, por lo que contiene todos componentes que eventualmente necesitaremos para despachar acciones o 116 00:09:35,960 --> 00:09:36,420 acceder 117 00:09:36,480 --> 00:09:44,230 a nuestro estado, así que lea de nuestro estado. Por lo tanto, aquí envolvemos el componente del proveedor alrededor del navegador 118 00:09:44,230 --> 00:09:50,440 de comidas y ahora el proveedor toma una propiedad importante, un accesorio que tiene que pasar y ese es el accesorio de 119 00:09:50,680 --> 00:09:54,590 la tienda y, por supuesto, allí, como un valor que pasamos nuestra tienda aquí. 120 00:09:54,640 --> 00:10:01,660 Entonces, esta tienda constante que contiene la tienda creada se pasa al proveedor de accesorios de la tienda y detrás de escena, 121 00:10:01,660 --> 00:10:07,990 esto nos da todo lo que necesitamos ahora para interactuar con Redux, con la tienda Redux en cualquier componente, 122 00:10:08,050 --> 00:10:11,520 cualquier pantalla o cualquier otro componente de nuestra aplicación . 123 00:10:13,360 --> 00:10:18,630 Ahora permítanme reiniciar esto con npm start y por el momento, esto no hará una gran 124 00:10:18,630 --> 00:10:21,430 diferencia, pero nuestra aplicación aún debería funcionar, 125 00:10:21,430 --> 00:10:29,140 por lo que no debería fallar por eso, así que verifiquemos que este sea el caso y vamos a vuelva a cargar aquí, 126 00:10:29,170 --> 00:10:38,370 estamos presionando r dos veces en Android y comando r en iOS y veamos dónde todavía se carga como debería, sí, eso se ve bien aquí en 127 00:10:38,730 --> 00:10:44,860 iOS y estoy bastante seguro de que también se cargará bien en Android, Sí, eso también está funcionando. 128 00:10:44,890 --> 00:10:46,890 Entonces, ahora que Redux está 129 00:10:46,900 --> 00:10:49,990 configurado, nuestra tienda está inicializada pero no la estamos usando. 130 00:10:49,990 --> 00:10:54,520 Entonces, como siguiente paso, asegurémonos de usar nuestra tienda antes de ocuparnos de las acciones y hacer 131 00:10:54,520 --> 00:10:56,200 un trabajo real en el reductor.