Modern Redux With Redux Toolkit

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.

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.

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.