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 -
check_circle_outlineMódulo 8
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-