Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

REDUX en Angular con NGRX - 2022

Name: REDUX en Angular con NGRX - 2022
Rating: 4.8 (3302 reviews)

Aprendamos el patrón Redux y apliquémoslo creando aplicaciones con ngrx, store, devtools, effects, firebase y mucho más

Highest Rated

Created byFernando Herrera

Last updated 1/2026

Spanish

What you'll learn

Implementar el patrón Redux exitosamente en aplicaciones de Angular
Conocer cómo funciona Redux desde absoluto cero hasta aplicarlo en la vida real
Dominar la librería de NGRX y Herramientas que ofrece el paquete
Crear aplicaciones basadas en cambios de estado
Tener experiencia con Firebase, AngularFire2, FirebaseHosting, FireStore
Realizar despliegues de aplicaciones de Angular en servidores de producción
Expandir tus conocimientos de Angular

Course content

15 sections • 164 lectures • 12h 24m total length

Curso Legacy2:16
Introducción1:47
¿Cómo funcionará el curso?4:32
Una breve introducción de como funcionará el curso y como poder sacarle el mayor provecho al mismo
¿Cómo hacer preguntas?3:23
Esto es obvio pero nos ayudará a manejar mejor las preguntas
Instalaciones necesarias6:17
Una lista de instalaciones que son recomendadas para poder seguir el curso sin problemas
Opcional Git2:00
Con git podremos darle un seguimiento y backups a nuestros proyectos para tener respaldos en línea y un control de versiones
Nota de Actualización - ¡Importante!3:45
¡Únete a Nuestra Comunidad de DevTalles en Discord!0:18

Introducción a la sección2:20
Una breve introducción al tema de la sección
Temas puntuales de la sección0:15
Un resumen puntual de la sección
¿Qué es REDUX?7:49
Una introducción al tema que nos ayudara a comprender mejor para qué sirve y que beneficios podemos tener de él
Action - Reducer - State - Store4:38
Estos con son los conceptos principales que conforman el Redux
Teoría adicional sobre Redux1:19
Aquí les dejo una documentación adicional si quieren seguir leyendo sobre la teoría del Redux
Enlaces útiles0:10
Aquí les dejo los enlaces para que puedan ir a la documentación Oficial de Redux

Introducción a la sección2:13
Una breve exposición de los temas que vienen a continuación
¿Qué aprenderemos en esta sección?0:12
Una lista puntual de todos los temas que veremos a continuación
Inicio del proyecto - Redux básico6:01
Aquí empezaremos nuestro camino en el Redux desde absoluto cero
Acciones y Reducer básico6:54
Aquí aprenderemos a implementar un Reducer básico, junto a nuestra primera acción
Configurar más acciones en nuestro reducer9:16
Aquí crearemos más acciones que puede procesar nuestro reducer
Organizando el proyecto8:02
Esto es algo que veremos mucho más adelante
Store10:50
Mantener el estado entre acciones
Suscribirse a los cambios del State5:48
Todo cambio del state puede emitirnos información a la cual nos podemos suscribir
Código fuente de la sección0:09
Pueden descargar todo mi código fuente de la sección

Introducción a la sección2:08
Una descripción de lo que veremos en esta sección
Temas puntuales de la sección0:26
Una descripción puntual de lo que veremos a continuación
Nota de Actualización - ¡Importante!0:10
Inicio de proyecto - Aplicación pura de Angular3:53
Aquí iniciaremos un proyecto de angular para demostrar rápidamente el poder que tiene el patrón redux
Nota de actualización0:15
Nota, pequeño detalle
Creación de componentes adicionales9:38
Aquí crearemos un par de componentes para crear una demostración básica
Integrar el componente nieto en nuestra aplicación5:44
En esta clase colocaremos el componente nieto que también puede realizar cambios al contador
Implementar NGRX en nuestro proyecto14:43
Aquí comenzaremos a implementar NGRX en nuestro proyecto del contador
URL del plugin de Redux DevTools0:09
Aquí tienen el URL dónde pueden encontrar el plugin para Google Chrome
Store DevTools8:47
Herramientas que nos ayudarán a ver y controlar el estado de nuestra aplicación
Escuchar cambios específicos de un elemento del State2:42
Aquí aprenderemos a escuchar únicamente un elemento del State y no todos los cambios
Create Reducer6:26
Aquí utilizaremos la función createReducer propia de NgRx
Store en el componente hijo5:01
Aquí trabajaremos integrando el state en nuestro componente hijo
Creando acción de multiplicar y dividir8:08
Aquí crearemos una acción que se encargue de multiplicar el valor del contador por el número que queramos
Acción Reset del nieto5:46
Es momento de implementar la última acción de la aplicación y es la de hacer un reset
Código fuente de la sección0:05
Aquí les dejo el código fuente de la sección por si acaso lo necesitan

Introducción a la sección1:27
Un resumen de lo que veremos a continuación
Temas puntuales de la sección0:19
Un resumen puntual de los temas que aquí veremos
Material para esta sección0:13
Para este ejercicio necesito que descarguemos el siguiente código del repositorio que les menciono
Inicio del proyecto - TodoApp4:41
Aquí comenzaremos a prepara el ejercicio para hacerlo funcionar un poco más adelante
Creando los componentes para nuestra aplicación de tareas5:56
Segmentar el template en múltiples componentes9:32
Tomaremos el HTML y lo segmentaremos en los componentes respectivos
Instalar NgRx, modelo, acciones y reducer de Todos9:00
En esta clase hay mucho que hacer, pero vamos a comenzar
Definiendo el AppState de nuestra aplicación3:51
Aquí definiremos el estado global de nuestra aplicación
Agregar un TODO7:44
Desplegar nuestra lista de TODOS3:44
Leeremos el Store para desplegar la lista de todos los todos que tenemos aquí
Controlar los TODO-Items11:16
Aquí es donde hay mucha cosa que hacer, pero vamos a comenzar aquí
Toggle Action - Completar o desmarcar un TODO11:46
Aquí haremos el procedimiento para marcar como completado un TODO
Editar una tarea por hacer5:39
Aquí editaremos una tarea, mandando una acción a nuestro reducer
Borrar una tarea de la lista3:37
Aquí vamos a borrar una tarea de la lista
Toggle All - Marcar o Desmarcar Todos7:15
Un pequeño extra, aquí vamos a hacer que este botón funcione
Creando un segundo reducer - Filtro7:03
Aquí implementaremos un segundo reducer encargado de manejar el filtro de la aplicación
Combinando 2 o más reducers en el AppState4:46
Aquí aprenderemos un concepto importante para el manejo del AppState de nuestra aplicación
Cambiar el filtro - únicamente el string8:14
Aquí únicamente vamos a cambiar el state del filtro
Conteo de tareas pendientes3:34
Aquí contaremos todas las tareas pendientes en el estado
Aplicar el filtro visualmente7:10
Aquí aplicaremos el filtro para que la información se muestre como lo deseamos
Borrar todos los TODO completados4:43
Aquí crearemos nuestra última acción de esta aplicación
Desplegar nuestra aplicación en GitHub Pages10:32
Aquí vamos a desplegar nuestra aplicación en la web
Código fuente de la sección0:05
Código fuente

Introducción a la sección1:49
Un breve resumen de lo que a continuación veremos
Temas puntuales de la sección0:21
Una lista detallada de las cosas que veremos a continuación
Material de la sección0:26
Descargas y materiales que usaremos durante la sección
Inicio del proyecto - IngresoEgresoApp6:41
Estilos de la aplicación0:26
Por favor, copien y peguen este código para prevenir errores de estilos
Diseño de nuestra aplicación10:27
Aquí comenzaremos a ver cambios visuales en nuestra aplicación
Creando las rutas de nuestra aplicación7:13
Aquí definiremos nuestras rutas principales
Configurando rutas hijas de nuestra aplicación5:33
Aquí crearemos las rutas hijas para nuestra aplicación
Diseño de las rutas hijas3:33
Aquí trabajaremos haciendo un pequeño diseño para mostrar información en nuestras rutas hijas
Realizando un backup de nuestra aplicación6:35
Hemos configurado muchas cosas, y sería una pena perderlo por cualquier tipo de descuido, por lo que haremos un backup a GitHub
Código fuente de la sección0:21
Aquí pueden descargar el código fuente de la sección por si lo llegan a necesitar

Introducción a la sección1:23
Breve introducción a la sección
Temas puntuales de la sección0:15
Resumen puntual de los temas que veremos en el curso
Pantalla de registro8:50
Aquí prepararemos nuestra pantalla de registro de usuarios
Preparar nuestra base de datos3:31
Aquí prepararemos nuestra base de datos para el manejo de usuarios y su información
AngularFire - Comunicar nuestra aplicación de Angular con Firebase7:32
Crear nuestro primer usuario9:17
Usando métodos de AngularFireAuth, crearemos nuestro primer usuario
Login de nuestra aplicación6:52
Aquí crearemos la funcionalidad del login
SweetAlert 2 para los errores7:10
Aquí vamos a mostrar retro alimentación al usuario, en caso de que las credenciales fallen
Logout - Cerrar sesión del usuario3:12
Cerrar la sesión del usuario tanto en Firebase como en nuestra aplicación
Obtener información del usuario activo en Firebase4:12
Aquí aprenderemos a obtener la información del usuario activo en Firebase
Guard - Proteger el dashboard y sus rutas hijas7:38
Aquí protegeremos el dashboard, para que únicamente usuario que están autenticados puedan entrar.
Crear documento de base de datos por cada usuario10:20
Aprenderemos a crear un documento en Firebase para almacenar toda la información que un usuario realice en nuestra aplicación
Realizar backup a GitHub - Sección 72:21
Es momento de hacer un respaldo a GitHub para no perder nuestro trabajo
Código fuente de la sección0:14
Código fuente de la sección

Introducción a la sección2:00
Un breve resumen puntual de lo que veremos a continuación
Temas puntuales de la sección0:11
Resumen puntual de los temas de la clase
Mis Snippets de NgRx0:10
Interacciones de usuario - UI State5:06
Aquí empezaremos a utilizar el patrón redux para trabajar la parte de la interfaz de usuario
Estado global de la aplicación - ActionReducerMap4:55
Aquí comenzaremos a definir el estado completo de la aplicación
Dispatch - Activar y Desactivar loading12:44
Activando y desactivando el loading cuando estamos ingresando o creando usuarios
Utilizar el store - isLoading3:20
Auth Actions y Reducer11:03
Aquí vamos a trabajar con las acciones que puede tener nuestro módulo de autenticación
Almacenar en el Store el usuario de Firebase9:32
Aquí almacenaremos en el store, cualquier cambio que suceda con el documento del usuario de Firebase
Backup de la aplicación - Sección 82:22
Es momento de realizar otro backup para tener resguardada nuestra aplicación
Código fuente de la sección0:05

Introducción a la sección1:40
Un breve resumen de lo que veremos a continuación
Temas puntuales de la sección0:15
Un resumen puntual de lo que veremos a continuación
Modelo de un ingreso y egreso3:15
Empezaremos creando el modelo de lo que necesitamos para manejar los ingresos y egresos
Pantalla para capturar ingresos y egresos6:48
Aquí trabajaremos con la pantalla de captura de información
Servicio Ingreso-Egreso12:50
Todas las interacciones con la base de datos, deben de estar centralizadas en un servicio especializado en los ingresos y egresos
Optimizaciones de loading8:07
Realizaremos un par de optimizaciones para no dejar basura en nuestra base de datos
Ingreso y Egreso - Acciones y Reducer6:27
Es momento de crear las acciones de nuestro ingreso y egreso junto con su respectivo reducer
Cargar items desde Firebase8:03
Aquí aprenderemos a obtener todos los elementos que se encuentran en nuestra base de datos de ingreso y egreso de la persona
Obtener el UID de nuestros elementos de Firebase8:40
Aquí obtendremos el UID de los elementos de Firebase
Dispatch de las acciones para cargar items5:48
Mostrar todos los elementos de ingreso y egreso10:15
Eliminar items de firebase4:57
Aquí aprenderemos a borrar items de firebase
Ordenar items - Pipe3:14
Aquí crearemos un pipe para ordenar los elementos
Dashboard - Estadística básica8:54
Aquí mostraremos la estadística básica de los ingresos y egresos que la persona tiene
Chart.js - Gráficas para Angular - URL0:11
Sitio web del proyecto sobre Gráficas de Angular
Chart.js - Gráficas para Angular7:36
Aquí crearemos una gráfica dinámica para nuestra aplicación
Colocar el nombre del usuario activo6:37
Algo que dejamos hasta el final (no se por qué), pero aquí cambiaremos el nombre del usuario
Realizar un backup a GitHub - Sección 92:47
Es momento de respaldar los cambios a GitHub
Código fuente de la sección0:09

Introducción a la sección1:33
Una breve descripción de la sección
Temas puntuales de la sección0:18
Resumen puntual de la sección
Módulo Auth7:26
Trabajaremos optimizando y simplificando nuestro NgModule con un AuthModule
Módulo Share4:49
Trabajaremos optimizando nuestro módulo share
Módulo Ingreso-Egreso6:17
Aquí crearemos nuestro módulo para controlar todo lo que viene después del login
Dashboard Routing Module4:31
Módulo de rutas para el dashboard
LazyLoad del módulo de ingreso y egreso3:39
Aquí terminaremos de implementar el lazy load de nuestra aplicación
CanLoad4:44
Implementaremos el Guard para prevenir que puedan cargar el módulo si el usuario no está autenticado
LazyLoad Store6:01
Aquí aprenderemos a cargar únicamente lo que necesitamos en el Store y reducers
Backup de la aplicación - Sección 101:50
Es momento de hacer un respaldo de la aplicación como se encuentra en este momento
Código fuente de la sección0:04
Código fuente de la sección0:10
Pueden descargar el código fuente tal cual se encuentra en este momento

Requirements

Es necesario conocimiento de Angular (Al menos a nivel de componentes y servicios)
Es necesario conocimiento básico de TypeScript - Interfaces y Clases
No es necesario saber sobre REDUX o NGRX en lo absoluto
Es recomendable estar familiarizados con la generación de componentes mediante AngularCLI

Description

Nota Legacy:

Después de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso.

Sin embargo, queremos que sigas aprendiendo con confianza. Por eso, te invitamos a unirte a nuestra comunidad en Discord, donde podrás conectar con otros estudiantes, compartir conocimientos y recibir apoyo de nuestra comunidad.

¡Gracias por tu comprensión y por ser parte de nuestra comunidad de aprendizaje!

Bienvenido a este curso de REDUX con NgRx

Este curso esta enfocado en implementar correctamente el patrón REDUX en aplicaciones de Angular utilizando los paquetes que el ngrx nos ofrece como son:

Store
DevTools
Effects

El patrón Redux nos ayuda a manejar la data que nuestra aplicación controla, es especialmente útil cuando el proyecto es de nivel medio a gran escala, donde hay muchos servicios, componentes y en general, muchos lugares donde se emite o cambia la información de nuestra aplicación. Determinar quien o qué cambió la información, puede ser un dolor de cabeza... pero no con Redux.

Cuando manejar la información de nuestra aplicación es vital, el patrón redux es indispensable ya que nos permite trabajar anticipándonos a los cambios de la data, centralizando la información en un único lugar llamado Store (o la única fuente de la verdad) que contiene todo lo que necesitamos para renderizar o procesar correctamente nuestra información.

De esta manera, siempre sabrás que acción modifico que cosa y tendrás un control perfecto de cualquier modificación que tu aplicación realice a la data.

En este curso tocaremos temas como:

Redux
NgRx
- ngrx/store
- ngrx/devTools
- ngrx/effects
Firebase
AngularFire2
Firebase Deploy
Firebase Hosting
Consumo de RestServices
ReqRes - Backend
Control de estados
Bootstrap
Git
GitHub
Y otros temas más…

Mi objetivo con este curso aparte de que aprendas a implementar y utilizar el patrón redux desde absoluto cero, es que conozcas otras tecnológicas y estructuras para la creación de aplicaciones de Angular de mediana a gran escala.

Recuerda que este curso cuenta con la garantía de satisfacción de 30 días de Udemy, así que no tienes nada que perder, pero si mucho que aprender en este curso que he hecho con mucho esfuerzo para que puedas aprender Redux y NGRX de una forma sistemática, fácil y divertida!

Nos vemos dentro del curso!

Who this course is for:

Personas que deseen aprender el patrón REDUX
Mejorar el manejo y flujo de la información
Personas familiarizadas con Angular que deseen centralizar la información
Programadores que quieran un código más limpio en su aplicación
Si tu aplicación maneja mucha información en su flujo, este curso debes de tomarlo

REDUX en Angular con NGRX - 2022

What you'll learn

Explore related topics

Course content

Introducción8 lectures • 24min

Introducción a Redux6 lectures • 17min

Implementar REDUX desde absoluto cero9 lectures • 49min

NGRX - Redux con Angular16 lectures • 1hr 14min

Todo App - Aplicación con un estado un poco más complejo23 lectures • 2hr 12min

Aplicación de Ingresos y Egresos - Estilo y funcionalidades básicas11 lectures • 43min

Autenticación de nuestra aplicación login y registro14 lectures • 1hr 13min

Redux en nuestra aplicación de ingreso y egreso - Fin de la autenticación11 lectures • 51min

Módulo de Ingresos y Egresos19 lectures • 1hr 47min

NGRX con Lazyload12 lectures • 41min

Requirements

Description

Who this course is for: