Haciendo la Gestión del Estado Inteligente

Rate this content
Bookmark

Gestionar el estado en React es complicado. Los humanos son aún más complicados. Como desarrolladores, es nuestro trabajo ofrecer experiencias de usuario fluidas e intuitivas, pero la complejidad misma del comportamiento humano y del mundo real puede hacer que esto sea más difícil de lo que debería ser. En esta charla, exploraremos un enfoque radicalmente nuevo para el desarrollo de aplicaciones donde los modelos de lenguaje (LLMs) y el aprendizaje por refuerzo (RL) se pueden utilizar para manejar la lógica de la aplicación de una manera más inteligente y centrada en el ser humano. Estamos llevando la inteligencia artificial a la gestión del estado de formas que van mucho, mucho más allá de "llamar a la API de OpenAI y esperar lo mejor". Aprenderás cómo puedes aprovechar la IA en tus aplicaciones React existentes para crear la mejor experiencia de usuario posible y vislumbrar el futuro de los agentes de IA.

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

David Khourshid
David Khourshid
31 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora la gestión inteligente del estado en React, destacando las limitaciones de la gestión tradicional del estado y la necesidad de innovación. La tienda de Xdate simplifica la gestión del estado al proporcionar una forma fácil de actualizar y recuperar datos. La integración de la IA y las máquinas de estado permite la creación de aplicaciones inteligentes que mejoran la experiencia del usuario. La combinación de la gestión del estado y la IA se logra a través de paquetes como StatelyAI-Agent y el Vercel AI SDK. Las máquinas de estado, el aprendizaje por refuerzo y los modelos de lenguaje grandes desempeñan un papel clave en la creación de agentes inteligentes. Los algoritmos de gráficos se pueden utilizar para recorrer las máquinas de estado y mejorar la experiencia del usuario. Los agentes de estado almacenan conocimiento en la memoria a corto y largo plazo, mientras que las máquinas de estado proporcionan límites de seguridad y automatización en procesos de múltiples pasos. También se discute el impacto de los Modelos de Lenguaje (LLMs) en el rendimiento de la interfaz de usuario y la experimentación futura de la construcción de modelos de IA para identificar máquinas de estado.

1. Intelligent State Management in React

Short description:

Hoy vamos a hablar sobre hacer que la gestión del estado sea inteligente. Exploraremos las limitaciones de la gestión tradicional del estado en React y la necesidad de innovación. Usando IA, podemos ampliar los límites de la interfaz de usuario y la experiencia de usuario. Comencemos con los estados y el uso del hook useState en React. El código para gestionar el estado sin una biblioteca puede volverse complejo y difícil de entender. Por eso existen varias bibliotecas de gestión del estado disponibles como Xdate, Redux, Jyoti, Recoil y MobX. Para proyectos modernos, Zustan o Redux son opciones populares.

Hola a todos. Hoy vamos a hablar sobre cómo hacer que la gestión del estado sea inteligente, lo que sea que eso signifique. Honestamente, el título de esto debería haber sido por qué a David le gustan tanto las máquinas de estado porque eso es literalmente todo de lo que voy a hablar hoy.

Es emocionante verlos a todos aquí. Es mi segunda vez en la Cumbre de React, la primera vez que hablo, así que esto es extremadamente emocionante. Un poco sobre mí. Mi nombre es David Korsheid. Estoy en David K. Piano. No toco el piano, lo siento, mi nombre no es piano, sí toco el piano, por eso está piano ahí. Lo siento por confundirlos. Trabajo en una empresa llamada stately.ai, que casualmente son las dos cosas de las que estamos hablando hoy, estado e IA. Y la razón es porque todos hemos hecho gestión del estado en React y nuestras aplicaciones, y honestamente, no hay mucho espacio para la innovación, al menos hasta ahora, ahora que tenemos IA en todas partes. Así que honestamente solo quiero pasar los próximos minutos con ustedes innovando en cómo podemos hacer que la gestión del estado sea inteligente.

Ahora, cuando hablo de innovación, no me refiero a este tipo de innovación. Este no es el tipo que queremos. Quiero decir, estoy seguro de que hay una razón para esto, pero la mente estadounidense no puede comprender esto. Me refiero a innovación como esta. No sé si han visto a T.L. dibujar ejemplos realmente emocionantes de hacer cosas súper geniales con un lienzo infinito y realmente usar IA y ampliar los límites de lo que puede ser realmente la UI y la UX para nuestros usuarios.

Así que empecemos con los estados. Probablemente usemos el useState en React, el hook useState, y vamos a hacer una aplicación de lista de tareas simple. Probablemente, si no estás usando una biblioteca de gestión del estado, comenzarías así. Tendrías to-dos, setToDos, un montón de use dates, y honestamente, este código me pone un poco triste. Tenemos un useEffect ahí, asegurándonos de que nuestras tareas estén actualizadas. Tenemos todos estos use dates por todas partes. Y luego tenemos el temido array de dependencias infernal. Así que honestamente, creo que podríamos hacerlo mejor que esto, y diré que cuando gestionas el estado de esta manera, ¿funciona? Sí, va a funcionar. Pero se vuelve mucho más difícil entender la lógica real de tu aplicación, y por eso han aparecido muchas bibliotecas de gestión del estado, como Xdate, Redux, del que Mark habló antes hoy, y otras como Jyoti, Recoil, MobX, y algunas otras que no mencioné aquí, pero solo hay tanto espacio en la pantalla. Así que si lo hicieras hoy, probablemente usarías algo como Zustan o Redux.

2. Xdate's Store for State Management

Short description:

La tienda de Xdate es una nueva biblioteca que simplifica la gestión del estado. Proporciona una forma sencilla de actualizar los datos y recuperarlos utilizando el gancho use selector. La biblioteca sigue los conceptos fundamentales de estados, eventos y transiciones.

Esto es en realidad la tienda de Xdate. Es una nueva biblioteca que lancé. Es una biblioteca pequeña en la que todo lo que haces es proporcionar los data para tu tienda, y luego proporcionas en el segundo argumento una forma de actualizar esos data, como agregar una tarea, actualizar una tarea, seleccionar una tarea, etc. Y luego puedes usarlo en tu aplicación simplemente obteniendo el gancho use selector y seleccionando de esa tienda, y luego solo envías eventos. La API es extremadamente sencilla, y esto realmente está destinado a ser un trampolín para Xdate, pero también una forma muy sencilla de gestionar tu estado.

Porque no importa qué biblioteca de gestión del estado uses, esencialmente estás utilizando tres conceptos — estados, eventos y transiciones. Es lo mismo para todas las bibliotecas. Algunas pueden difuminar las líneas entre lo que es un evento, lo que es una acción o un método, pero sí, eso es gestión del estado en pocas palabras.

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

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.
Pensando en React Query
React Summit 2023React Summit 2023
22 min
Pensando en React Query
Top Content
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.

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.
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.