CursosEmpresasBlogLiveConfPrecios

¿Qué es Redux? Profundizando en la herramienta

Clase 10 de 29 • Curso de React Router 5 y Redux

Contenido del curso

Bienvenida al curso

  • 1
    Todo lo que aprenderás sobre React Router y Redux

    Todo lo que aprenderás sobre React Router y Redux

    01:30 min

¿Qué es React Router? y Aplicarlo en tus proyectos

  • 2
    ¿Qué es React Router y cómo instalarlo?

    ¿Qué es React Router y cómo instalarlo?

    02:54 min
  • 3
    Crear nuestro archivo de Rutas

    Crear nuestro archivo de Rutas

    07:33 min
  • 4
    Container: Login

    Container: Login

    10:29 min
  • 5
    Container: Register

    Container: Register

    06:28 min
  • 6
    Container: 404 Not Found

    Container: 404 Not Found

    06:43 min
  • 7
    Componente: Layout

    Componente: Layout

    05:10 min
  • 8
    Manejando enlaces y configuraciones

    Manejando enlaces y configuraciones

    06:33 min

¿Qué es Redux?

  • 9
    Qué es Redux

    Qué es Redux

    02:17 min
  • 10
    ¿Qué es Redux? Profundizando en la herramienta

    ¿Qué es Redux? Profundizando en la herramienta

    Viendo ahora
  • 11
    Instalación de Redux

    Instalación de Redux

    04:40 min
  • 12
    Creando el Store de Redux

    Creando el Store de Redux

    12:53 min

Aplicando Redux a nuestra aplicación

  • 13
    Creando los reducers

    Creando los reducers

    10:40 min
  • 14
    Finalizando reducers y eliminar favoritos

    Finalizando reducers y eliminar favoritos

    08:26 min
  • 15
    Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

    Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

    04:19 min
  • 16
    Crear Formulario de Login

    Crear Formulario de Login

    10:08 min
  • 17
    Formulario de Login con Redux

    Formulario de Login con Redux

    06:28 min
  • 18
    Creando un Servicio para Gravatar

    Creando un Servicio para Gravatar

    05:28 min
  • 19
    Uso de gravatar en nuestro proyecto

    Uso de gravatar en nuestro proyecto

    07:16 min
  • 20
    Validación para LogIn LogOut

    Validación para LogIn LogOut

    09:15 min
  • 21
    Register

    Register

    07:00 min
  • 22
    Register con Redux

    Register con Redux

    04:17 min
  • 23
    Vista general del player

    Vista general del player

    05:26 min
  • 24
    Arreglando la funcionalidad del player

    Arreglando la funcionalidad del player

    06:55 min
  • 25
    Terminando de detallar nuestro player

    Terminando de detallar nuestro player

    13:50 min
  • 26
    Validaciones

    Validaciones

    10:35 min
  • 27
    Validaciones de UI

    Validaciones de UI

    07:04 min
  • 28
    Debug con Redux Devtools

    Debug con Redux Devtools

    05:57 min

Cierre del curso

  • 29
    Cierre del Proyecto

    Cierre del Proyecto

    00:39 min
Tomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      ¿Que es Redux?

      Redux nos permite tener un contenedor predecible del estado en aplicaciones creadas con JavaScript, Nos ayuda a escribir aplicaciones que se comportan de una manera consistente, Esto significa que podemos utilizar esta lógica en aplicaciones del lado del cliente, trabajar del lado del servidor o crear aplicaciones para dispositivos móviles.

      Uno de los principales uso que tiene Redux es con React pero puede ser implementado en cualquier librería o proyecto que este construido con JavaScript, lo cual incluye a Angular, Vue o algún otro framework o librería.

      Redux nace de la arquitectura Flux, tomando inspiración del lenguaje funcional Elm y es creado por Dan Abramov y Andrew Clark en el 2015, Hoy en día es una de las librerías más utilizadas para el manejo del flujo de la información en aplicaciones.

      Una de las principales motivaciones para crear Redux nace en resolver un problema y era el manejo del estado y el flujo de nuestras aplicaciones creadas en JavaScript. Redux propone una forma de manejar el estado donde podamos controlar cómo vamos a interactuar con otros elementos (llamadas a un API) o interacciones dentro de nuestra aplicación, teniendo en cuenta esto, Redux intenta de predecir las mutaciones que pueda sufrir el estado, creando restricciones de cuando y como pueden ser ejecutadas las actualizaciones en nuestras aplicaciones.

      Redux es una librería muy pequeña que se puede incorporar en cualquier proyecto construido en JavaScript y se basa en tres principios:

      Única fuente de la verdad:

      Nuestra aplicación solo debe de tener un único Store y es la única fuente de información.

      El estado es de solo lectura

      La única forma de modificar el estado es emitiendo un acción, este objeto describe lo que va a ocurrir.

      Los cambios se realizan con funciones puras

      Para realizar cambios al estado es necesario utilizar Reducers los cuales son funciones puras que toman el estado anterior, una acción y devuelve un nuevo estado con las modificaciones necesarias.

      Teniendo en cuenta esta información continuaremos en el curso explicando cada uno de estos elementos que incorpora Redux en nuestra aplicación Platzi Video.

      Comentarios

        Manuel Tapia

        Manuel Tapia

        student•
        hace 5 años

        Aquí les va la manera en que lo entendí en su momento. Si ya están familiarizados con React sabemos que cada componente tiene su State, y que lo podemos modificar con setState. Con Redux tenemos el Store, que podríamos verlo cómo un "State global" de la app, al cuál podemos acceder y modificar sin importar el componente donde estemos. Espero les sirva. Suerte.

          Henry Caicedo Velasco

          Henry Caicedo Velasco

          student•
          hace 5 años

          Me gusto tu definición. gracias.

          Mateo Echeverri Betancur

          Mateo Echeverri Betancur

          student•
          hace 5 años

          Excelente definición

        Platzi Team

        Platzi Team

        student•
        hace 6 años

        Alguien mas lo leyo con la voz del profesor ? Excelente lectura

          Bernardo Aguayo Ortega

          Bernardo Aguayo Ortega

          student•
          hace 6 años

          jajajaja x2

          Esteban Casallas

          Esteban Casallas

          student•
          hace 6 años

          jaja si, una maravilla

        Erick Cordova

        Erick Cordova

        student•
        hace 6 años

        la documentación oficial esta muy clara se las recomiendo ;)

          Miguel Angel Reyes Moreno

          Miguel Angel Reyes Moreno

          student•
          hace 5 años

          ¡Gracias! :D

        Andrés Muñoz

        Andrés Muñoz

        student•
        hace 6 años
        1. Nuestra aplicación solo debe de tener un único Store y es la única fuente de información. Osea que sí uso redux ya no debo de usar los estados propios de los componentes, solo este estado global Store ? Y es posible mezclar ?

        2. La única forma de modificar el estado es emitiendo un acción, si uso redux ya me tengo que olvidar del setState, esta segunda pregunta va relacionada a la anterior, es buena practica mezclar redux con la forma sin redux de manejar los estados, e visto aplicaciones que están así y pues ahi surge la duda, saludos.

          Michel Roberto Traña Tablada

          Michel Roberto Traña Tablada

          student•
          hace 6 años

          Recuerda que Redux es mas que solo el estado. De hecho hay casos en los que quizás sea mejor manejar estado en un componente. Cuando trabajes en tus proyectos hazte estas dos preguntas: ¿realmente necesito Redux? y ¿realmente es necesario tener estos datos en mi estado global?

          Como consejo, utiliza ContextAPI de ReactJS si lo único que necesitas es almacenar datos y que para usarlos en múltiples componentes no sea necesario tener un wrapper ni redundar el código.

          También te recomiendo leer este post de Platzi sobre Redux: https://platzi.com/blog/redux-no-esta-muerto/

          William Velázquez

          William Velázquez

          student•
          hace 6 años

          Es que Redux está enfocado como dicen a una única fuente de información, pero se refiere más como a información global (Es decir, datos que se ocuparán en diferentes lugares de tú aplicación), por lo que a mi parecer los Estados de un componente siguen siendo muy útiles cuando sólo ese componente o su hijo tienen la responsabilidad de esa información.

        John Alexander Agudelo Galeano

        John Alexander Agudelo Galeano

        student•
        hace 6 años

        Otra ventaja de redux es que facilita el debugger de la app, debido a que el storage mantiene el historial de cómo cambiaron los datos en el tiempo.

          César Palma

          César Palma

          student•
          hace 5 años

          ayuda a la trasabilidad de los cambios de estados, interesante, otro punto, que da sentido a su uso en apps grandes

        Diego Grueso

        Diego Grueso

        student•
        hace 5 años

        Les recomiendo tomar primero Redux por Bedu, ya que así podrán entender el curso mejor.

        Marvin Rafael Ancheta Cuéllar

        Marvin Rafael Ancheta Cuéllar

        student•
        hace 6 años

        ¿Y no hay algún resumen tipo diagrama de los que hace Majo? Ya me voy a animar a hacer uno yo entonces jejeje

          luis alejandro castañeda varon

          luis alejandro castañeda varon

          student•
          hace 6 años
          depronto esta
          Sebastian Duran

          Sebastian Duran

          student•
          hace 6 años

          Apoyo total!!

        Armando Rivera

        Armando Rivera

        student•
        hace 5 años

        Por qué el estado no se debe mutar?

          Luis Enrique Partida Vega

          Luis Enrique Partida Vega

          student•
          hace 5 años

          Creo que se refiere a que cambia el contenido pero no la estructura, pero no estoy muy seguro

          Carlos Eduardo Zambrano Baptista

          Carlos Eduardo Zambrano Baptista

          student•
          hace 5 años

          Resulta que en React.js los props se supone que sean inmutables, ya que React.js toma muchas cosas de Programación Funcional, pero es muy común que si usas un array o un objeto como valor de un prop quieras modificarle cosas antes de renderizar el componente, hacer esto modifica el valor original del prop, rompiendo la inmutabilidad, lo que puede causar problemas inesperados. Otra cosa es que arquitecturas como Flux o basadas en esta como Redux, las cuales también proponen trabajar con datos inmutables, en el caso de Redux es parte de como funciona el ser inmutables, así que acá también el usar coleccione Immutables te facilita mucho le trabajo y te hace menos propenso a errores.

        Alejandro González Reyes

        Alejandro González Reyes

        student•
        hace 7 años

        Espero enteder el uso de esta herramienta. Con Leónidas solo me revolvió.

          Oscar Barajas Tavares

          Oscar Barajas Tavares

          Team Platzi•
          hace 7 años

          Si tienes dudas, cuéntame y te ayudo a resolverlas.

        Karl Behrens Gil

        Karl Behrens Gil

        student•
        hace 6 años

        Cuesta un poco entenderlo, pero practicando creo que se puede solucionar eso

        Joel David Alvarez Ayola

        Joel David Alvarez Ayola

        student•
        hace 6 años

        Muchas veces he escuchado acerca de Redux pero hasta ahora me adentro en este mundo como tal y eso me emociona porque hasta ahora ha sido genial.

        Nery Alberto Cano Ortigoza

        Nery Alberto Cano Ortigoza

        student•
        hace 6 años

        Entender como funciona redux es un plus en tu carrera como profesional totalmente!

          Bernardo Aguayo Ortega

          Bernardo Aguayo Ortega

          student•
          hace 6 años

          total

        Abril Rios

        Abril Rios

        student•
        hace 6 años

        Me encanta lo bien que explica este profe.

        Kamerr Ezz

        Kamerr Ezz

        student•
        hace 5 años

        A POR REDUX !!!

        Rodrigo Acevedo Gutiérrez

        Rodrigo Acevedo Gutiérrez

        student•
        hace 5 años

        Excelente explicación!

        Lorena Andrea Cárcamo Herrera

        Lorena Andrea Cárcamo Herrera

        student•
        hace 5 años

        Muchas gracias, ahora quedo más claro para que se usa Redux <3

        Nelson Gonzalez Escalante

        Nelson Gonzalez Escalante

        student•
        hace 5 años

        Redux evoluciona las ideas de Flux, pero co la ventaja de que evita esa gran complejidad tomando cosas prestadas del lenguaje Elm.

        Ya sea que los hayas usado o no, solo toma unos minutos para empezar a usar Redux.

        Karen Paola Diaz Duarte

        Karen Paola Diaz Duarte

        student•
        hace 5 años

        librería más utilizadas para el manejo del flujo de la información en aplicaciones.

        3 pilares importantes:

        1. Única fuente de la verdad
        2. El estado es de solo lectura
        3. Los cambios se realizan con funciones puras
        Veronica Maria Vasquez Navarro

        Veronica Maria Vasquez Navarro

        student•
        hace 5 años

        Excelente información Redux 3 principales fundamentos 1- Solamente una fuente de la verdad 2- El estado es solo lectura 3- Solamente podemos utilizar funciones puras muy interesante la información

        Jhonatan David Ibarra Lavado

        Jhonatan David Ibarra Lavado

        student•
        hace 6 años

        bueno estuvo interesante la lectura, en practica creo que entenderé mejor