Curso práctico de Redux y Redux Toolkit

Gestión global de datos, sencilla y comprensible con Redux y Redux Toolkit
En marcha
Avanzado
17 Clases 14 h (aprox.)
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.

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

El Curso de Redux ofrece una formación actualizada para todos los desarrolladores que pretenden esta biblioteca para la gestión global del estado. Este curso aborda el desarrollo bajo la herramienta oficial Redux Toolkit, que permite simplificar el proceso de desarrollo de manera notable.

Es un curso ideal para quien no conoce Redux, así como para desarrolladores que ya tienen alguna experiencia con la biblioteca y quieren actualizar sus conocimientos para incorporar las novedades propuestas por Redux Toolkit, de modo que puedan simplificar sus proyectos.

Por qué debes aprender Redux

Toda aplicación necesita gestionar un estado. Por ejemplo, si un usuario está correctamente autenticado, si pertenece a un grupo de administradores, las notificaciones que ese usuario ha recibido, etc. A la hora de gestionar el estado puedes usar muchas técnicas, más o menos complejas. Con Redux implementarás un patrón de funcionamiento para la propagación del estado llamado "Flux", que es unidireccional y tiene como objetivo simplificar el acceso al estado y reducir la complejidad del tránsito de la información entre los componentes.

También necesitas proveer mecanismos para que las distintas piezas de software de una aplicación, generalmente sus componentes, puedan manipular el estado al ejecutar sus funcionalidades, así como suscribirse a los cambios de estado que puedan producirse a lo largo del uso de la aplicación.

Redux es la biblioteca de gestión del estado más extendida. La puedes usar para cualquier tipo de proyecto Javascript, ofreciendo una base de patrones que facilitarán el desarrollo de los proyectos y la escalabilidad, en aplicaciones pequeñas o grandes. En este curso podrás aprender además las últimas novedades de Redux introducidas por la librería Redux Toolkit, que permiten un desarrollo mucho más ágil, facilitando la vida a los programadores y maximizando su productividad.

Implementar Redux puede parecer al principio complejo, pero una vez definidos los mecanismos de manipulación del estado, es muy sencillo reutilizarlos a lo largo de cualquier componente de aplicación y acceder a valores siempre frescos de los datos manejados en el contenedor de estado.

En el pasado se criticaba a Redux por su complejidad pero en este curso veremos las novedades de Redux, que reducen significativamente la cantidad de código "boilerplate" necesario para comenzar a trabajar, para implementar acciones, o sus reducers. Gracias a Redux Toolkit se ha simplificado bastante el uso de la librería y la cantidad de errores potenciales que pueden introducirse en el código de Redux.

Usar Redux no implica que todo el estado de la aplicación deba implementarse mediante ese mismo mecanismo, sino que es posible usar esta librería para gestionar las partes del estado donde realmente se requiere el acceso global, centrando nuestro esfuerzo en aplicar Redux donde realmente exista una ventajas significativa en su uso.

A lo largo del curso veremos ejemplos prácticos de uso de Redux y Redux Tookit y cómo usar Redux para tareas más complejas y habituales de las aplicaciones, como la gestión del estado de autenticación del usuario.

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.

Redux y Redux Toolkit Gratis
  • 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.

Componentes principales de Redux
  • Store
  • Actions
  • Reducers
Aplicar Redux en una aplicación to-do list con Redux Toolkit

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.
Usando Redux y Redux Toolkit (2)

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
Operaciones asíncronas en Redux

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.

Redux en aplicaciones basadas en componentes

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
Implementar comportamientos asíncronos con createAsyncThunk

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.

Formularios eficientes en Web Components

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.

Registro de usuarios basado en Redux

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.

Login de usuarios

Ampliamos el userSlice para aportar funcionalidades de login de usuarios hasta la obtención y almacenamiento del token de autenticación JWT.

Verificación de los usuarios

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.

Gestionar estados de aplicación y logout

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.

Mantener la sesión activa ante recargas vía local storage

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.

Componentes de verificación de usuarios

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.

Objetivos y referencias para Redux en React

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.

Cómo aplicar el proceso de autenticación de usuarios con Redux a 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.

Cómo aplicar web components para feedback y login basados en Redux

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.

Suscríbete