Modern Redux With Redux Toolkit

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.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Redux Toolkit 2.0 is an update to the original Redux Toolkit, which aims to modernize JavaScript build outputs, improve ES Module Common JS Compatibility, remove outdated APIs, and update versions of Redux core and React Redux with better TypeScript types and packaging.

Redux Toolkit 2.0 introduces a combined Slices API for dynamically injecting reducers, the ability to define selectors inside of create slice, default batching of Redux updates in configure store, dev mode checks in Reselect, and includes the latest version of Emmer for improved performance and smaller bundle sizes.

The breaking changes in RTK 2.0 include removal of an object syntax in Create Slice and Create Reducer, replacement of the AnyAction type with an UnknownAction type for better type safety, and discontinuation of UMD build artifacts.

The official release of Redux Toolkit 2.0 is expected soon, potentially by the first week of December. The toolkit is currently in its beta4 version and is considered feature complete but is still undergoing final reviews and adjustments.

Developers are encouraged to try out the RTK 2.0 beta and React Redux version 9 beta, and provide feedback on the upgrade process, any bugs or issues, and the effectiveness of new features via forums, GitHub, or direct communication with the development team.

UMD build artifacts are no longer shipped with Redux Toolkit 2.0. Developers who still need them are advised to contact the Redux Toolkit team with their specific use cases to discuss possible solutions or alternatives.

Mark Erickson is a Redux maintainer and the creator of Redux Toolkit. He is also a senior front-end engineer at Replay, involved in building a time-traveling debugger for JavaScript.

Detailed information and updates about Redux Toolkit can be found on Mark Erickson's blog at blog.isquaredsoftware.com, where he posts updates, detailed explanations, and discussions related to Redux Toolkit and other related topics.

Mark Erikson
Mark Erikson
7 min
13 Nov, 2023

Comments

Sign in or register to post your comment.
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: Redux Moderno con Redux Toolkit

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.

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

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
React Query: It’s Time to Break up with your "Global State”!
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
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.
Why You Should Use Redux in 2024
React Summit 2024React Summit 2024
33 min
Why You Should Use Redux in 2024
Top Content
Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.

Workshops on related topic

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