Por qué deberías usar Redux en 2024

Spanish audio is available in the player settings
Rate this content
Bookmark

Siempre he evitado intentar hacer ventas para Redux, y la verdad es que la mayor parte de mi tiempo se ha dedicado a decirle a la gente cuándo _no deberían_ usar Redux :) Pero todavía veo a muchas personas preguntando "_¿cuándo_ debería usar Redux?", y "¿cómo se compara Redux con $OTRA_HERRAMIENTA?". Así que, creo que vale la pena hacer una charla en la que cubra los beneficios reales y las razones para considerar el uso de Redux hoy en día.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Mark Erikson
Mark Erikson
33 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Mark Erickson explica la historia, creación, evolución y beneficios de Redux. Redux fue diseñado para facilitar las actualizaciones de estado y el mantenimiento del historial de acciones, incorporando principios de programación funcional. Redux Toolkit fue creado para simplificar el uso de Redux. Redux sigue siendo una opción válida por su patrón consistente y la separación del estado de la interfaz de usuario. La decisión de usar Redux depende del caso de uso específico y la necesidad de una gestión centralizada del estado.
Available in English: Why You Should Use Redux in 2024

1. Introducción a Redux

Short description:

Mark Erickson explica por qué deberías usar Redux hoy. Discute su papel como ingeniero senior de front-end en Replay, su participación en el mantenimiento y documentación de Redux, y la creación de Redux Toolkit. La charla tiene como objetivo abordar el contexto histórico de Redux y su uso apropiado.

Muy bien. Buenos días. Mi nombre es Mark Erickson, y hoy estoy muy emocionado de hablar sobre por qué deberías usar Redux hoy.

Un par de cosas rápidas sobre mí. Soy un ingeniero senior de front-end en Replay donde estamos construyendo un depurador de viaje en el tiempo para aplicaciones JavaScript. Si no lo has visto, por favor échale un vistazo. Te ahorrará mucho tiempo investigando problemas e intentando arreglar tus pruebas inestables. Ven y pregúntame sobre ello más tarde. Estoy muy contento de mostrarlo. Soy un respondedor de preguntas. Responderé preguntas prácticamente en cualquier lugar donde haya un cuadro de texto en internet. Recojo cualquier tipo de enlace que parezca incluso remotamente útil. Escribo publicaciones de blog extremadamente largas, y soy un mantenedor de Redux. He hecho la mayor parte de nuestra documentación, y creé Redux Toolkit, pero la mayoría de la gente me conoce como ese tipo con el avatar de los Simpsons. Se ha convertido en una marca registrada.

¿Por qué estamos teniendo esta charla de todos modos? Bueno, históricamente, el equipo de Redux en realidad no ha dedicado realmente ningún tiempo en absoluto tratando de animar a la gente a usar Redux. De hecho, si acaso, hemos pasado la mayor parte de nuestro tiempo diciendo a la gente que no deberías realmente usar Redux en esta situación, y parte de eso es porque Redux ha sido usado en muchos lugares donde realmente no debería haberlo sido. Así que nuestro objetivo como mantenedores no es como si estuviéramos tratando de ganar cuota de mercado. Solo queremos que Redux sea una herramienta muy buena para que si eliges usarla, funcione bien para ti. Pero todavía vemos muchas preguntas sobre cuándo tiene sentido usar Redux? Ahora, preguntas rápidas por curiosidad.

2. La Historia y Propósito de Redux

Short description:

El orador discute la familiaridad de la audiencia con Redux y el Toolkit de Redux. Expresan su intención de explorar la historia, evolución, compensaciones y razones positivas para usar Redux. El orador menciona brevemente que no comparará Redux con otras bibliotecas ni discutirá el Toolkit de Redux. Luego proporcionan una rápida historia de Redux, comenzando con el lanzamiento de React en 2013 y la posterior introducción de la Arquitectura Flux por Facebook para abordar problemas de sincronización de estado.

¿Cuántos de ustedes han usado Redux en alguna forma en absoluto? Vale. Básicamente toda la sala. Genial. ¿Cuántos de ustedes han usado el moderno paquete Toolkit de Redux? Vale. Algo menos de manos. Eso es preocupante. Y solo por curiosidad, ¿cuántas personas aquí nunca han usado Redux? Vale, como, diez personas. De acuerdo.

Entonces, ¿qué estoy tratando de hacer hoy? Soy un gran creyente en entender la historia de las herramientas, por qué fueron creadas y qué problemas estaban tratando de resolver. Así que vamos a echar un vistazo rápido a la historia de Redux y las circunstancias que rodean su creación. Vamos a hablar de cómo el ecosistema ha evolucionado con el tiempo. Hablaremos un poco sobre algunas de las compensaciones de usar Redux. Y voy a dar algunas razones positivas por las que vale la pena considerar el uso de Redux hoy. Ahora tenemos un tiempo limitado, el reloj ya está corriendo. No voy a intentar comparar Redux versus otras bibliotecas. Ni siquiera voy a hablar de, como, lo increíble que es el Toolkit de Redux. He dado charlas como esa antes. Puedes buscarlas en tu propio tiempo. Así que una rápida historia de Redux. React salió públicamente en 2013. Y un año después, Facebook anunció este concepto llamado la Arquitectura Flux. Y el problema era que tenían dificultades para mantener el estado sincronizado en diferentes partes de su aplicación. Más famosamente, el botón de notificaciones mostraba, como, diferentes valores que el resto de la UI. Y tenían problemas para poder entender cómo se actualizaban los datos. Así que se les ocurrió un patrón llamado la Arquitectura Flux, que usaba palabras como tiendas y despachadores y objetos de acción. Y estos podrían sonar familiares. Y eso es porque Redux en realidad obtuvo todos estos términos de Flux inicialmente. Es, como, la razón por la que se llaman acciones y no eventos es porque Flux usó ese nombre primero y simplemente mantuvimos el nombre de Flux. Ahora, Facebook no lanzó una biblioteca completa para Flux. Solo un par de utilidades.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

Workshops on related topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados