©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso práctico de Redux y Redux Toolkit
Gestión global de datos, sencilla y comprensible con Redux y Redux Toolkit
En marcha
En este curso de Redux vamos a aprender a manejar esta biblioteca para la gestión del estado en un contenedor global, lo que permite mantener datos y funcionalidades de una manera centralizada, comprensible y escalable.
Redux permite tener un único contenedor de datos, al cual puedes acceder desde cualquier parte del código de tus aplicaciones, a lo largo de todos sus componentes. Podrás acceder a los datos y a las funcionalidades definidas con Redux por medio de acciones. De este modo es posible mantenerse sincronizado con el estado de la aplicación y manipular el estado global de una manera sencilla y centralizada.
Existen muchas bibliotecas de gestión global del estado, pero Redux es la más importante y extendida. En el pasado se criticó bastante a Redux por la cantidad de código que era necesario para trabajar con la librería y como consecuencia las nuevas versiones han cambiado sensiblemente. Ahora con Redux Toolkit conseguimos una interfaz para la programación más sencilla y directa, eliminando mucho código de configuración y gestión del estado.
En este curso comenzaremos desde cero con Redux, aplicando sus novedades recientes propuestas por la librería Redux Toolkit, que permiten un desarrollo de código más rápido y con menos boilerplate.
En este curso comenzaremos desde cero con Redux, aplicando sus novedades recientes propuestas por la librería Redux Toolkit, que permiten un desarrollo de código más rápido y con menos boilerplate.
Qué aprenderé en el Curso práctico de Redux y Redux Toolkit
- Qué es Redux
- Desarrollo moderno de funcionalidades Redux con Redux Tooltik
- Patrones de desarrollo implementados por Redux
- Cómo usar Redux en un proyecto Javascript nativo
- Cómo usar Redux en combinación con otras librerías Javascript
Objetivos del curso
Por qué debes aprender Redux
Qué tengo que saber
Javascript a nivel medio. Conocimientos de Javascript en las versiones modernas ECMAScript 2015 en adelante.
Clases y contenidos
Iniciación a Redux y Redux Toolkit
Aprende lo básico sobre Redux y Redux Toolkit con esta clase gratuita, en la que además presentaremos la estructuración de contenidos del curso.
- Qué es Redux
- Qué es Redux Toolkit
- Cómo Redux Toolkit permite implementar Redux de una manera sencilla
Redux y Redux Toolkit en aplicaciones Javascript nativas
En el primer bloque del curso abordaremos en profundidad el uso de Redux en aplicaciones Javascript "VanillaJS", lo que nos ofrecerá unos conocimientos que podremos aplicar en cualquier contexto de uso de Redux. Veremos todas las novedades que nos ofrece Redux Toolkit y las ventajas que nos aporta en el desarrollo para la gestión global del estado. Veremos también todo lo que respecta a las acciones asíncronas con Redux y las mejoras de Redux Toolkit para gestionar el código asíncrono o los thunks en general.
- Store
- Actions
- Reducers
Aplicación de ejemplo de un todo list, aplicando Redux:
- Aprovechando las ventajas de Redux toolkit para el desarrollo.
- Usaremos Javascript nativo, sin librerías más allá de las que el propio Redux ofrece.
Seguimos desarrollando la aplicación todo list aplicaremos mejoras
- Componer fácilmente el store mediante diversos módulos separados
- Crear archivos slice separados y combinar reducers
- Aplicar filtros en la presentación de todos
Realizamos operaciones asíncronas en Redux usando Thunk middleware
- Aplicando primero el estilo clásico de Redux Thunk para trabajar con Ajax.
- Cómo usar createAsyncThunk para aprovechar de las utilidades que nos ofrece Redux Toolkit para la creación de Thunks.
Redux en aplicaciones frontend avanzadas
A partir de este punto vamos a ver cómo podemos usar Redux en aplicaciones frontend modernas, donde trabajaremos con librerías que nos permiten una gestión sencilla de las vistas y los procesos reactivos. Veremos cómo usar Redux en aplicaciones basadas en componentes nativos "web components" con Lit. Además trabajaremos mucho con aspectos como la organización del código, acciones asíncronas y el uso de APIs REST. Al final de este bloque tendremos una aplicación capaz de gestionar el login, registro, verificación de usuarios y autorización de rutas y componentes. Todo ello con acciones Redux, definidas en un Javascript que podrás aplicar a cualquier tipo de marco de trabajo (framework o librería) Javascript existente.
Realización de un proyecto de App avanzada basada en componentes, usando con Redux y Redux Toolkit para tener nuestra store global, acciones, etc:
- Acceso al store
- Invocación de acciones desde componentes
- Suscripción a los cambios en el store
- Mensajes de feedback
- Acciones asíncronas
- Mensajes de carga
En este vídeo vamos a conocer otra de las utilidades que nos ofrece Redux Toolkit llamada createAsyncThunk que nos permite definir los comportamientos asíncronos de una manera más estructurada, definiendo además de manera común ciertos tratamientos como por ejemplo los estados de carga o los estados de error. Con ello ganaremos un poco de mejoras en el código de los Thunks de Redux.
En este vídeo vamos a preparar los formularios de login y de registro de usuarios en la aplicación. No vamos a ver Redux, sino más ver cómo montar unos componentes de formularios que nos permitan operaciones esenciales de manera eficiente con el mínimo código posible.
En este vídeo vamos a ver el inicio del flujo de autenticación de usuarios en aplicaciones con la gestión del estado basado en Redux. Comenzaremos echando un vistazo al API REST que vamos a usar para autenticación y los mecanismos que ofrece, las cabeceras que necesita, etc. Luego abordaremos el flujo de registro de usuarios con las acciones asíncronas y la configuración de Axios. Realizaremos también la gestión de errores de validación de una manera eficiente y con una rica experiencia de usuario.
Ampliamos el userSlice para aportar funcionalidades de login de usuarios hasta la obtención y almacenamiento del token de autenticación JWT.
Ahora vamos a dar a nuestra aplicación funcionalidades de verificación de usuarios. Es decir, dado un token que hemos recibido en el proceso de autenticación, lo validaremos contra el servicio web para la obtención de los datos completos del usuario. Además de obtener los datos del usuario para personalizar la aplicación este proceso nos servirá también para saber si el token que tenemos es válido y de ese modo verificaremos si la aplicación debe mostrar el estado de usuario autenticado.
Veremos cómo podemos gestionar los distintos estados de la aplicación para conseguir que ciertas partes solo se muestren cuando estamos logueados o se muestren solamente cuando no hemos iniciado la sesión. Veremos además cómo implementar el proceso de logout y gestionar las modificaciones del estado de Redux con nuevas acciones asíncronas.
Cómo usar el local storage para conseguir que la página permanezca con el usuario autenticado aunque se recargue la página. Para ello usaremos el localstorage del navegador. Además veremos algunas mejoras en la experiencia de usuario con componentes que deben presentarse solo ante ciertos estados de la aplicación.
En este vídeo vamos a hacer dos componentes que puedes usar para habilitar ciertas áreas de la aplicación, de modo que solamente se muestren cuando el usuario está autenticado o al contrario, cuando el usuario no esté autenticado. Son componentes que puedes usar para proteger ciertas rutas de tu aplicación de una manera sencilla, que se apoyan en el state de Redux para mostrar u ocultar áreas en función del estado del usuario.
Usando Redux en aplicaciones React
En este último bloque del curso veremos cómo usar Redux en aplicaciones desarrolladas con React. Veremos cómo podemos usar los mismos códigos de Redux de las clases anteriores (actions, thunks, store...), sin tocar una sola línea de código!, en el marco de una aplicación de React. Con ello conseguiremos obtener una aplicación que gestiona todo el proceso de login, registro y autorización de usuarios en React usando Redux y Redux Toolkit.
En este vídeo vamos a comentar algunos objetivos de los siguientes vídeos dedicados a React. Básicamente avisar que no es un curso de React y lo que nos interesa es demostrar cómo se usa Redux en esta librería y en qué otro curso podréis encontrar explicaciones más detalladas de los procesos esenciales de Redux en React.
Vamos a ver que es posible aplicar todas las funcionalidades de Redux que hemos desarrollado en vídeos anteriores en una aplicación de React sin necesidad de cambiar una sola línea de código. Esto quiere decir que podemos dotar a las aplicaciones con login y registro de usuarios, incluido la verificación y el logout, por medio de las actions y el store de Redux que habíamos usado en la aplicación Lit.
Ahora vamos a ver que también podemos aplicar los componentes Lit que habíamos desarrollado en las clases anteriores, que se apoyaban en el state de Redux, dentro de nuestra aplicación React, de manera inmediata, lo que nos permitirá reutilizar el código y los progresos de clases anteriores, manteniendo una buena experiencia de usuario también en las aplicaciones de React sin más esfuerzos.
Valoraciones
Enrique Gálvez
Espectacular! como otros cursos de Miguel. No deja pasar ni un detalle y hace que resulte sencillo de entender.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.