REDUX en Angular con NGRX: Desde las bases hasta la práctica

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

4.78 (3030 reviews)
Udemy
platform
Español
language
Web Development
category
9,099
students
12.5 hours
content
Nov 2023
last update
$199.99
regular price

What you will 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

Description

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!

Content

Introducción

Introducción
¿Cómo funcionará el curso?
¿Cómo hacer preguntas?
Instalaciones necesarias
Opcional Git

Introducción a Redux

Introducción a la sección
Temas puntuales de la sección
¿Qué es REDUX?
Action - Reducer - State - Store
Teoría adicional sobre Redux
Enlaces útiles

Implementar REDUX desde absoluto cero

Introducción a la sección
¿Qué aprenderemos en esta sección?
Inicio del proyecto - Redux básico
Acciones y Reducer básico
Configurar más acciones en nuestro reducer
Organizando el proyecto
Store
Suscribirse a los cambios del State
Código fuente de la sección

NGRX - Redux con Angular

Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Aplicación pura de Angular
Nota de actualización
Creación de componentes adicionales
Integrar el componente nieto en nuestra aplicación
* Actualización: Ubicación de la instalación de ngrx/store
Implementar NGRX en nuestro proyecto
* Action Creator - Creador de acciones
* Actualización: Ubicación de las DevTools de NGRX
URL del plugin de Redux DevTools
Store DevTools
Escuchar cambios específicos de un elemento del State
Store en el componente hijo
Creando acción de multiplicar y dividir
Acción Reset del nieto
* Optimizaciones a nuestra aplicación
* Código fuente de la sección

Todo App - Aplicación con un estado un poco más complejo

Introducción a la sección
Temas puntuales de la sección
Material para esta sección
Inicio del proyecto - TodoApp
Creando los componentes para nuestra aplicación de tareas
Segmentar el template en múltiples componentes
Instalar NgRx, modelo, acciones y reducer de Todos
Definiendo el AppState de nuestra aplicación
Agregar un TODO
Desplegar nuestra lista de TODOS
Controlar los TODO-Items
Toggle Action - Completar o desmarcar un TODO
Editar una tarea por hacer
Borrar una tarea de la lista
Toggle All - Marcar o Desmarcar Todos
Creando un segundo reducer - Filtro
Combinando 2 o más reducers en el AppState
Cambiar el filtro - únicamente el string
Conteo de tareas pendientes
Aplicar el filtro visualmente
Borrar todos los TODO completados
Desplegar nuestra aplicación en GitHub Pages
* Código fuente de la sección

Aplicación de Ingresos y Egresos - Estilo y funcionalidades básicas

Introducción a la sección
Temas puntuales de la sección
Material de la sección
Inicio del proyecto - IngresoEgresoApp
Estilos de la aplicación
Diseño de nuestra aplicación
Creando las rutas de nuestra aplicación
Configurando rutas hijas de nuestra aplicación
Diseño de las rutas hijas
Realizando un backup de nuestra aplicación
Código fuente de la sección

Autenticación de nuestra aplicación login y registro

Introducción a la sección
Temas puntuales de la sección
Pantalla de registro
Preparar nuestra base de datos
* Nota de actualización
AngularFire - Comunicar nuestra aplicación de Angular con Firebase
Crear nuestro primer usuario
Login de nuestra aplicación
SweetAlert 2 para los errores
Logout - Cerrar sesión del usuario
Obtener información del usuario activo en Firebase
Guard - Proteger el dashboard y sus rutas hijas
Crear documento de base de datos por cada usuario
Realizar backup a GitHub - Sección 7
* Código fuente de la sección

Redux en nuestra aplicación de ingreso y egreso - Fin de la autenticación

Introducción a la sección
Temas puntuales de la sección
Interacciones de usuario - UI State
Estado global de la aplicación - ActionReducerMap
Dispatch - Activar y Desactivar loading
Auth Actions y Reducer
Almacenar en el Store el usuario de Firebase
Backup de la aplicación - Sección 8
Código fuente de la sección

Módulo de Ingresos y Egresos

Introducción a la sección
Temas puntuales de la sección
Modelo de un ingreso y egreso
Pantalla para capturar ingresos y egresos
Servicio Ingreso-Egreso
Optimizaciones de loading y no grabar el UID del item
Ingreso y Egreso - Acciones y Reducer
Cargar items desde Firebase
Obtener el UID de nuestros elementos de Firebase
Mostrar todos los elementos de ingreso y egreso
Eliminar items de firebase
Ordenar items - Pipe
Dashboard - Estadística básica
Chart.js - Gráficas para Angular - URL
Chart.js - Gráficas para Angular
Colocar el nombre del usuario activo
Vaciar información al cerrar sesión
Realizar un backup a GitHub - Sección 9
Código fuente de la seccíon

NGRX con Lazyload

Introducción a la sección
Temas puntuales de la sección
Módulo Auth
Módulo Share
Módulo Ingreso-Egreso
Dashboard Routing Module
LazyLoad del módulo de ingreso y egreso
CanLoad
LazyLoad Store
Backup de la aplicación - Sección 10
Código fuente de la sección

Sección bonus - Desplegar aplicación en Firebase Hosting

Introducción a la sección
Temas puntuales de la sección
Desplegando la aplicación en Firebase Hosting
Documentaciones útiles

Diseño de nuestra aplicación - EffectsApp - ngrx/effects

Introducción a la sección
Temas puntuales de la sección
Inicio del proyecto - http-effects
Módulos y componentes de nuestra aplicación
Rutas de nuestra aplicación
Backend Demo
Reqres y Postman
Modelo de usuario
Usuario Service
HTML del lista.component
Realizar un backup a GitHub de nuestro proyecto - sección 12
Código fuente de la sección

Efectos - ngrx/effects

Introducción a la sección
Temas puntuales de la sección
Acciones de Usuarios
Reducer de Usuarios
AppReducer, StoreModule y DevTools
Introducción - ¿Qué son los efectos?
Effects de Usuarios
Effects de Usuarios - Parte 2
Manejo de errores en los effects
Mostrar la información en pantalla
Usuario Actions, Reducer y State
Usuario Effects
Mostrar la información del usuario
Backup de la aplicación - Sección 13
Código fuente de la sección

Bonus - Desplegar a GitHub Pages

Introducción a la sección
Desplegar a GitHub Pages

Despedida del curso

Más sobre mis cursos
Despedida del curso

Screenshots

REDUX en Angular con NGRX: Desde las bases hasta la práctica - Screenshot_01REDUX en Angular con NGRX: Desde las bases hasta la práctica - Screenshot_02REDUX en Angular con NGRX: Desde las bases hasta la práctica - Screenshot_03REDUX en Angular con NGRX: Desde las bases hasta la práctica - Screenshot_04

Reviews

Oscar
November 6, 2023
Excelente profesor, nunca deja conceptos al aire, pese a que no es un curso desde 0, siempre que menciona algún concepto lo explica en breve mientras escribe el código, siempre demuestra dominar el tema
Armando
November 1, 2023
Hago este comentario habiendo tomado el curso con la versión 16 de Angular y la versión 16 de NgRx. El curso explica de manera exitosa el patrón redux, me gusto la sección de la implementación de redux desde cero. Por el lado de la implementación de NgRx en Angular el curso está ligeramente desactualizado, pero no hay mayor inconveniente si se sigue la documentación de NgRx. Si eres incapaz de implementar los ejemplos del curso siguiendo la documentación oficial deberías considerar cambiar de profesión. Las partes implementación de Firestore también están desactualizadas, pero en la sección de preguntas de dichas secciones, otros alumnos del curso dan la implementación actualizada y yo no tuve ningún inconveniente siguiendo esas implementaciones. Me hubiera gustado que el curso cubriera un poco más a fondo los "effects" y una sección del "routerReducer", pero en general tengo ahora un claro entendimiento de como implementar el patrón de redux en Angular.
Lionel
May 13, 2023
Excelente curso para entender el patrón Redux y el manejo de NgRx!...como todos los cursos que he tomado de Fernando, excelente!
Maycol
May 6, 2023
La explicación es excelente y Fernando un profesor muy agradable ya me siento preparado para implementarlo en los proyectos en los que estoy trabajando.
Mariela
May 5, 2023
Me encanto el curso, es cierto que se encuentra algo desactualizado en la parte de Firebase, pero me sirvió mucho para entender como funciona el patrón REDUX. Muchas gracias al instructor Fernando Herrera.
Juan
April 27, 2023
El profesor abarca los temas propuestos y se entiende muy bien además de eso explica mas temas importantes en el ciclo del desarrollo 10 de 10
Rocio
April 26, 2023
explicaciones muy claras. Genial que empiece construyendo la libreria desde cero para ver como funciona.
John
April 19, 2023
Excelente curso, como siempre el profe Fernando con explicaciones sencillas de entender y buenos ejercicios prácticos...
Juan
April 12, 2023
El curso esta genial, muy bien explicado e interactivo y me ha ayudado mucho. Lo único que hecho en falta es la parte de NGRX Entity, NGRX Data y los schematics que creo son importantes para llegar a un nivel total de NGRX.
Mario
April 10, 2023
exente curso completo hay cosas que si ya están un poco viejas pero si se pueden resolver un gusto tomar otro curso con uno de mis maestros preferidos un saludo
Andrés
April 4, 2023
El curso tiene muchisimo relleno y si bien la intencion es buena, se hubiera podido aprovechar mejor este tiempo para ahondar mas en lo que NGRX puede ofrecer y no quedarnos con lo mas basico.
Nicolas
April 4, 2023
El curso esta desactualizado, y los alumnos estan ayudandose entre si pero no hay una explicacion de por que hacen lo que hacen...
Ives
March 23, 2023
El curso esta desactualizado, hace falta ver mas conceptos de ngrx como ngrx/data, ngrx/entity, etc.. El instructor se desvía mucho del tema
Alberto
March 21, 2023
Otro fantástico curso de Fernando Herrera. Lástima que por tantas actualizaciones de Angular ciertos contenidos no se correspondan con la actual versión, pero teniendo eso en cuenta y viendo como se hace ahora esos casos concretos, merece mucho la pena.
Aleix
March 20, 2023
Muy bueno, el único problema es que hay cosas actualizadas y encontrar algún error me ha resultado algo costoso. Por lo demás, el curso MUY BUENO

Coupons

DateDiscountStatus
3/30/202194% OFF
expired
10/9/202284% OFF
expired

Charts

Price

REDUX en Angular con NGRX: Desde las bases hasta la práctica - Price chart

Rating

REDUX en Angular con NGRX: Desde las bases hasta la práctica - Ratings chart

Enrollment distribution

REDUX en Angular con NGRX: Desde las bases hasta la práctica - Distribution chart
1735276
udemy ID
6/7/2018
course created date
11/6/2019
course indexed date
Bot
course submited by