Modern Redux With Redux Toolkit

Rate this content
Bookmark

Redux Toolkit 2.0 is coming Soon (TM)! Find out what's changing and why, the work that's gone into repackaging the Redux libraries, an overview of new features and breaking changes, and the latest status on the release plans.

7 min
13 Nov, 2023

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.

Available in Español

1. Introduction to Redux Toolkit 2.0

Short description:

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

Short description:

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

Short description:

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.

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
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.
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 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.
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
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
Top Content
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.