Redux Toolkit desde Cero: CRUD y Estado Global

Introducción al Estado Global

Este episodio se centra en aprender a gestionar el estado global de una aplicación mediante el uso de Redux Toolkit, la forma recomendada y opinionated de utilizar Redux hoy en día. A lo largo del directo, se construye un proyecto práctico tipo CRUD (Create, Read, Update, Delete) con TypeScript.

Configuración y Herramientas

• ROM Tools: Se utiliza esta alternativa a ESLint y Prettier, destacando su velocidad al estar escrita en Rust.
• Tremor: Se integra esta colección de componentes especializada en dashboards y formularios para agilizar el desarrollo de la interfaz.
• Arquitectura: Se sigue una estructura clara para el manejo del estado, utilizando slices para modularizar la caja de la aplicación.

Conceptos Clave de Redux

• Slice: Define un trozo de la Store o caja de estado, incluyendo su estado inicial y los reducers correspondientes.
• Reducers: Funciones que transforman el estado basándose en acciones enviadas.
• Middleware: Se enseña cómo interceptar acciones para añadir lógica transversal, como la persistencia en localStorage.

  "Un middleware es algo que se ejecuta en mitad de algo. Es casi como un proxy."

Persistencia y Sincronización

• Se detalla cómo sincronizar el estado global con una base de datos mediante middleware.
• Actualizaciones Optimistas: Se explica la técnica utilizada por plataformas como Twitter/X para mejorar la experiencia de usuario, haciendo parecer que la acción ocurre instantáneamente antes de confirmarse en el backend, implementando además una lógica de rollback en caso de error.