Domando el Dragón de la Gestión de Estado

Rate this content
Bookmark

Pasamos mucho tiempo discutiendo qué biblioteca de estado deberíamos usar, y es justo. Hay bastantes, desde la común que todos usan y aman odiar, hasta esa alternativa peculiar, hasta varios recién llegados. Sin embargo, discutir cuál biblioteca es la mejor pone el carro antes que el caballo.

Al averiguar cómo manejar el estado, primero deberíamos preguntarnos: ¿qué diferentes categorías de estado necesitamos? ¿Cuáles son las restricciones de cada categoría? ¿Cómo se relacionan entre sí? ¿Cómo se relacionan con el mundo exterior? ¿Cómo evitamos que se conviertan en una gigantesca y frágil bola de hilo? Y más.

Esto puede sonar abrumador, ¡pero no temas! En esta charla, te guiaré sobre cómo responder estas preguntas y cómo elaborar un sistema de estado accesible, mantenible y escalable. Y sí, también hablaré sobre cómo elegir una biblioteca de gestión de estado.

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

FAQ

El estado se define como los datos y todos sus mecanismos relacionados, incluyendo cómo se accede, se lee, se actualiza y se sincroniza la información.

Brian identifica tres categorías principales: datos de arranque (creados antes del inicio), datos cargados perezosamente (carga diferida necesaria para mostrar UI) y datos reactivos (que responden a la interacción del usuario).

La categoría del estado informa la estrategia de testing necesaria, determinando qué tipo de pruebas y salvaguardias son necesarias para asegurar la integridad y funcionalidad del estado.

Brian menciona varias bibliotecas de gestión de estado como Redux, Recoil, Jotai y Zustand, destacando sus diferentes enfoques y adecuaciones según los tipos de datos que manejan.

Un dato regional es un tipo de dato que no es global ni local, sino que tiene relevancia dentro de un alcance más limitado pero no se limita a un único componente, ideal para ciertas áreas o páginas específicas de una aplicación.

Brian utiliza el término 'localidad de los datos' para diferenciar entre datos locales (usados por un solo componente), globales (necesarios en toda la aplicación) y regionales (relevantes para múltiples componentes pero no globalmente).

Brian sugiere invertir temprano en la estructura de los sistemas de gestión de estado y facilitar hacer lo correcto mientras se hace difícil hacer lo incorrecto, para guiar a los desarrolladores hacia prácticas más seguras y eficientes.

Bryan Hughes
Bryan Hughes
23 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute varios aspectos de la gestión de estado en el desarrollo de software. Cubre diferentes tipos de estado, como datos de arranque, datos cargados de manera perezosa y datos reactivos. La charla también explora el concepto de localidad en la gestión de estado, incluyendo el estado local, global y regional. Introduce bibliotecas como Recoil y Jotai que desafían el concepto de tienda global única y proporcionan una mejor localidad. La charla enfatiza la importancia de configurar los sistemas de gestión de estado para el éxito y crear sistemas confiables para centrarse en la satisfacción del usuario.

1. Introducción a la Gestión de Estado

Short description:

Hola a todos. Mi nombre es Brian Hughes, y soy un ingeniero de frontend en Patreon. Hoy quiero hablar sobre algunas cosas que he aprendido a lo largo de los años sobre cómo construir soluciones exitosas de gestión de estado dentro de las aplicaciones. El estado no es solo datos, es cómo accedemos, leemos, actualizamos y sincronizamos los datos. Es más que solo bibliotecas, es toda la casa. Al diseñar una solución de gestión de estado, una pregunta importante que hacer es ¿cuándo se crea el estado? Hay tres categorías de estado: datos de arranque, estado previo a la interacción y estado dinámico.

Hola a todos. Mi nombre es Brian Hughes, y soy un ingeniero de frontend en Patreon. En Patreon, estoy en un equipo llamado plataforma de frontend, y nuestro equipo tiene la tarea de gestionar básicamente todas las bases para nuestro código de frontend. Y esto incluye architecture y la state management. Y hoy quiero hablar sobre algunas cosas que he aprendido a lo largo de los años sobre cómo construir soluciones exitosas de state management dentro de las aplicaciones. Porque creo que esta es una parte realmente crítica para tener un exitoso código de frontend. También es una que tiende a estar poco invertida.

Comencemos con la definición. ¿Qué es el estado? Así que defino el estado como data y todos sus mecanismos relacionados. Sabemos que intrínsecamente creo que el estado no es solo data, ¿verdad? Data es solo un montón de, bueno, data. Realmente es cómo estamos accediendo a esos data? ¿Cómo estamos leyendo esos data? ¿Cómo los estamos actualizando? ¿Cómo estamos sincronizándolos? Entonces, el estado es realmente su data y todos esos mecanismos asociados con él. Los mecanismos son más que solo bibliotecas. Creo que muchas veces cuando pensamos en el estado, decimos, bueno, tenemos este esquema de API que viene de nuestro backend y nos dice qué data tenemos. Y elegimos la biblioteca de state management Redux, recoil, Jotie, lo que sea, y eso es todo, ¿verdad? Pero eso no es todo. Esos son partes realmente importantes. La forma en que me gusta pensar en ello es que nuestro esquema de API, qué data devuelve el backend y las bibliotecas que usamos para acceder a estos data, eso es como la base de una casa. Es realmente crítico, por supuesto, es la base. Pero también necesitamos paredes y un techo y cosas así también. Y una verdadera solución de state management en una aplicación de frontend, especialmente cualquier aplicación realmente razonablemente compleja es que tenemos que pensar en esto de manera holística, tenemos que pensar en toda la casa. Así que siempre que estoy diseñando una solución de state management, ya sea si es para una aplicación completamente nueva, reescribiendo una antigua, o incluso si es solo agregar una nueva página a un sistema ya existente, hay un puñado de preguntas que realmente me gusta hacerme. Y solo tenemos tanto tiempo hoy, así que solo me voy a quedar con dos de las más importantes o al menos que creo que son importantes, y también creo que no se habla tanto como desearía que se hiciera. Entonces, la primera pregunta es, ¿cuándo se crea el estado? Si pensamos en una aplicación de frontend, no es una instantánea en el tiempo, ¿verdad? Existe a lo largo del tiempo y cambia y reacciona a la entrada del usuario, ¿verdad? Entonces, ¿cuándo está entrando en existencia el estado? Entender eso realmente informa qué tipo de estrategia de testing necesitamos para ello, qué tipos de salvaguardias necesitamos para acceder y todo tipo de cosas. Y realmente depende de la respuesta a esta pregunta. Y creo que hay aproximadamente tres categorías de estado cuando se trata de esta naturaleza temporal. La primera categoría es el estado que se crea antes del inicio, también conocido como data de arranque. Y cuando pensamos en esto, tomaremos, por ejemplo, un sitio de redes sociales. Usaremos eso como ejemplo a lo largo de esta charla. En un sitio de redes sociales, cargamos la página, lo primero que hacemos es ver un montón de publicaciones. Eso es algo que existe antes de que podamos comenzar a interactuar. Y esto sucede, o al menos una forma en que se puede hacer es que podemos hacer esto como parte de data de arranque en un moderno

2. Ensamblaje de Datos y Trampas

Short description:

En Next.js, los datos para el primer renderizado se ensamblan llamando a múltiples puntos finales de la API del back-end y luego iniciando la aplicación. Sin embargo, la creación y el consumo de datos están desacoplados, y necesitamos mantenerlos sincronizados. Los datos pasan por múltiples pasos y se canalizan, pasando por diferentes lugares antes de ser accedidos. Aunque implementar esto no es complicado, todavía requiere escribir y mantener código, lo que conlleva un costo.

configuración de renderizado del lado del servidor. Digamos con Next.js. Y en este mundo, la idea es que primero, ensamblamos todos los data necesarios para hacer ese primer renderizado. Sabes, llamamos a nuestro back-end, generalmente a múltiples puntos finales de la API del back-end, y podríamos hacer algo de hidratación, masajeo de data. Ensamblamos todo eso, y solo entonces, una vez que hemos terminado de hacer eso, hacemos iniciar la aplicación y hacer ese primer renderizado. Y así hay un par de trampas para estar al tanto de esto. Y como mencioné, esta creación de data y el consumo de data, están bastante desacoplados. La forma en que data se ve, por ejemplo, en Next.js en lugar de eso función get-server-side-props, la forma en que trabajamos con ella, cómo se ve y todo suele ser diferente a cuando lo leemos desde, digamos, dentro de Redux o algo así. Y así solo necesitamos tener en cuenta que estos están desacoplados, y por lo tanto nosotros necesitamos pensar en mantenerlos sincronizados. Ahora, en realidad no es tan complicado hacerlo en la práctica. Usualmente TypeScript es una gran solución para esto, pero aún es algo que tenemos que pensar, y por lo tanto también tenemos que mantener. Otro poco de trampa con esto es que estos data pasan por un par de pasos y se canalizan. Como dije, comenzamos llamando a múltiples puntos finales para buscar diferentes, a menudo bits de data no relacionados. Estamos buscando quién es el usuario actual, cuál es la lista de más publicaciones recientes, cuáles son los temas de tendencia actuales, cosas así. Y tomamos todos los data dispares y los apretamos juntos en una bola. Y lo pasamos a través de un par de lugares diferentes. Entra en nuestro componente de nivel superior, lo pasamos a nuestras bibliotecas a Redux digamos cuando estamos inicializando nuestra tienda, solo entonces para lo descomponemos y lo accedemos más tarde. Y de nuevo, esto no es particularmente complicado para implementar, pero es código. Y cada vez que implementamos, tenemos que escribir código para hacer algo. No importa cuán simple sea ese código, sigue siendo código que debe mantenerse y sigue siendo código

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
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.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Anunciando Starbeam: Reactividad Universal
JSNation 2022JSNation 2022
27 min
Anunciando Starbeam: Reactividad Universal
Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.
La filosofía de Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
La filosofía de Yarn
Let's talk about React and TypeScript, Yarn's philosophy and long-term relevance, stability and error handling in Yarn, Yarn's behavior and open source sustainability, investing in maintenance and future contributors, contributing to the JavaScript ecosystem, open-source contribution experience, maintaining naming consistency in large projects, version consistency and strictness in Yarn, and Yarn 4 experiments for performance improvement.

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.
Práctica con AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Práctica con AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.- Comenzando e instalando AG Grid- Configurando ordenamiento, filtrado, paginación- Cargando datos en la cuadrícula- La API de la cuadrícula- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la cuadrícula con componentes de React
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
WorkshopFree
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
Workshop
Maurice de Beijer
Maurice de Beijer
En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
De la Idea a la Producción: Desarrollo de React con un Toque Visual
React Summit 2023React Summit 2023
31 min
De la Idea a la Producción: Desarrollo de React con un Toque Visual
WorkshopFree
Omer Kenet
Omer Kenet
Únete a nosotros para un masterclass de 3 horas que explora el mundo del desarrollo creativo de React utilizando Codux. Los participantes explorarán cómo un enfoque visual puede desbloquear la creatividad, agilizar los flujos de trabajo y mejorar la velocidad de desarrollo. Sumérgete en las características que hacen de Codux un cambio de juego para los desarrolladores de React. La sesión incluirá ejercicios prácticos que demuestran el poder de la renderización en tiempo real, la manipulación visual del código y el aislamiento de componentes, todo en tu código fuente.
Tabla de contenidos:- Descarga e instalación: Preparando Codux para el masterclass- Selector de proyectos: Clonación e instalación de un proyecto de demostración- Introducción a los conceptos principales de Codux y su interfaz de usuario- Ejercicio 1: Encontrando nuestro camino- Descanso- Ejercicio 2: Realizando cambios de manera efectiva- Ejercicio 3: Reutilización y validación de casos especiales- Resumen, Cierre y Preguntas y Respuestas