¿Qué hay de nuevo en Redux Toolkit 2.0?

Rate this content
Bookmark

¡Redux Toolkit 2.0 está aquí! Descubre qué ha cambiado y por qué, el trabajo que se ha invertido en reempaquetar las bibliotecas de Redux, una visión general de las nuevas características y los cambios significativos, y un vistazo a los planes futuros.

Mark Erikson
Mark Erikson
8 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Mark Erickson discute las nuevas características en Redux Toolkit 2.0, incluyendo la simplificación de la lógica de Redux y la adición de RTK query para la obtención de datos. Menciona los desafíos de lograr la compatibilidad ESM common JS y se refiere a una entrada de blog que escribió al respecto. Se discute el plan para lanzar las versiones principales de RTK, Redux core, Reselect, y React Redux juntas, con un enfoque en la conversión de Redux core a TypeScript y la necesidad de actualizaciones de empaquetado y mejoras de tipo TypeScript.

Available in English

1. Introducción a Redux Toolkit 2.0

Short description:

Mi nombre es Mark Erickson y estoy emocionado de hablar sobre lo nuevo en Redux Toolkit 2.0. Redux Toolkit simplifica la lógica de Redux e incluye RTK query para la obtención de datos. Lanzamos RTK 1.0 en 2019 y ahora estamos trabajando en RTK 2.0, que tiene como objetivo mejorar la compatibilidad y agregar nuevas funciones. Sin embargo, la compatibilidad ESM common JS ha sido un desafío y he escrito una entrada de blog al respecto.

Muy bien, buenas tardes. Mi nombre es Mark Erickson, y hoy estoy muy emocionado de hablarles sobre lo nuevo en Redux Toolkit 2.0.

Un par de cosas rápidas sobre mí. Soy un ingeniero senior de front-end en Replay, donde estamos construyendo un verdadero depurador de viaje en el tiempo para JavaScript. Tenemos un stand allí en el vestíbulo. Si aún no lo has visto, por favor pasa. Nos encantaría mostrarte cuánto más fácil hace la depuración de aplicaciones.

Responderé preguntas en cualquier lugar donde haya un cuadro de texto en internet. Recojo todo tipo de enlaces interesantes. Escribo entradas de blog ridículamente largas. Soy un mantenedor de Redux, pero la mayoría de la gente me conoce como ese tipo con el avatar de Los Simpson. Lo sé. A veces llevo una etiqueta con mi nombre para que la gente me reconozca.

Redux Toolkit es la forma estándar de escribir lógica de Redux hoy en día. Proporciona métodos para simplificar los patrones estándar de Redux, como la creación de tiendas, la escritura de reductores, funciones e incluso la obtención de datos. Incluye una sub-pieza llamada RTK query, que está específicamente diseñada para simplificar la obtención de datos en las aplicaciones de Redux, y se envuelve alrededor de las APIs centrales de Redux.

Lanzamos RTK 1.0 en octubre de 2019, lo que si lo piensas significa que ha estado alrededor la mitad de tiempo que la biblioteca original de Redux, y sin embargo, muchas personas no saben de ella. La última versión ha sido RTK 1.9. Lanzamos 1.9 hace un año. El último lanzamiento de parche fue 1.9.7.

Al comienzo de este año, comenzamos a trabajar para RTK 2.0, y teníamos varios objetivos. El primero es la correcta compatibilidad entre los módulos ES y common JS, lo que eso realmente signifique. Queríamos modernizar los artefactos de construcción de JavaScript para que utilicen una sintaxis moderna, ya no apuntando a IE 11. Queríamos agregar algunas nuevas funciones, eliminar algunas APIs obsoletas y queríamos enviar algunos tipos de TypeScript actualizados junto con el empaquetado.

Ahora, desafortunadamente, resulta que todo este asunto de la compatibilidad ESM common JS es realmente, realmente difícil. Pasé por varias rondas de iteración donde intenté cambiar algunas configuraciones, intenté cambiar alguna configuración de construcción, y varias herramientas no funcionaban correctamente. Resulta que el campo de exportación de paquetes es realmente complejo, pero el problema más grande es que cada herramienta de construcción diferente tiene su propia idea de cómo interpretan estas cosas. Estaba jugando con esto en la sala de conferencias hace una hora. Aún no está terminado. De hecho, terminé escribiendo una entrada de blog muy larga hace unos meses, hablando sobre el dolor y el sufrimiento que he tenido que soportar tratando de hacer que esto funcione.

2. Lanzamiento de Versiones Mayores y Actualizaciones de TypeScript

Short description:

El plan era lanzar versiones mayores de RTK, Redux core, Reselect y React Redux juntos. Redux core se convirtió a TypeScript en 2019 pero nunca se lanzó. Todos los paquetes requieren actualizaciones de empaquetado y algunas actualizaciones de tipos de TypeScript.

Hablé de ello en un par de podcasts también. Ahora, el plan original era simplemente lanzar versiones mayores de RTK y el núcleo de Redux. Luego nos dimos cuenta de que probablemente necesitábamos lanzar versiones mayores de todas las otras bibliotecas como Reselect y React Redux también. El núcleo de Redux en realidad se convirtió a TypeScript en 2019, y luego nunca lo lanzamos porque la versión 4 era lo suficientemente buena y estábamos preocupados por la ruptura. Decidimos que todos estos paquetes necesitan ser enviados, nuevas versiones mayores juntas. Todos necesitan las mismas actualizaciones de empaquetado con un par de variaciones ligeras, y íbamos a intentar hacer un trabajo para actualizar algunos de los tipos de TypeScript y algunas de las exportaciones que estábamos definiendo. Hay una serie de cambios importantes en RTK 2.0. En realidad, esperamos que en la mayoría de los casos sea una actualización sencilla. El más grande que podría afectar a las personas es que teníamos esta sintaxis de objeto en un par de los métodos, createSlice y createReducer, y lo hemos eliminado porque hay una sintaxis de devolución de llamada que proporciona un mejor soporte de TypeScript. De hecho, tenemos un mod de código que automáticamente hará la conversión de código para ti si quieres. La mayoría de los otros cambios importantes en realidad tienen que ver con cosas relacionadas con TypeScript de alguna manera, tratando de hacer que el código sea más seguro, tratando de mejorar algunas de las inferencias y la experiencia para los usuarios finales. Tomé la decisión de eliminar los artefactos de construcción UMD. Mi entendimiento es que en este punto, muy pocas personas están tratando de usar esos, principalmente utilizados para tal vez como un script de código de pluma o algo así. Si alguien tiene una buena razón por la que debería volver a ponerlos, por favor hágamelo saber. También, como dije, modernizamos el JavaScript, por lo que ahora estamos enviando absolutamente moderno JavaScript. Si necesitas apuntar a IE11, lo siento. Y también, por favor haz la compilación tú mismo. Y finalmente, utilizamos una herramienta que en realidad extraerá algunos de los mensajes de error de los artefactos de producción para reducir el tamaño de la construcción. De hecho, hicimos mucho trabajo para tratar de reducir los tamaños de construcción en esta versión. También tenemos una serie de nuevas características. La más grande es algo llamado combineSlices, que se utiliza principalmente para poder cargar perezosamente los reductores en una aplicación de Redux, por lo que puedes hacer un poco de división de código e intentar inyectar cosas más tarde. También ahora tenemos la capacidad de definir algunos selectores dentro de la API de createSlice. Incluso hay una opción para definir thunks dentro de createSlice también. Eso es algo que mucha gente ha pedido a lo largo de los años. Creemos que esperamos que la biblioteca de obtención de datos RTKQuery signifique que no deberías tener que escribir demasiados thunks tú mismo, pero está ahí si lo necesitas. También incluimos la última versión de la biblioteca de actualización inmutable EMER, que tiene un rendimiento significativamente más rápido y un tamaño de paquete más pequeño también. Entonces, hablé de esto hace un mes, y RTK 2.0 estaba en beta. A partir del lunes por la mañana, RTK 2.0 está en vivo. Ahora, el problema es que literalmente presioné el botón en las notas de la versión cuando estaba a punto de irme al aeropuerto, y mientras conducía al aeropuerto, mis compañeros de equipo me estaban diciendo que había informes de errores, uno de los cuales era que React Redux no se importaría con React Native. Terminé arreglando la herramienta de construcción en la puerta del aeropuerto y envié otro parche de lanzamiento sentado en el avión antes de que despegara. Lo peor es que estaba haciendo otra corrección en la sala de conferencias hace una hora. Espero que funcione genial esta vez. Lo grande que nos permitió enviar 2.0 ahora fue que hemos aplazado todos los cambios potenciales a RTKQuery hasta después de 2.0. RTKQuery es popular, mucha gente lo está usando, pero queremos tomarnos nuestro tiempo y ser capaces de pensar a través de qué características queremos agregar y cómo van a funcionar. Así que estamos aplazando ese trabajo hasta el próximo año. Además, me gustaría pasar mis vacaciones sin tener que preocuparme por esto. Así que lo veremos el próximo año, tal vez sea 3.0. Tenemos algunos nuevos documentos para usar Redux con Next.js y una página de documentos sobre los pasos de migración que esperamos que sean bastante simples. Así que si estás usando Redux en absoluto, por favor actualiza a Redux Toolkit 2.0 hoy. Gracias.

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

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.