Log in
React Day Berlin 2023React Day Berlin 2023
talks

What's New in Redux Toolkit 2.0

Mark Erikson
Mark Erikson
Replay.io
Rate this content
Bookmark

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.

state management
8 min
08 Dec, 2023

Video Summary and Transcription

Mark Erickson discusses the new features in Redux Toolkit 2.0, including the simplification of Redux logic and the addition of RTK query for data fetching. He mentions the challenges of achieving ESM common JS compatibility and refers to a blog post he wrote about it. The plan to ship major versions of RTK, Redux core, Reselect, and React Redux together is discussed, with a focus on the conversion of Redux core to TypeScript and the need for packaging updates and TypeScript type upgrades.

Available in Español

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.

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.
state managementvue
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.
state managementreactbest practices
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.
state managementreact query
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
web developmentstate managementbuilders and founders
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.
state managementframeworks
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
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.
state managementpatternsreactreact querybuilders and founders

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.
state managementreactreact 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.
state managementreact hooksreact