Video Summary and Transcription
Mark Erickson discusses the changes and challenges in Redux Toolkit 2.0, including addressing ES Module Common JS Compatibility and shipping new features. The release includes modernized build output, smaller bundle sizes, and new features like combined Slices API and dev mode checks in Reselect. The current test version is beta4, with plans to ship by the first week of December. RTK 3.0, focusing on RTK query updates, is expected to be released next year.
1. Introduction to Redux Toolkit 2.0
Hi, I'm Mark Erickson, a senior front-end engineer at Replay. Today, I'll talk about what's new in Redux Toolkit 2.0.
All right, thank you. Hi, I'm Mark Erickson, and today I'm very excited to talk to you about what is new in Redux Toolkit 2.0. A couple quick things about myself. I am a senior front-end engineer at Replay, where we're building a time-traveling debugger for JavaScript. We've got a booth out there in the vendor's hall. Please come by. I think we still have some yellow duck cats left, and we'd love to tell you about how much easier Replay makes debugging. I will answer questions anywhere there's a text box on the internet. I collect all kinds of useful links. I am a writer of extremely long blog posts, and I am a Redux maintainer and creator of Redux Toolkit. But most people know me as that guy with the Simpsons avatar.
2. Redux Toolkit 2.0 Changes and Challenges
Redux Toolkit 2.0 aims to address ES Module Common JS Compatibility, modernize JS build output, ship new features, remove outdated APIs, and provide better TypeScript types and packaging for Redux core and React Redux. However, achieving ES Module Common JS Compatibility has proven to be difficult, leading to a blog post and discussions on the topic. The plan to ship Redux Toolkit 2.0 expanded to include other packages like Redux Thunk, Reselect, and React Redux, resulting in major versions for all. The changes in RTK 2.0 include removing object syntax in Create Slice and Create Reducer, introducing a builder callback syntax for better type safety, improving options for ConfigureStore, and removing deprecated fields and the AnyAction type in favor of UnknownAction. UMD build artifacts are no longer shipped, but feedback on their necessity is welcome.
Okay, Redux Toolkit came out in October 2019. The original Redux came out in 2015, so RTK has been out half as long as Redux has existed, and yet a lot of people still don't know about it. So we shipped 1.9 a year ago, and at the start of this year, we began working on RTK 2.0, and we had a few different goals.
One is correct ES Module Common JS Compatibility, whatever that actually means. Another is to modernize the JS build output. We can stop caring about IE 11. We had some new features we wanted to ship, we wanted to remove some outdated APIs, and we wanted to ship updated versions of the Redux core and React Redux with better TypeScript types and packaging.
Unfortunately, it turns out that ES Module Common JS Compatibility is really hard. I've spent much of my year banging my head against the wall trying to get this stuff to work, sort of think I found some settings that are correct. It's been a real pain. I ended up writing a very long blog post about how hard this has been and a lot of other library maintainers have agreed and said, yeah, yeah, we're dealing with the same thing. So, I wrote a blog post about this. It's on my site, blog.iswordsoftware.com. Also, I had a couple conversations and podcasts about dealing with this as well.
So, the original plan was just ship Redux Toolkit 2.0. Also, for that matter, we had converted the Redux core to TypeScript in 2019 and never shipped it because version 4's types were still good enough, and we were worried about breaking changes. So, we were gonna ship both these together, and then I realized that our other packages needed these same changes. Redux Thunk, Reselect, React Redux. They all needed the same packaging updates, as well, and that really means major versions for everything. So, what is actually changing? We do have some breaking changes in RTK 2.0. Hopefully they're relatively minor. We've removed an object syntax that was used in Create Slice and Create Reducer. There's a builder callback syntax that provides better type safety, and it's really the same number of lines of code. We've even got a code mod to convert that over for you. We've improved some of the options for ConfigureStore, again, for better type safety. There is a few deprecated fields that we finally removed. The Redux types had an AnyAction type that was very loose, and we've replaced that with an UnknownAction type. In terms of the build process, we've stopped shipping UMD build artifacts. I can't find any reason to keep those. If you think we still need them, and you have a use case for it, please let me know.
3. Redux Toolkit 2.0 Features and Release
We've modernized the build output to target modern browsers, resulting in smaller bundle sizes. New features include the combined Slices API for dynamically injecting reducers, the ability to define selectors inside of create slice, and dev mode checks in Reselect. Redux Toolkit 2.0 beta4 is the current test version, and we hope to ship it by the first week of December. Please try out the betas and provide feedback on the upgrade process and new features. RTK 3.0, focusing on RTK query updates, is likely to be shipped next year.
We've modernized the build output to target modern browsers. So, you know, latest and greatest JavaScript syntax means smaller bundle sizes. If you need a transpilot for, you know, backwards compatibility, please target that yourself. And we've even extracted error codes to shrink the bundle size as well. We seem to have lost the screen again. Fun!
Okay. We do have a few new features. There is a combined Slices API that's used for dynamically injecting reducers. Redux never had anything built in for that before, so hopefully this will help. We've added the ability to define selectors inside of create slice. Configure store does some batching of Redux updates by default. We have some dev mode checks in Reselect, kind of similar conceptually to, you know, strict mode, running your effects twice in react that will warn you if your selectors aren't memoized right. Redux toolkit includes the latest version of emmer, which has a smaller bundle size and much faster immutable update performance.
So, where do things stand right now? We've got Redux toolkit 2.0 beta4 is the current test version and I hope that I've got the packaging right this time, I think. Nobody has complained about it yet, but I also don't know how many people have actually tried the beta, so we'll see. We think it's basically feature complete. We're still debating a couple last options and what the exact syntax and behavior should be. We have Redux core version 5 in React Redux version 9 also in beta as well.
So when is this going to come out? Soon. I've been dealing with this the entire year. I think it's basically ready. Honestly, I would love to ship this by the first week of December, if only so that I can enjoy my holidays without worrying about this at all. It's been occupying a slot in my head the entire year. So please try out RTK 2.0 beta and React Redux version 9 beta. Please give us feedback on how the upgrade process goes. Let us know if something breaks that wasn't supposed to break. And please let us know if some of the new features actually help you in your applications. We've had a lot of requests about adding more features to the RTK query data fetching library. In the interest of time, we've decided to defer all of those past RTK 2.0 so that we can get the updates out and people can use them. And then we can take our time to make sure that any RTK query updates are well thought and well designed and we're not rushing to get those done. So it's very likely that we would end up shipping RTK 3.0 sometime next year that focuses on just RTK query updates. So please try out the betas and give us feedback. I will have these slides up on my blog at blog.isquaredsoftware.com later today.
Comments