Log in
React Conferences
React Day Berlin 2023React Day Berlin 2023
EN

What's New in Redux Toolkit 2.0

Mark Erikson
Mark Erikson
Replay.io

Redux Toolkit 2.0 is here! Find out what's changedand why, the work that's gone into repackaging the Redux libraries, an overview of new features and breaking changes, and a look at future plans.

Rate this content
Bookmark
Watch video on a separate page
state management
Video Summary and Transcription
Redux Toolkit 2.0 offers new features to simplify Redux logic. It includes RTK Query for efficient data fetching and introduces the combineSlices feature for lazy loading reducers. This version aims to improve ES module and CommonJS compatibility, which has been challenging due to differences in build configurations. The release also modernizes JavaScript build artifacts and updates TypeScript types for better support. The Redux core was converted to TypeScript in 2019 but wasn't shipped, requiring packaging updates and some type upgrades. Despite these challenges, the transition to Redux Toolkit 2.0 should be straightforward for most users, with migration guides available.
Available in Español: ¿Qué hay de nuevo en Redux Toolkit 2.0?

FAQ

Redux Toolkit 2.0 is the latest version of Redux Toolkit, a library that simplifies standard Redux patterns like creating stores, writing reducers, and data fetching. It includes new features, modernized JavaScript build artifacts, and updated TypeScript types.

Redux Toolkit 2.0 includes features such as combineSlices for lazy loading reducers, the ability to define selectors and thunks inside the createSlice API, and integration of the latest version of the EMER immutable update library.

Redux Toolkit 2.0 was released to modernize JavaScript build artifacts, improve ES module and common JS compatibility, add new features, remove deprecated APIs, and update TypeScript types for better type safety and user experience.

The major breaking changes include the removal of object syntax in methods like createSlice and createReducer, which is replaced by a callback syntax for better TypeScript support, and the dropping of UMD build artifacts. Most breaking changes are related to TypeScript improvements.

RTK Query is a sub-piece of Redux Toolkit specifically designed to simplify data fetching in Redux applications. It wraps around the Redux core APIs and aims to make data fetching more efficient and easier to manage.

RTK 1.0 was released in October 2019.

The goals of Redux Toolkit 2.0 include correct ES module and common JS compatibility, modernizing JavaScript build artifacts, adding new features, removing deprecated APIs, and shipping updated TypeScript types.

UMD build artifacts were dropped because very few people use them, and they are mostly used for simple use cases like a code pen script. The focus is on modern JavaScript, and users needing IE11 support should handle the compiling themselves.

combineSlices is a new feature in Redux Toolkit 2.0 that allows for lazy loading of reducers in a Redux application, enabling code splitting and dynamic reducer injection.

New documentation for using Redux with Next.js and a migration guide for upgrading to Redux Toolkit 2.0 are available to help users transition smoothly and take advantage of the new features.

1. Introduction to Redux Toolkit 2.0#

Short description:

My name is Mark Erickson and I'm excited to talk about what's new in Redux Toolkit 2.0. Redux Toolkit simplifies Redux logic and includes RTK query for data fetching. We released RTK 1.0 in 2019 and are now working on RTK 2.0, which aims to improve compatibility and add new features. However, the ESM common JS compatibility has been challenging and I've written a blog post about it.

All right, good afternoon. My name is Mark Erickson, and today I am very excited to talk to you about what's new in Redux Toolkit 2.0.

A couple quick things about myself. I am a senior front-end engineer at Replay, where we are building a true time-traveling debugger for JavaScript. We've got a booth out there in the lobby. If you haven't seen it yet, please come by. We'd love to show you how much easier it makes debugging applications.

I will answer questions anywhere there is a text box on the internet. I collect all kinds of interesting links. I write ridiculously long blog posts. I am a Redux maintainer, but most people know me as that guy with the Simpsons avatar. I know. Sometimes I wear a name tag just so people recognize me.

Redux Toolkit is the standard way to write Redux logic today. It provides methods to simplify standard Redux patterns, like creating stores, writing reducers, funcs, and even data fetching. It includes a sub-piece called RTK query, which is specifically meant to simplify data fetching in Redux apps, and it wraps around the Redux core APIs.

We released RTK 1.0 in October 2019, which if you think about it means it's been around half as long as the original Redux library, and yet, many people don't know about it. The latest version has been RTK 1.9. We shipped 1.9 a year ago. The latest patch release was 1.9.7.

At the start of this year, we began work for RTK 2.0, and we had a few different goals. The first is correct ES module common JS compatibility, whatever that actually means. We wanted to modernize the JavaScript build artifacts so that they use modern syntax, no longer targeting IE 11. We wanted to add some new features, remove some deprecated APIs, and we wanted to ship some updated TypeScript types along with the packaging.

Now, unfortunately, it turns out that this whole ESM common JS thing is really, really hard. I went through multiple rounds of iteration where I tried to change some settings, tried to change some build configuration, and multiple tools would not work right. It turns out that the package exports field is really complex, but the bigger issue is that every different build tool has their own idea of how they interpret these things. I was actually messing with this in the speaker's room an hour ago. It's not done yet. I actually ended up writing a very long blog post a few months ago, talking about the pain and suffering that I've dealt with trying to get this stuff to work.

2. Shipping Major Versions and TypeScript Upgrades#

Short description:

The plan was to ship major versions of RTK, Redux core, Reselect, and React Redux together. The Redux core was converted to TypeScript in 2019 but never shipped. All packages require packaging updates and some TypeScript type upgrades.

I talked about it on a couple podcasts as well. Now, the original plan was just to ship major versions of RTK and the Redux core. Then we realized that we actually probably needed to ship major versions of all the other libraries like Reselect and React Redux as well. The Redux core actually got converted to TypeScript in 2019, and then we never actually shipped it because version 4 was good enough and we were worried about breakage. We decided that all these packages need to get shipped, new major versions together. They all need the same packaging updates with a couple slight variations, and we were going to try and do some work to upgrade some of the TypeScript types and some of the exports that we were defining.

Table Of Contents

1. Introduction to Redux Toolkit 2.02. Shipping Major Versions and TypeScript Upgrades
Mark Erikson
Mark Erikson
8 min
08 Dec, 2023

Comments

Sign in or register to post your comment.
Available in other languages:

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
Eduardo San Martin Morote
Eduardo San Martin Morote
Vue.js Core Team
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.
vuepinia reactstate management
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
David Khourshid
David Khourshid
Stately
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.
reactstate managementreact hook missing dependencybest practices
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
Tanner Linsley
Tanner Linsley
Nozzle.io
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.
react querystate managementreact global statereact state management
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Daishi Kato
Daishi Kato
Zustand, Jotai & Waku author
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.
jotai react nativebuilders and foundersstate managementweb developmentjotai react
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Yehuda Katz
Yehuda Katz
Tilde, Inc., USA
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.
state managementframeworks
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
Dominik Dorfmeister
Dominik Dorfmeister
Adverity
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
react querypatternsreactbuilders and foundersstate managementthinking in reactreact state managementreact query best practicesreact query cachingreact query dependent queries

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.
react queryreactstate managementserver state reactreact state management
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.
react hooksreactstate management