1 00:00:02,570 --> 00:00:08,780 El estado puede ser complejo y es importante entender esto para comprender qué problemas resuelven realmente 2 00:00:08,780 --> 00:00:12,220 las soluciones de administración de estado como Redux. 3 00:00:12,320 --> 00:00:17,930 Si tuviéramos una aplicación como esta, que no es la aplicación que creamos, pero que podría ser una aplicación que está 4 00:00:17,930 --> 00:00:23,180 creando donde tiene dos áreas diferentes, una donde administra a sus usuarios, donde los usuarios pueden iniciar sesión, donde 5 00:00:23,180 --> 00:00:28,100 los usuarios pueden administrar sus panel de control, vea su panel de control, etc., y uno donde tenga 6 00:00:28,100 --> 00:00:30,100 productos en una lista que los usuarios 7 00:00:30,100 --> 00:00:35,480 pueden agregar a un carrito, entonces estas áreas en realidad no son totalmente independientes, pero en su aplicación, se mostrarán 8 00:00:35,480 --> 00:00:38,290 en diferentes pantallas, muy separadas de El uno al otro. 9 00:00:38,630 --> 00:00:44,630 Pero la pregunta de si un usuario ha iniciado sesión en lo que necesita aquí también podría ser 10 00:00:44,630 --> 00:00:46,100 relevante en otra parte 11 00:00:46,280 --> 00:00:52,550 de su aplicación y en este momento, normalmente tendría que pasar esos datos manualmente a través de accesorios 12 00:00:52,550 --> 00:00:57,930 pasándolos del componente A a B a C a D hasta E, donde quizás necesites 13 00:00:57,970 --> 00:01:00,490 esto, eso no es realmente muy conveniente. 14 00:01:00,500 --> 00:01:06,980 En cambio, desea tener una configuración de la aplicación donde algo cambia, por ejemplo, un usuario inicia sesión o en 15 00:01:06,980 --> 00:01:07,900 nuestra aplicación 16 00:01:07,910 --> 00:01:15,080 de comidas, configura un filtro determinado y lo guarda y luego esta información se propaga a su aplicación y se pasa automáticamente 17 00:01:15,080 --> 00:01:19,420 a los lugares donde lo necesite, pero no a través de accesorios, sino 18 00:01:19,520 --> 00:01:26,120 con un mecanismo detrás de escena que lo ayude con respecto a esto y ahí es donde Redux es una 19 00:01:26,120 --> 00:01:31,370 solución común que usamos en las aplicaciones React y React Native para administrar ese estado. 20 00:01:31,370 --> 00:01:33,170 Ahora, ¿cómo funciona Redux? 21 00:01:33,200 --> 00:01:38,420 En primer lugar, Redux es una biblioteca de terceros que puede agregar a React Native para 22 00:01:38,450 --> 00:01:45,050 usarla allí y se trata de tener una tienda central. Redux presenta una tienda central en la memoria, no una 23 00:01:45,110 --> 00:01:51,950 base de datos, pero está en la memoria, en la memoria Javascript, por ejemplo, dónde se encuentra el estado de su 24 00:01:51,950 --> 00:01:58,070 aplicación, de modo que los datos de los que dependen diferentes partes de su aplicación se pueden almacenar y 25 00:01:58,070 --> 00:01:59,280 luego, cuando está 26 00:01:59,330 --> 00:02:03,740 en un componente, tiene algo que quiere manipular ese estado, por ejemplo, estamos 27 00:02:03,770 --> 00:02:10,610 configurando un filtro o marcando una comida como favorita, luego enviamos una llamada acción, que es un paquete de información predefinido 28 00:02:10,610 --> 00:02:15,840 que diría, que tiene un cierto esquema que puede manejar Redux según lo configurado por usted. 29 00:02:15,860 --> 00:02:20,800 Esta acción alcanza el llamado reductor y usted será el que escriba ese reductor como desarrollador, 30 00:02:20,810 --> 00:02:25,270 para que pueda controlar qué tipo de acción acepta un reductor, de modo que qué 31 00:02:26,060 --> 00:02:32,180 tipo de paquete de información requiere su reductor y ese reductor recibe la acción y deriva un nuevo estado basado 32 00:02:32,480 --> 00:02:39,670 en el estado anterior que luego actualiza este estado almacenado centralmente. Entonces el reductor está ahí para actualizar 33 00:02:39,660 --> 00:02:42,500 el estado al final. 34 00:02:42,500 --> 00:02:48,080 Y cuando esa tienda cambia, cuando el estado allí cambia, también puede tener suscripciones a esa tienda desde 35 00:02:48,080 --> 00:02:53,050 otros componentes, estas suscripciones se activarán cuando su tienda, cuando su estado cambie y el estado 36 00:02:53,090 --> 00:02:57,340 actualizado pase a los lugares. en su aplicación, por lo que para los 37 00:02:57,380 --> 00:03:01,040 componentes que están interesados en estos cambios, por ejemplo, este componente 38 00:03:01,040 --> 00:03:05,720 aquí podría estar interesado en algunas actualizaciones, bueno, entonces puede configurar una suscripción y se 39 00:03:05,900 --> 00:03:08,190 le informará sobre la actualización y 40 00:03:08,190 --> 00:03:14,130 obtendrá el nuevo estado a través de su accesorios o también con ganchos React como aprenderás en este módulo. 41 00:03:14,240 --> 00:03:19,620 Así es como funciona Redux y esa es la idea detrás de Redux. 42 00:03:19,700 --> 00:03:27,020 Ahora una nota importante, si estás un poco más avanzado en React, probablemente también conozcas la API de contexto 43 00:03:27,050 --> 00:03:29,770 React que está integrada en React. 44 00:03:29,810 --> 00:03:36,980 Esto también se puede usar para algunos estados y gestión de datos detrás de escena, pero no es un buen reemplazo para todos los 45 00:03:36,980 --> 00:03:39,710 casos de uso en los que usa Redux. 46 00:03:39,710 --> 00:03:45,160 No profundizaré más en esto aquí porque este no es realmente un curso sobre los entresijos de diferentes 47 00:03:45,170 --> 00:03:50,930 construcciones de React, en cambio queremos aprender React Native aquí pero adjunto, encontrará algunos recursos que lo ayudarán con esa 48 00:03:50,930 --> 00:03:58,030 comparación entre React Context API y Redux y cuándo usar cuál. En este módulo, usaremos Redux, que es muy flexible, 49 00:03:58,050 --> 00:04:02,490 que definitivamente podemos usar y le mostraré cómo configurarlo con React Native 50 00:04:02,490 --> 00:04:05,870 y cómo, por supuesto, puede trabajar con él.