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.

  • check_circle_outline
    Módulo 1 | 6 clases

    Introducción

    expand_more
  • check_circle_outline
    Módulo 2 | 8 clases

    Routing en el cliente

    expand_more
  • check_circle_outline
    Módulo 3 | 13 clases

    Autenticación de usuarios

    expand_more
    • done_all

      Clase 1

      Qué es Redux

    • done_all

      Clase 2

      Flujo de cambios en Redux

    • done_all

      Clase 3

      Terminología en Redux

    • done_all

      Clase 4

      Instalar y configurar redux

    • done_all

      Clase 5

      Redux devtools

    • done_all

      Clase 6

      Mocking de autenticación

    • done_all

      Clase 7

      createSlice explicado

    • done_all

      Clase 8

      Redux thunks

    • done_all

      Clase 9

      Registro de usuarios

    • done_all

      Clase 10

      Inicio de sesión

    • done_all

      Clase 11

      Cerrar sesión

    • done_all

      Clase 12

      Persistencia de datos

    • done_all

      Clase 13

      Whitelist y blacklist redux-persist

  • check_circle_outline
    Módulo 4 | 10 clases

    Consumir servicios web

    expand_more
  • check_circle_outline
    Módulo 5 | 19 clases

    Styled components

    expand_more
  • check_circle_outline
    Módulo 6 | 7 clases

    Scroll infinito

    expand_more
  • check_circle_outline
    Módulo 7 | 4 clases

    Deploy a producción

    expand_more
  • 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