1 00:00:02,290 --> 00:00:05,850 Para configurar Redux, seguiré el mismo enfoque que hice anteriormente en el curso, agregaré una 2 00:00:05,950 --> 00:00:14,470 carpeta de la tienda y allí tendré mis lugares de acción. archivo js y mi reductor de lugares. archivo js. 3 00:00:14,470 --> 00:00:16,310 Por supuesto, eso es 4 00:00:16,330 --> 00:00:19,310 un poco diferente que antes, allí tenía una subcarpeta 5 00:00:19,390 --> 00:00:21,520 de acciones y reductores, puede hacer 6 00:00:21,520 --> 00:00:25,950 absolutamente lo mismo aquí, ya que solo tengo una acción y un reductor, 7 00:00:25,960 --> 00:00:27,820 lo guardaré en dos archivos, 8 00:00:27,820 --> 00:00:34,840 pero podría tener subcarpetas, etc., eso depende totalmente de usted. Ahora, en el reductor de lugares, definiré cómo debería ser mi estado para 9 00:00:34,840 --> 00:00:37,990 esta parte de mi estado total y eso será muy 10 00:00:37,990 --> 00:00:43,510 simple, mi estado inicial aquí es solo un objeto Javascript donde quiero tener una clave de lugares que está vacía 11 00:00:43,510 --> 00:00:47,810 , una matriz vacía al principio porque tendré una variedad de lugares y eso es todo. 12 00:00:47,830 --> 00:00:53,830 Por lo tanto, aquí, puedo exportar esta función reductora que toma un estado que se establece en el estado 13 00:00:53,830 --> 00:00:54,190 inicial 14 00:00:54,190 --> 00:01:01,450 si no se pasa ningún otro estado y una acción y allí por ahora, simplemente devolveré ese estado, pronto, por supuesto, ' Agregaré lógica 15 00:01:01,450 --> 00:01:08,320 para manejar diferentes acciones y, por ejemplo, agregaré un nuevo lugar. En el archivo de acciones de lugares, exportaré una 16 00:01:08,320 --> 00:01:16,890 nueva constante, agregar lugar, que es un identificador de acción que necesitaré y agregaré una función creadora de acción, agregar lugar, que 17 00:01:16,890 --> 00:01:23,640 debería tomar algunos datos sobre el lugar y para momento, ese es solo el título, más tarde será 18 00:01:23,640 --> 00:01:26,290 más y aquí quiero devolver mi objeto 19 00:01:26,290 --> 00:01:28,420 de acción y luego 20 00:01:28,420 --> 00:01:35,560 donde el tipo es agregar lugar y donde solo tengo mis datos de lugar, digamos que en este momento, 21 00:01:35,560 --> 00:01:41,200 por supuesto, solo está compuesto de el título pero luego nuevamente, eso será más. 22 00:01:41,260 --> 00:01:43,630 Esa es la aplicación básica de Redux, ahora, por supuesto, en la aplicación. 23 00:01:43,660 --> 00:01:50,670 Necesitamos conectar todo. Entonces, como lo aprendió en este curso, podemos 24 00:01:51,280 --> 00:02:02,010 importar algo de Redux y también algo de React Redux y también importar Redux Thunk de Redux Thunk, por lo que desde este paquete 25 00:02:02,040 --> 00:02:05,160 también lo instalamos. Ahora, desde Redux, necesitamos 26 00:02:05,160 --> 00:02:12,270 crear una tienda y combinar reductores y también aplicar middleware para aplicar Redux Thunk y desde React Redux, necesitamos ese 27 00:02:12,270 --> 00:02:15,210 componente de proveedor y con eso, tal como 28 00:02:15,690 --> 00:02:21,240 lo hicimos varias veces en el curso, podemos crear nuestro reductor de raíz Con la 29 00:02:21,240 --> 00:02:23,120 ayuda de los reductores combinados. 30 00:02:23,130 --> 00:02:26,370 Esto toma un objeto donde fusionamos todos los reductores, 31 00:02:26,370 --> 00:02:33,090 ahora obviamente solo tenemos un reductor aquí y ese es el reductor de lugares que importamos de la carpeta de 32 00:02:33,090 --> 00:02:37,140 la tienda y allí, es el archivo reductor de lugares, pero por 33 00:02:37,140 --> 00:02:43,680 supuesto, podría tener más reductores en su aplicación y asignaré esto a lugares, por lo que el reductor de 34 00:02:43,710 --> 00:02:46,690 lugares se asigna al identificador de lugares aquí. 35 00:02:46,890 --> 00:02:53,460 Ahora con eso, podemos crear nuestra tienda con la función de crear tienda y esta función toma el reductor raíz y 36 00:02:53,490 --> 00:03:00,300 también podemos pasar un segundo argumento donde llamamos aplicar middleware y pasar Redux Thunk a esa función para que el paquete Redux 37 00:03:00,330 --> 00:03:07,800 Thunk sea amable de conectado a nuestro flujo de Redux aquí. Con todo eso configurado, podemos envolver nuestro navegador de 38 00:03:07,800 --> 00:03:15,810 lugares con el componente del proveedor porque cada pantalla de nuestra aplicación, en nuestro navegador, debe tener acceso a la tienda 39 00:03:15,810 --> 00:03:21,750 y al proveedor, pasamos la tienda a través del accesorio de la tienda y ese es 40 00:03:21,750 --> 00:03:30,160 el Redux configuración que también vimos varias veces durante este curso. Con Redux configurado, podemos ir a la pantalla del nuevo lugar y 41 00:03:30,160 --> 00:03:35,380 asegurarnos de que aquí, en el controlador de guardar lugar que se activa cuando hacemos 42 00:03:35,380 --> 00:03:41,530 clic en este botón, agreguemos un nuevo lugar que por el momento solo consiste en su título, pero 43 00:03:41,530 --> 00:03:49,450 Por supuesto, eso cambiará a lo largo de este curso. Para hacer eso, podemos importar el despacho de uso de React 44 00:03:50,730 --> 00:03:57,300 Redux y simplemente obtener acceso a la función de despacho ejecutando el despacho de uso allí y también, 45 00:03:57,390 --> 00:04:03,930 por supuesto, importar nuestra acción, por ejemplo nuevamente con el uso de esta sintaxis de fusión de importación 46 00:04:04,380 --> 00:04:14,370 aquí, con importar todo como lugares acciones desde la tienda y allí, el archivo de acciones de lugares y con eso, podemos ir a guardar el controlador de 47 00:04:14,370 --> 00:04:21,960 lugar, llamar al despacho aquí y despachar acciones de lugares agregar lugar y reenviar el título que, por supuesto, se almacena 48 00:04:21,960 --> 00:04:29,500 en nuestro valor de título, así que aquí aquí . Ahora con eso, podremos enviar esta acción, en el 49 00:04:29,650 --> 00:04:32,170 reductor de lugares, ahora podemos cambiar 50 00:04:32,170 --> 00:04:44,400 nuestro tipo de acción o usar si verificamos, por supuesto, y buscar el estado o acción de agregar lugar que importamos de las acciones de lugares, también agregar el caso 51 00:04:44,400 --> 00:04:50,400 predeterminado, por cierto, donde simplemente devolvemos el estado y, por lo tanto, podemos deshacernos de 52 00:04:50,400 --> 00:04:56,160 esta declaración de devolución allí y ahora, si agregar lugar es lo que obtuvimos, 53 00:04:56,220 --> 00:04:57,240 bueno, entonces 54 00:04:57,930 --> 00:05:04,260 podemos crear un nuevo lugar aquí y para eso, también como antes en este curso, agregaré 55 00:05:04,260 --> 00:05:10,290 una carpeta de modelos con un lugar. archivo js allí donde quiero definir cómo debería ser un 56 00:05:10,290 --> 00:05:15,900 lugar en esta aplicación, simplemente para tener una manera fácil de crear nuevos objetos de lugar que 57 00:05:15,900 --> 00:05:17,190 siempre sean iguales. 58 00:05:17,190 --> 00:05:24,510 Entonces, aquí, crearé una clase y exportaré esto como el archivo predeterminado y ahora, por supuesto, depende de usted cómo quiere que se vea 59 00:05:24,510 --> 00:05:30,180 su lugar, definiré el mío con la ayuda del constructor para tener una ID y un título y luego 60 00:05:30,570 --> 00:05:31,460 agregaremos más, 61 00:05:31,530 --> 00:05:32,670 pero por ahora, eso 62 00:05:32,670 --> 00:05:34,020 es todo y guardaré 63 00:05:34,230 --> 00:05:41,280 mi identificación aquí y guardaré mi título aquí en una propiedad. Con eso tenemos un plan para nuevos lugares, 64 00:05:41,280 --> 00:05:45,390 de vuelta en el reductor de lugares, ahora podemos usar 65 00:05:45,630 --> 00:05:46,440 eso. 66 00:05:46,440 --> 00:05:55,170 Entonces podemos importar el lugar desde la carpeta de modelos y allí, el lugar. js y luego aquí, cree un nuevo lugar llamando a un nuevo lugar, 67 00:05:55,170 --> 00:05:58,080 así que al inicializar o instanciar un nuevo lugar 68 00:05:58,080 --> 00:06:04,560 basado en nuestra clase y para la ID, utilizaré por el momento una ID ficticia de la fecha y hora 69 00:06:04,560 --> 00:06:12,050 actual y la Sin embargo, el título es, por supuesto, algo que podemos establecer porque es parte de nuestra acción, allí, en el 70 00:06:12,060 --> 00:06:17,130 lugar de los datos, tendremos una propiedad de título que contiene el título que el 71 00:06:17,130 --> 00:06:18,720 usuario configuró, por lo 72 00:06:18,720 --> 00:06:24,630 que aquí puedo configurarlo como acción. placeData. título. 73 00:06:24,630 --> 00:06:26,530 Esto crea un nuevo objeto de 74 00:06:26,670 --> 00:06:33,600 lugar y ahora podemos devolver un nuevo estado aquí donde lugares y no necesito copiar el estado anterior porque no tengo nada más 75 00:06:33,600 --> 00:06:39,480 en mi estado aquí y no agregaré nada, así que solo puedo devolver un nuevo objeto de estado, donde 76 00:06:39,900 --> 00:06:44,020 lugares ahora es estado. lugares. concat, de modo que toma 77 00:06:44,040 --> 00:06:49,710 la matriz anterior, agrega un nuevo elemento y devuelve una matriz nueva que reemplaza la matriz anterior 78 00:06:49,710 --> 00:06:51,050 aquí en nuestro 79 00:06:51,300 --> 00:06:59,310 estado y concaté mi nuevo lugar, por supuesto. Con eso, deberíamos tener una lista de lugares que gestionamos. En la próxima conferencia, ahora podemos preocuparnos por 80 00:06:59,310 --> 00:07:00,220 mostrar esto 81 00:07:00,240 --> 00:07:06,390 aquí en la pantalla de la lista de lugares. Solo otra cosa, cuando agreguemos un nuevo lugar aquí 82 00:07:06,390 --> 00:07:09,310 haciendo clic en el controlador de guardar lugar, también 83 00:07:09,390 --> 00:07:12,560 quiero volver a la pantalla de la lista de 84 00:07:12,570 --> 00:07:20,610 lugares, así que aquí, después de enviar esta acción, en realidad usaré la navegación de accesorios para volver, así que para volver a la 85 00:07:20,610 --> 00:07:25,530 pantalla de la lista de lugares. Y ahora trabajemos en esa pantalla de lista de lugares y asegurémonos de que 86 00:07:25,530 --> 00:07:26,760 realmente generemos una lista de lugares allí.