1 00:00:02,430 --> 00:00:04,130 Así que estamos haciendo un buen progreso. 2 00:00:04,140 --> 00:00:08,190 Migramos todos nuestros navegadores o casi todos. 3 00:00:08,190 --> 00:00:12,930 Ahora, ¿qué pasa con el navegador de conmutación vacío del navegador AQUÍ? 4 00:00:12,930 --> 00:00:15,210 Bueno, seguro que te desconectamos del navegador. 5 00:00:15,240 --> 00:00:21,300 Es un navegador de pila que es responsable de la pantalla y nosotros. 6 00:00:21,540 --> 00:00:23,610 Bueno, ¿qué pasa con el navegador de cambio? 7 00:00:23,610 --> 00:00:26,490 Bueno, ya no necesitaremos cambiar de navegador. 8 00:00:26,520 --> 00:00:31,600 No hay un paquete de cambio de barra de navegación en reaccion ni nada de eso. 9 00:00:31,800 --> 00:00:33,810 Pero volveré a eso cuando lo necesitemos. 10 00:00:33,960 --> 00:00:42,960 Entonces, por ahora creemos nuestro navegador fuera de línea o nuestro navegador fuera de pila aquí llamando al navegador. 11 00:00:42,970 --> 00:00:52,410 Al llamar a crear el navegador de pila y exportar nuestro año constante fuera del navegador, que de nuevo 12 00:00:52,410 --> 00:00:59,480 es un componente de reacción igual que antes cuando regresamos del navegador de pila. 13 00:00:59,550 --> 00:01:05,850 Y allí tenemos nuestra pantalla de puntos del navegador de la cubierta de la oficina y el nombre de la pantalla está apagado. 14 00:01:05,850 --> 00:01:12,470 Como lo tenemos aquí y el componente que necesitamos está fuera de la pantalla, así que eso es todo. 15 00:01:12,490 --> 00:01:14,680 Ahora tenemos las opciones del diablo NAF aquí. 16 00:01:14,680 --> 00:01:22,170 Por lo tanto, las opciones de pantalla en el navegador deberían ser las opciones de siesta predeterminadas y 40 opciones específicas de pantalla. 17 00:01:22,180 --> 00:01:30,160 Echemos un vistazo a la pantalla apagada y, si nos desplazamos hacia abajo, también tenemos algunas opciones. 18 00:01:30,190 --> 00:01:36,240 Así que exportemos nuestras opciones de pantalla aquí tal como lo hicimos antes. 19 00:01:36,280 --> 00:01:42,980 Exportemos y luego vayamos al navegador de la tienda aquí y en esa pantalla. 20 00:01:42,980 --> 00:01:50,960 Establezcamos dos opciones fuera de la pantalla que ahora también tenemos que agregar como una importación en la 21 00:01:51,440 --> 00:02:01,210 parte superior desde fuera de la pantalla, importamos las opciones de pantalla como opciones fuera de la pantalla, así que eso es todo. 22 00:02:01,220 --> 00:02:07,400 Ahora también tenemos esta pantalla de inicio, pero si observamos más de cerca en el pasado, solo señalamos 23 00:02:07,460 --> 00:02:13,470 eso directamente desde el interior de nuestro navegador Navigator, lo que nos deja con una sola pregunta. 24 00:02:13,730 --> 00:02:16,950 ¿Qué pasa con este navegador de conmutación? 25 00:02:17,300 --> 00:02:23,040 Ahora, en el pasado, esta habría sido la primera pantalla que verá una vez que se cargue la manzana 26 00:02:23,280 --> 00:02:26,420 porque es la primera pantalla superior en esta configuración. 27 00:02:26,420 --> 00:02:33,590 Y luego teníamos lógica en ese viejo contenedor de navegación que construimos anteriormente, donde verificamos si estamos 28 00:02:33,590 --> 00:02:39,800 autenticados y si eso no fuera cierto si no estuviéramos autenticados, redirigiríamos al usuario 29 00:02:39,800 --> 00:02:41,420 a esa pantalla. 30 00:02:41,420 --> 00:02:44,470 Ahora, ¿cuándo llegaríamos a la pantalla de la tienda? 31 00:02:44,480 --> 00:02:46,880 Bueno, para eso echemos un vistazo a la pantalla de inicio. 32 00:02:47,060 --> 00:02:54,350 Ahí vemos que intentamos autenticarnos y aquí eventualmente íbamos a la pantalla de las tiendas cuando 33 00:02:54,350 --> 00:02:55,900 iniciamos sesión automáticamente. 34 00:02:55,910 --> 00:02:58,410 Esa fue la lógica que escribimos allí. 35 00:02:58,430 --> 00:03:03,400 Ahora que sigue siendo una lógica que tiene mucho sentido. 36 00:03:03,450 --> 00:03:11,100 Solo tenemos que ajustarlo para el nuevo paquete de navegación al final, lo que podemos ver aquí es que en el inicio 37 00:03:11,100 --> 00:03:19,390 de la pantalla estamos tratando de bloquear al usuario y, si no podemos encontrar los datos de usuario almacenados en el dispositivo, vamos a 38 00:03:19,420 --> 00:03:20,830 la página de fuera. 39 00:03:20,830 --> 00:03:26,260 Si encontramos que los datos sobre el token han caducado o no, vamos a la página de apagado. 40 00:03:26,260 --> 00:03:34,750 Sin embargo, si tenemos éxito con todo y tenemos un token válido, en su lugar, vamos a la página de 41 00:03:35,110 --> 00:03:41,110 la tienda y enviamos una acción donde autenticamos al usuario que cambia de 42 00:03:41,110 --> 00:03:49,750 estado y nuestra tienda redux que establece los tokens inicialmente en ese token en nuestra tienda. ahora ahora podemos usar eso. 43 00:03:49,760 --> 00:03:58,250 ¿Qué pasa si nos deshacemos de todas estas llamadas de navegación aquí para que podamos eliminarlas o simplemente comentarlas mientras lo 44 00:03:58,340 --> 00:03:59,430 hago aquí? 45 00:03:59,480 --> 00:04:03,920 Entonces nos deshacemos de todas estas acciones de navegación. 46 00:04:04,460 --> 00:04:06,890 ¿Qué pasa si volvemos aquí? 47 00:04:06,890 --> 00:04:11,840 Bueno, si volvemos aquí, la ejecución de la disfunción detiene a Indiana. 48 00:04:11,840 --> 00:04:12,730 Para. 49 00:04:12,830 --> 00:04:17,270 Y lo que definitivamente no hacemos es que definitivamente no enviamos acciones. 50 00:04:17,270 --> 00:04:20,240 Así que definitivamente no configuramos el token para nada. 51 00:04:20,240 --> 00:04:22,270 Sigue siendo no. 52 00:04:22,640 --> 00:04:27,800 Eso siempre sucede aquí a menos que lleguemos al fondo, en cuyo caso tenemos un token. 53 00:04:27,890 --> 00:04:30,810 Nos enviamos y el token no es nulo. 54 00:04:30,830 --> 00:04:32,750 A menudo están en nuestra tienda. 55 00:04:32,840 --> 00:04:38,770 Entonces, ese token que gestionamos con redux es incluso ahora o tiene un valor. 56 00:04:38,840 --> 00:04:41,990 Ahora quiero ajustar un poco la tienda redux. 57 00:04:42,140 --> 00:04:48,500 La parte de él y todos ustedes para el usuario y agregaré una nueva pieza de datos a 58 00:04:48,530 --> 00:04:54,070 este estado y esa es la clave de todos los intentos para iniciar sesión. 59 00:04:54,090 --> 00:04:58,300 Puedes nombrarlo como quieras y lo estableceré en falso inicialmente aquí. 60 00:04:58,300 --> 00:05:02,290 Quiero almacenar si intentamos iniciar sesión con el usuario o no. 61 00:05:02,290 --> 00:05:04,150 Ahora si nos autenticamos. 62 00:05:04,150 --> 00:05:11,850 Entonces, si despachamos una acción con ese identificador, estableceré que intenté iniciar sesión automáticamente en verdadero. 63 00:05:11,890 --> 00:05:19,240 También agregaré una nueva acción aquí en acciones desactivadas y para eso agregaré un 64 00:05:19,240 --> 00:05:31,820 nuevo identificador aquí que nombraré set intentó o una L para el inicio de sesión automático probó una L y creó un creador de 65 00:05:31,910 --> 00:05:38,070 acción para eso set probó una L que no toma argumentos. 66 00:05:38,070 --> 00:05:44,040 Y donde no devolví mi objeto de acción donde escribir solo se establece. 67 00:05:44,060 --> 00:05:45,200 Intenté un l .. 68 00:05:45,230 --> 00:05:49,020 También podría ponerlo al final del archivo, no importa. 69 00:05:49,020 --> 00:05:50,330 Ahora, ¿por qué estoy haciendo eso? 70 00:05:50,390 --> 00:05:51,460 Lo verás en el segundo. 71 00:05:51,530 --> 00:05:55,820 Volvamos al reductor, reduzca el reductor y maneje este nuevo caso. 72 00:05:55,820 --> 00:05:58,960 El caso establecido lo intentó a l. 73 00:05:59,000 --> 00:06:06,620 Asegúrate de que también importes de acciones de ahora cada año, devolvemos un nuevo estado en el que copie el estado anterior 74 00:06:06,620 --> 00:06:13,250 y donde dije que intenté iniciar sesión automáticamente en verdadero, por lo que el token aún podría ser conocimiento, 75 00:06:13,250 --> 00:06:14,750 solo configúralo como verdadero. 76 00:06:14,750 --> 00:06:19,490 Ahora mi idea es que envíe esta acción aquí en la pantalla de inicio. 77 00:06:19,610 --> 00:06:25,790 En todos los escenarios en los que previamente fuimos a la pantalla fuera, entonces intentamos iniciar sesión 78 00:06:25,790 --> 00:06:27,280 pero no lo logramos. 79 00:06:27,380 --> 00:06:38,650 Así que sí, enviaré el set. Intenté A. L. así que asegúrate de acceder a esto en tus acciones de 80 00:06:39,040 --> 00:06:44,270 apagado así y hazlo en estos dos casos donde previamente navegamos a la pantalla de apagado. 81 00:06:44,320 --> 00:06:48,160 Así que ahora tenemos este nuevo campo y redux y por qué estoy haciendo eso. 82 00:06:48,160 --> 00:06:49,840 ¿Por qué es útil esto? 83 00:06:49,840 --> 00:06:55,480 Bueno, porque con react navigation 5 ya no hay un navegador de interruptores porque ya no lo necesitamos, 84 00:06:55,810 --> 00:06:58,900 ya que ahora gestionamos toda nuestra configuración de ruta. 85 00:06:59,010 --> 00:07:06,920 ¿Por qué los componentes podemos simplemente renderizar dinámicamente componentes para que tengan un efecto o no 86 00:07:06,920 --> 00:07:14,240 hacerlo en el navegador de aplicaciones donde renderizo el navegador de mis productos? 87 00:07:14,260 --> 00:07:20,820 Ahora es el momento de agregar todos estos navegadores configurados y luego decidir qué navegador se debe representar 88 00:07:20,830 --> 00:07:24,230 cuando sea así desde el navegador de la tienda. 89 00:07:24,330 --> 00:07:27,300 Ahora realmente quiero importar este navegador 90 00:07:31,660 --> 00:07:40,180 de tiendas aquí, que exportaré como una constante nuevamente y luego aquí un navegador de aplicaciones que importo el navegador 91 00:07:40,270 --> 00:07:41,320 de tiendas. 92 00:07:41,320 --> 00:07:42,850 Ese es nuestro sorteo de un navegador. 93 00:07:42,850 --> 00:07:45,990 Tenga eso en cuenta y eso es lo que quiero presentar aquí. 94 00:07:46,090 --> 00:07:48,090 Shop Navigator. 95 00:07:48,240 --> 00:07:55,020 Entonces, esto es básicamente lo que quiero renderizar si estamos encerrados en nuestra tienda justo antes, eso es lo que 96 00:07:55,020 --> 00:07:59,070 asignamos a esta clave de tienda en el navegador de interruptores. 97 00:07:59,070 --> 00:08:02,350 Ahora todos necesitamos el navegador apagado en la pantalla de inicio. 98 00:08:02,400 --> 00:08:04,190 Así que aquí hay un navegador de aplicaciones. 99 00:08:04,290 --> 00:08:09,290 Importaré el navegador desactivado y estos son los únicos dos navegadores que necesito importar aquí. 100 00:08:09,330 --> 00:08:15,060 Por lo tanto, puede eliminar la declaración de exportación en todos los otros navegadores aquí en nuestro archivo de navegador de la tienda, pero 101 00:08:16,080 --> 00:08:20,300 lo que también necesitará importar en el navegador de aplicaciones es la pantalla de inicio ahora. 102 00:08:20,520 --> 00:08:30,520 Entonces, importemos la pantalla de inicio desde la pantalla de inicio de pantallas y ahora tenemos el navegador de la tienda. 103 00:08:30,520 --> 00:08:40,010 Tenemos el navegador desactivado como alternativa y también tenemos una pantalla de inicio profunda ahora solo representará uno 104 00:08:40,010 --> 00:08:42,430 de los gratuitos y. 105 00:08:42,540 --> 00:08:45,410 Y aquí es donde ahora podemos reutilizar redux. 106 00:08:45,480 --> 00:08:51,000 Copiaré el selector de uso porque la información del sitio sobre el token también me 107 00:08:51,000 --> 00:08:57,770 interesa aprender sobre el intento de todos los campos de inicio de sesión que agregué al estado desactivado aquí. 108 00:08:57,780 --> 00:09:05,770 Este nuevo campo agregado Ahora tengo acceso a esto aquí en el archivo del navegador de mi aplicación y lo guardo e 109 00:09:05,810 --> 00:09:08,280 intenté todo para iniciar sesión constantemente. 110 00:09:08,280 --> 00:09:15,710 Ahora sé que quiero renderizar para comprar si esto es cierto y lo que hacemos es cómo podemos hacerlo si estamos autenticados. 111 00:09:15,720 --> 00:09:20,000 Siempre hago compras, no me importa nada más. 112 00:09:20,160 --> 00:09:28,290 Ahora quiero renderizar el navegador fuera si es por sus fallas e intentamos iniciar sesión todavía porque si 113 00:09:28,290 --> 00:09:36,540 no hemos intentado iniciar sesión automáticamente, entonces realmente quiero renderizar la pantalla de inicio, así que si no 114 00:09:36,540 --> 00:09:42,700 estamos autenticados y lo hicimos no intente nuestro inicio de sesión automático todavía 115 00:09:43,100 --> 00:09:47,180 Bueno, entonces no sabemos si el usuario podría ser un autenticador o no. 116 00:09:47,180 --> 00:09:54,580 Entonces, en ese caso, quiero renderizar a la pantalla de inicio ahora, quiero rápidamente un POS allí y asegurarme de que todos estamos 117 00:09:54,700 --> 00:10:00,820 en la misma página y todos entendemos por qué ahora estamos usando esto en lugar del navegador de cambio. 118 00:10:00,830 --> 00:10:05,550 Ahora, antes que nada, ya no hay un navegador de interruptores en react navigation 5. 119 00:10:05,710 --> 00:10:07,720 Pero por qué fue eliminado. 120 00:10:07,720 --> 00:10:15,010 Bueno, dado que ahora configuramos todo con componentes, podemos usar herramientas de reacción regulares para representar un 121 00:10:15,010 --> 00:10:16,540 componente o no. 122 00:10:16,540 --> 00:10:21,850 Si no está pensando en la navegación, sino en una pantalla normal en la que tal 123 00:10:21,850 --> 00:10:28,420 vez tenga un texto que solo desea mostrar condicionalmente, usaría algún estado y luego en J es X, a veces solo 124 00:10:28,600 --> 00:10:31,990 representaría un texto con una expresión ternaria, por ejemplo . 125 00:10:32,110 --> 00:10:37,660 Y estamos haciendo lo mismo aquí con nuestra configuración de ruta con nuestras configuraciones de 126 00:10:37,660 --> 00:10:43,700 pantalla aquí, la configuración de configuración de pantalla que tenemos aquí son diferentes navegadores y para la pantalla 127 00:10:43,750 --> 00:10:50,770 de inicio, estos son al final todas las cosas que reaccionan deben ser conscientes de traer algo al pantalla y 128 00:10:50,800 --> 00:10:56,830 reacción de navegación detrás de escena levantamiento pesado y polvoriento interpretando nuestra configuración y asegurándose de que 129 00:10:56,830 --> 00:10:59,440 el componente correcto aparezca en la pantalla. 130 00:10:59,440 --> 00:11:09,210 Ahora, si usamos está desactivado e intentamos iniciar sesión automáticamente para controlar qué navegador es realmente capaz de renderizar al reaccionar usando una expresión tan ternaria, 131 00:11:09,220 --> 00:11:17,230 entonces nos aseguramos de que si, por ejemplo, está desactivado, no es cierto, no hay forma de que las pantallas del 132 00:11:17,230 --> 00:11:21,610 navegador de la tienda puedan ser traído a la pantalla. 133 00:11:21,610 --> 00:11:22,230 Por qué. 134 00:11:22,270 --> 00:11:28,840 Debido a que el componente del navegador de la tienda que contiene nuestra configuración raíz relacionada con la tienda, nuestra configuración 135 00:11:29,260 --> 00:11:33,400 de pantalla ese componente solo se representa si la oficina es verdadera. 136 00:11:33,400 --> 00:11:39,840 Por lo tanto, no hay forma de que una pantalla relacionada con la tienda se muestre en la pantalla si está desactivada es falsa. 137 00:11:40,090 --> 00:11:47,560 Realmente haga esa comparación con elementos de texto normales o cuadros normales en una pantalla que renderice condicionalmente. 138 00:11:47,560 --> 00:11:54,000 Estamos haciendo lo mismo aquí, pero no con cuadros y texto, sino con toda nuestra pila de navegación. 139 00:11:54,040 --> 00:12:00,170 Eso es lo que hacemos aquí y con todo eso si guardamos esto y volvemos 140 00:12:04,210 --> 00:12:12,860 a ejecutar esto en Android, terminamos en la pantalla apagada y si vuelvo a cargar esto y se reconstruye, volveremos a terminar allí. 141 00:12:13,630 --> 00:12:16,450 Ahora, si intento iniciar sesión aquí, ahora 142 00:12:21,790 --> 00:12:23,930 tengo un problema aquí. 143 00:12:24,100 --> 00:12:30,530 Me sale un error que navegar con una carga útil de la tienda no se manejó bien. 144 00:12:30,540 --> 00:12:32,960 Esto ahora tiene sentido si lo piensas. 145 00:12:32,970 --> 00:12:35,440 Ya no tenemos interruptor de navegador. 146 00:12:35,490 --> 00:12:40,170 En cambio, solo controlamos qué navegador queremos representar en qué circunstancias. 147 00:12:40,350 --> 00:12:42,410 Entonces, ¿por qué estamos recibiendo esto? 148 00:12:42,420 --> 00:12:44,490 ¿Puedes resolverlo y arreglarlo por tu cuenta? 149 00:12:44,580 --> 00:12:48,330 De lo contrario, lo haremos juntos, lo arreglaremos juntos en la próxima clase.