Redux Moderno con Redux Toolkit

Rate this content
Bookmark

¡Redux Toolkit 2.0 llegará pronto (TM)! Descubre qué está cambiando y por qué, el trabajo que se ha invertido en reempaquetar las bibliotecas Redux, una visión general de las nuevas características y los cambios importantes, y el último estado sobre los planes de lanzamiento.

7 min
13 Nov, 2023

AI Generated Video Summary

Mark Erickson discute los cambios y desafíos en Redux Toolkit 2.0, incluyendo la dirección de la compatibilidad de ES Module Common JS y el envío de nuevas características. El lanzamiento incluye una salida de construcción modernizada, tamaños de paquete más pequeños y nuevas características como la API de Slices combinadas y las comprobaciones de modo de desarrollo en Reselect. La versión de prueba actual es beta4, con planes de envío para la primera semana de diciembre. Se espera que RTK 3.0, centrado en las actualizaciones de consulta de RTK, se lance el próximo año.

1. Introducción a Redux Toolkit 2.0

Short description:

Hola, soy Mark Erickson, un ingeniero senior de front-end en Replay. Hoy, hablaré sobre las novedades en Redux Toolkit 2.0.

Muy bien, gracias. Hola, soy 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 depurador de viaje en el tiempo para JavaScript. Tenemos un stand en el salón de vendedores. Por favor, pasen. Creo que todavía nos quedan algunos gatos pato amarillos, y nos encantaría contarles cuánto más fácil hace Replay la depuración. Responderé preguntas en cualquier lugar donde haya un cuadro de texto en internet. Recojo todo tipo de enlaces útiles. Soy un escritor de publicaciones de blog extremadamente largas, y soy un mantenedor de Redux y creador de Redux Toolkit. Pero la mayoría de la gente me conoce como ese tipo con el avatar de los Simpsons.

2. Cambios y Desafíos en Redux Toolkit 2.0

Short description:

Redux Toolkit 2.0 tiene como objetivo abordar la compatibilidad de los módulos ES Common JS, modernizar la salida de compilación de JS, enviar nuevas funciones, eliminar API obsoletas y proporcionar mejores tipos y empaquetado de TypeScript para Redux core y React Redux. Sin embargo, lograr la compatibilidad de los módulos ES Common JS ha demostrado ser difícil, lo que llevó a una publicación de blog y discusiones sobre el tema. El plan para enviar Redux Toolkit 2.0 se amplió para incluir otros paquetes como Redux Thunk, Reselect y React Redux, lo que resultó en versiones mayores para todos. Los cambios en RTK 2.0 incluyen la eliminación de la sintaxis de objeto en Create Slice y Create Reducer, la introducción de una sintaxis de devolución de llamada del constructor para una mejor seguridad de tipo, la mejora de las opciones para ConfigureStore y la eliminación de campos obsoletos y el tipo AnyAction en favor de UnknownAction. Ya no se envían artefactos de compilación UMD, pero se agradece la retroalimentación sobre su necesidad.

Bueno, Redux Toolkit salió en octubre de 2019. El original Redux salió en 2015, por lo que RTK ha estado disponible la mitad del tiempo que Redux ha existido, y aún así, muchas personas aún no lo conocen. Así que enviamos la versión 1.9 hace un año, y a principios de este año, comenzamos a trabajar en RTK 2.0, y teníamos varios objetivos. Uno es corregir la compatibilidad de los módulos ES Common JS, sea lo que sea que eso signifique. Otro es modernizar la salida de compilación de JS. Podemos dejar de preocuparnos por IE 11. Teníamos algunas nuevas funciones que queríamos enviar, queríamos eliminar algunas API obsoletas, y queríamos enviar versiones actualizadas del núcleo de Redux y React Redux con mejores tipos de TypeScript y packaging.

Desafortunadamente, resulta que la compatibilidad de los módulos ES Common JS es realmente difícil. He pasado gran parte de mi año golpeando mi cabeza contra la pared tratando de hacer que esto funcione, creo que encontré algunas configuraciones que son correctas. Ha sido un verdadero dolor. Terminé escribiendo una publicación de blog muy larga sobre lo difícil que ha sido esto y muchos otros mantenedores de bibliotecas han acordado y dicho, sí, sí, estamos lidiando con lo mismo. Entonces, escribí una publicación de blog sobre esto. Está en mi sitio, blog.iswordsoftware.com. También, tuve un par de conversaciones y podcasts sobre cómo lidiar con esto también.

Entonces, el plan original era simplemente enviar Redux Toolkit 2.0. Además, para el caso, habíamos convertido el núcleo de Redux a TypeScript en 2019 y nunca lo enviamos porque los tipos de la versión 4 todavía eran lo suficientemente buenos, y estábamos preocupados por los cambios disruptivos. Entonces, íbamos a enviar ambos juntos, y luego me di cuenta de que nuestros otros paquetes necesitaban estos mismos cambios. Redux Thunk, Reselect, React Redux. Todos necesitaban las mismas actualizaciones de packaging, también, y eso realmente significa versiones mayores para todo. Entonces, ¿qué está cambiando realmente? Tenemos algunos cambios disruptivos en RTK 2.0. Esperemos que sean relativamente menores. Hemos eliminado una sintaxis de objeto que se usaba en Create Slice y Create Reducer. Hay una sintaxis de devolución de llamada del constructor que proporciona una mejor type safety, y realmente es la misma cantidad de líneas de código. Incluso tenemos un mod de código para convertir eso por ti. Hemos mejorado algunas de las opciones para ConfigureStore, nuevamente, para una mejor type safety. Hay algunos campos obsoletos que finalmente eliminamos. Los tipos de Redux tenían un tipo AnyAction que era muy laxo, y lo hemos reemplazado con un tipo UnknownAction. En términos del proceso de compilación, hemos dejado de enviar artefactos de compilación UMD. No puedo encontrar ninguna razón para mantenerlos. Si crees que todavía los necesitamos, y tienes un caso de uso para ello, por favor házmelo saber.

3. Características y Lanzamiento de Redux Toolkit 2.0

Short description:

Hemos modernizado la salida de compilación para apuntar a los navegadores modernos, lo que resulta en tamaños de paquete más pequeños. Las nuevas características incluyen la API de Slices combinadas para inyectar dinámicamente los reductores, la capacidad de definir selectores dentro de create slice y las comprobaciones en modo de desarrollo en Reselect. Redux Toolkit 2.0 beta4 es la versión de prueba actual, y esperamos lanzarla en la primera semana de diciembre. Por favor, prueben las betas y proporcionen comentarios sobre el proceso de actualización y las nuevas características. RTK 3.0, centrado en las actualizaciones de RTK query, probablemente se lanzará el próximo año.

Hemos modernizado la salida de compilación para apuntar a los navegadores modernos. Así que, ya sabes, la última y mejor sintaxis de JavaScript significa tamaños de paquete más pequeños. Si necesitas un transpilador para, ya sabes, la compatibilidad hacia atrás, por favor, apunta a eso tú mismo. E incluso hemos extraído los códigos de error para reducir el tamaño del paquete también. Parece que hemos perdido la pantalla de nuevo. ¡Divertido!

Vale. Tenemos algunas características nuevas. Hay una API de Slices combinadas que se utiliza para inyectar dinámicamente los reductores. Redux nunca tuvo nada incorporado para eso antes, así que esperamos que esto ayude. Hemos añadido la capacidad de definir selectores dentro de create slice. Configure store hace algunas agrupaciones de actualizaciones de Redux por defecto. Tenemos algunas comprobaciones en modo de desarrollo en Reselect, algo similar conceptualmente a, ya sabes, modo estricto, ejecutando tus efectos dos veces en React que te avisará si tus selectores no están bien memorizados. Redux toolkit incluye la última versión de emmer, que tiene un tamaño de paquete más pequeño y una actualización inmutable performance mucho más rápida.

Entonces, ¿dónde estamos ahora? Tenemos Redux toolkit 2.0 beta4 es la versión de prueba actual y espero que esta vez haya acertado con el packaging, creo. Nadie se ha quejado de ello todavía, pero tampoco sé cuántas personas han probado realmente la beta, así que veremos. Creemos que básicamente está completa en cuanto a características. Todavía estamos debatiendo un par de últimas opciones y cuál debería ser la sintaxis y el comportamiento exactos. Tenemos la versión 5 del núcleo de Redux en la versión 9 de React Redux también en beta.

Entonces, ¿cuándo va a salir esto? Pronto. He estado lidiando con esto todo el año. Creo que básicamente está listo. Honestamente, me encantaría lanzar esto en la primera semana de diciembre, sólo para poder disfrutar de mis vacaciones sin preocuparme de esto en absoluto. Ha estado ocupando un espacio en mi cabeza todo el año. Así que por favor, prueben RTK 2.0 beta y React Redux versión 9 beta. Por favor, denos su opinión sobre cómo va el proceso de actualización. Avísenos si algo se rompe que no se suponía que se rompiera. Y por favor, háganos saber si algunas de las nuevas características realmente le ayudan en sus aplicaciones. Hemos tenido muchas solicitudes sobre la adición de más características a la biblioteca de obtención de data de consulta RTK. En interés del tiempo, hemos decidido aplazar todas esas características pasadas RTK 2.0 para que podamos sacar las actualizaciones y la gente pueda usarlas. Y luego podemos tomarnos nuestro tiempo para asegurarnos de que cualquier actualización de la consulta RTK esté bien pensada y bien diseñada y no nos apresuremos a terminarlas. Así que es muy probable que terminemos lanzando RTK 3.0 en algún momento del próximo año que se centra sólo en las actualizaciones de consulta RTK. Así que por favor, prueben las betas y denos su opinión. Tendré estas diapositivas en mi blog en blog.isquaredsoftware.com más tarde hoy. Muchas gracias, y espero que Redux toolkit sea útil para usted.

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
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.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
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 Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
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.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
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
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.
React Summit 2023React Summit 2023
22 min
Thinking in React Query
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

React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Featured Workshop
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.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
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.