Logo de Código Facilito
  • Inicio
  • Replays
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso para crear Single Page Applications con React!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso para crear Single Page Applications con React

Video Qué es Redux

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

Redux es un manejador para el estado de tu aplicación. Está diseñado como un almacén predecible, centralizado, flexible y fácil de debuggear.

Para entender qué es Redux, primero necesitamos saber a qué nos referimos con el estado de una aplicación, y cómo manejamos tradicionalmente este estado, con base en esta información, iremos destacando las características y beneficios del uso de Redux.

De acuerdo a la Wikipedia, decimos que un sistema es “stateful” o que tiene un estado, cuando está diseñado para recordar eventos e interacciones de usuario, a esta información recolectada en base a la interacción del usuario con el sistema, se le conoce como el estado. En una aplicación web, podemos por ejemplo recordar si el usuario ya inició sesión o no, si envió un formulario o no, si completó un proceso de bienvenida o no, en qué lugar hizo clic, si cargó una lista de recursos, si hizo una búsqueda, entre muchas otras cosas.

El protocolo base para la web, el protocolo HTTP es stateless, por lo que podemos decir que es un sistema que NO está diseñado para recordar interacciones previas. Cada petición y comunicación es independiente de la otra. Entonces ¿cómo recuerdan la información las aplicaciones web?

El esquema tradicional de manejo de estado en una aplicación web, está basado en cookies. Estas cookies se envían junto con cada petición que se hace al servidor, por lo que es un buen recurso para comunicar y almacenar información del estado de una aplicación. Es a través del esquema de cookies que una aplicación puede recordar si ya visitaste previamente una página, si ya iniciaste sesión, si modificaste una configuración, etc. Es decir, almacena el estado.

Dado que en una aplicación con routing en el cliente, la página se recarga y actualiza localmente, las aplicaciones con routing en el cliente suelen utilizar mecanismos distintos para el almacén del estado.

Para hacer la idea del estado, más tangible, imagina que tienes una estructura JSON global, y que toda la información que deseas comunicar entre tu aplicación, se guarda en este JSON. Ahí guardarías si el usuario ya inició sesión, qué usuario es, si cargo una lista de recursos, si hizo una búsqueda, si uso algunos filtros, si quiere usar dark mode o light mode, etc. Esta estructura se comparte entre todas las piezas de tu aplicación, y la llamamos el estado.

Redux es eso, un almacén centralizado de la información que va produciendo el usuario al interactuar con el sistema.

Para manejar la información de la aplicación, Redux propone un flujo que tienen que seguir los cambios sobre el estado, cuyo propósito es el de hacer estos cambios directos, predecibles, y que si algo falla, sea fácil identificar en dónde ocurrió este cambio o fallo.

En resumen Redux se puede describir como un conjunto de dos cosas: Un almacén centralizado para el estado de la aplicación, y una arquitectura que define cómo fluye la información en la aplicación.

Continuemos.

  • Módulo 1 | 6 clases

    Introducción

    expand_more
    • play_circle_outline

      Clase 1

      1.- Introducción al curso de Single Page Apps con React

    • play_circle_outline

      Clase 2

      Conocimientos previos [Curso React SPA]

    • play_circle_outline

      Clase 3

      Cómo instalar Node.js en Windows

    • play_circle_outline

      Clase 4

      Cómo instalar Node.js en Mac

    • play_circle_outline

      Clase 5

      Configurar el servicio web

    • play_circle_outline

      Clase 6

      Iniciar el proyecto con create-react-app

  • Módulo 2 | 8 clases

    Routing en el cliente

    expand_more
    • play_circle_outline

      Clase 1

      Router del cliente

    • play_circle_outline

      Clase 2

      Configurar react-router v6

    • play_circle_outline

      Clase 3

      Definir rutas

    • play_circle_outline

      Clase 4

      Links de navegación

    • play_circle_outline

      Clase 5

      Rutas anidadas

    • play_circle_outline

      Clase 6

      Navegación con JavaScript

    • play_circle_outline

      Clase 7

      Leyendo parámetros

    • play_circle_outline

      Clase 8

      Ranking de rutas

  • Módulo 3 | 13 clases

    Autenticación de usuarios

    expand_more
    • play_arrow

      Clase 1

      Qué es Redux

    • play_circle_outline

      Clase 2

      Flujo de cambios en Redux

    • play_circle_outline

      Clase 3

      Terminología en Redux

    • play_circle_outline

      Clase 4

      Instalar y configurar redux

    • play_circle_outline

      Clase 5

      Redux devtools

    • play_circle_outline

      Clase 6

      Mocking de autenticación

    • play_circle_outline

      Clase 7

      createSlice explicado

    • play_circle_outline

      Clase 8

      Redux thunks

    • play_circle_outline

      Clase 9

      Registro de usuarios

    • play_circle_outline

      Clase 10

      Inicio de sesión

    • play_circle_outline

      Clase 11

      Cerrar sesión

    • play_circle_outline

      Clase 12

      Persistencia de datos

    • play_circle_outline

      Clase 13

      Whitelist y blacklist redux-persist

  • Módulo 4 | 10 clases

    Consumir servicios web

    expand_more
    • play_circle_outline

      Clase 1

      Crear el reducer para videos

    • play_circle_outline

      Clase 2

      Autenticación del servidor con JWT

    • play_circle_outline

      Clase 3

      Obtener videos

    • play_circle_outline

      Clase 4

      Formulario para subida de archivos

    • play_circle_outline

      Clase 5

      Subida de archivos

    • play_circle_outline

      Clase 6

      Mostrar videos

    • play_circle_outline

      Clase 7

      Configurar el reproductor de video

    • play_circle_outline

      Clase 8

      Mostrar videos individualmente

    • play_circle_outline

      Clase 9

      Perfil de usuario

    • play_circle_outline

      Clase 10

      Postear likes en un video

  • Módulo 5 | 19 clases

    Styled components

    expand_more
    • play_circle_outline

      Clase 1

      CSS in JS [React Single Page Apps]

    • play_circle_outline

      Clase 2

      Fundamentos y configuración de styled components

    • play_circle_outline

      Clase 3

      Trabajando con props

    • play_circle_outline

      Clase 4

      Extendiendo estilos de otros componentes

    • play_circle_outline

      Clase 5

      Props y atributos

    • play_circle_outline

      Clase 6

      Nesting

    • play_circle_outline

      Clase 7

      Bloques reusables de CSS

    • play_circle_outline

      Clase 8

      Configurando un tema

    • play_circle_outline

      Clase 9

      Layout de la app

    • play_circle_outline

      Clase 10

      Estilizando la página de videos

    • play_circle_outline

      Clase 11

      Botones del vídeo

    • play_circle_outline

      Clase 12

      Navegación del encabezado y del pie de página

    • play_circle_outline

      Clase 13

      Formulario de inicio de sesión

    • play_circle_outline

      Clase 14

      Mostrar navegación y footer condicionalmente

    • play_circle_outline

      Clase 15

      Registro de usuario y rutas condicionales

    • play_circle_outline

      Clase 16

      Vista de la subida de archivos

    • play_circle_outline

      Clase 17

      Vista del perfil de usuarios

    • play_circle_outline

      Clase 18

      Botón para cerrar sesión

    • play_circle_outline

      Clase 19

      Vista individual de videos

  • Módulo 6 | 7 clases

    Scroll infinito

    expand_more
    • play_circle_outline

      Clase 1

      Los desafíos de implementar scroll infinito

    • play_circle_outline

      Clase 2

      Configurando Infnite Loader y List

    • play_circle_outline

      Clase 3

      Mostrar videos en el contenedor de carga infinita

    • play_circle_outline

      Clase 4

      Paginación de videos

    • play_circle_outline

      Clase 5

      Integrar paginación con el contenedor de carga infinita

    • play_circle_outline

      Clase 6

      React Devtools

    • play_circle_outline

      Clase 7

      Detalles finales de la carga infinita

  • Módulo 7 | 4 clases

    Deploy a producción

    expand_more
    • play_circle_outline

      Clase 1

      Media queries con styled components

    • play_circle_outline

      Clase 2

      Manejo de variables de entorno

    • play_circle_outline

      Clase 3

      Generar el build

    • play_circle_outline

      Clase 4

      Deploy a Firebase Hosting

  • check_circle_outline
    Módulo 8

    Examen del curso

    expand_more
    • done_all

      Examen

      Examen final del curso

Qué es Redux

arrow_back Siguiente arrow_forward
Curso para crear Single Page Applications con React