¿Qué hay de nuevo en Redux Toolkit 2.0?

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.

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.