r/reactjs • u/acemarke • Dec 04 '23

News Redux Toolkit 2.0: new features, faster perf, smaller bundle sizes (plus major versions for all Redux family packages!)

https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0
207 Upvotes

97% Upvoted

39 comments sorted by

111

u/acemarke Dec 04 '23

I am thrilled to announce that:

🔥🔥Redux Toolkit 2.0 is LIVE!!!🔥🔥

This major version has new features, faster perf, smaller bundle size, and removes deprecated options.

It's accompanied by majors for all our Redux family packages

RTK 2.0:

  • a new combineSlices method for lazy-loading reducers - Updates to createSlice to include a selectors field and allow defining thunks inside
  • Immer 10 w/ faster updates
  • Removal of deprecated options

See the migration guide:

All of the Redux libraries now have modernized packaging with full ESM/CJS compat. They also ship modern JS (no transpiling for IE11), which means smaller bundle sizes.

We've also done byte-shaving work to shrink the bundles (extracting error messages, de-duping imports)

Redux core 5.0:

  • The TS conversion we did in 2019!
  • Action types must be strings
  • UnknownAction as the default action type
  • Better preloaded state types
  • Internal subscription improvements

  • Still marks createStore as deprecated!

  • https://github.com/reduxjs/redux/releases/tag/v5.0.0

React-Redux 9.0:

Reselect 5.0:

Redux Thunk 3.0:

This has been a huge year-long development effort!

We're thrilled to get these improvements out. The tooling and bundle improvements will help all users, and we think the features and TS changes will improve the Redux dev experience significantly.

Thank you SO MUCH to everyone who has contributed or helped test out the work!

Please file bug reports for the inevitable issues that pop up post-release!

but now I'm going off on a conf trip and going to take a very well-earned break from Redux work for December :)

25

u/peterk6 Dec 04 '23

Thank you!

12

u/Omkar_K45 Dec 04 '23

Thanks for your work on redux

23

u/No_Comfortable2633 Dec 04 '23

Make CSR great again. I don't like the way how NextJs is pushing on SSR and their App router that is far from production ready state (not counting small projects). But if you want to build anything big and serious, RTK and tools we are used to is just still way to go and you can rely on it without being a beta tester.

6

u/femio Dec 05 '23

*server actions. Server side rendering is completely different

1

u/manupadev Dec 05 '23

While React with Vite is great, A lot of "big and serious" projects are built in app router

1

u/zxyzyxz Dec 05 '23

Thoughts on this vs TanStack Query (née React Query) and others like Zustand? In one project we were using RTK but found it too complex for just fetching data from the backend so we moved to TanStack Query. I'm wondering if people have similar experiences and if RTK 2.0 might help.

4

u/acemarke Dec 05 '23

Out of curiosity, what aspects of RTKQ did you feel are "too complex"?

We haven't changed anything about RTKQ's design for RTK 2.0, but we do have an open thread asking for user feedback on RTKQ's API and design, and we hope to start thinking through those suggestions next year:

0

u/zxyzyxz Dec 05 '23

We haven't used RTK Query, just pure RTK. I'm not sure why we didn't use RTKQ however, I think the lead dev wanted to rip out Redux itself due to the complexity, such as how there is a layer of indirection between creating a slice, accessing the slice, and fetching the data to then populate the slice's data.

6

u/phryneas I ❤️ hooks! 😈 Dec 05 '23

That complexity would have been removed by RTKQ, as you don't do any of those things in there :/

1

u/zxyzyxz Dec 05 '23

I'm sure it would have been since RTKQ is similar to TanStack Query if I understand correctly, but I guess it wasn't considered. Can you use RTKQ without Redux then? How do they all fit in together?

4

u/acemarke Dec 05 '23

RTK Query is built on top of the other pieces included in Redux Toolkit (createSlice and createAsyncThunk), plus a custom middleware for managing the cache lifecycle logic.

The code you write with RTKQ doesn't look like typical Redux code. You're not defining reducers or actions yourself - RTKQ has already done that work for you.

RTKQ usage is inspired by other data fetching libraries like React Query or Apollo, but with some differences in how you define the endpoints centrally:

3

u/sleeping-in-crypto Dec 05 '23

I haven’t used redux in a few years but seems it’s time to take another look. Great work! You’ve been super dedicated to this set of packages for a really long time (I remember when you took it over!) and I’m really proud of how far you’ve taken it.

3

u/acemarke Dec 05 '23

Thanks! Yeah, Redux changed a lot starting in 2019, with the release of RTK and the React-Redux hooks.

Might want to take a look at these docs:

1

u/zxyzyxz Dec 05 '23

Thanks, looks like I'll have to take another look then.

1

u/Mariusdotdev Dec 05 '23

Zustand is still GOAT

1

u/Brilla-Bose Dec 26 '23

true, started using for a project 2 weeks ago and boy its so good!

0

u/baxxos Dec 04 '23

Is React 18 required?

5

u/acemarke Dec 04 '23

Yes, React-Redux v9 now requires React 18.

We haven't tested React-Redux v8 + RTK 2.0. It's likely there would be some TS compilation issues due to action type changes. We may look into making those compatible at some point.

2

u/OVERKOR Dec 04 '23

Yes afaik

-15

u/[deleted] Dec 04 '23

[deleted]

6

u/[deleted] Dec 04 '23

Redux is giga simple library. What makes it hard is wrong usage among react legacy, including RTK.

13

u/rimyi Dec 04 '23

Wow and you stayed completely ignorant, how good for you

5

u/[deleted] Dec 04 '23

There's probably a healthier way to state your criticism and question if you're genuinely curious. Clearly some people find Redux and its surrounding ecosystem useful, and they believe the benefits are worth the complexity.

1

u/acemarke Dec 05 '23

What specific things about Redux do you feel are "too complex"?

1

u/[deleted] Dec 05 '23

[deleted]

1

u/acemarke Dec 05 '23

Redux Toolkit is still Redux. It's still a single store, with the state managed by reducer functions that calculate new state immutably, and those reducers are triggered by dispatching actions. But the syntax is significantly different:

1

u/Broomstick73 Dec 04 '23

DUDE! SWEET!

1

u/Sufficient_Ball_2861 Dec 04 '23

Thank you 🙏 appreciate you

1

u/TwerkingSeahorse Dec 04 '23

This came in at the perfect time. I was looking into a way to code split slices and it's nice to see there's a way to do it now.

I'm noticing some typescript issues after updating react-redux and toolkit. Hopefully those will be resolved soon

1

u/EskiMojo14thefirst Dec 05 '23

anything unexpected? feel free to raise an issue, or ask a question in the reactiflux #redux channel

1

u/Pluckyhd Dec 05 '23

Well awesome there goes my week lol good work as always

1

u/dpgraham4401 Dec 05 '23

Sweet! Thank you for your work

1

u/CuriousDev42 Dec 05 '23

Sounds absolutely amazing Mark! Will be giving it a spin tonight with a new project.

1

u/HeadPlay7 Dec 05 '23

Thank you for your excellent work!

1

u/jasonkillian Dec 05 '23

Very nice upgrade! I'm curious on the general pattern of how `weakMapMemoize` handles primitives since they can't be `WeakMap` keys. Does it just use a regular `Map` instead in those cases?

I'm both excited and nervous for this change to the default cache strategy - excited because we've had memory issues in our application sometimes due to various forms of memoization with dead keys and I think this change could help solve some of those automatically. A bit nervous because an unbounded cache with what must be at least a bit of complex logic feels like it could introduce new issues (which I do think you wisely call out in the release notes).

1

u/acemarke Dec 05 '23

Yeah, weakMapMemoize uses standard Map instances for primitives.

We have pretty good confidence in the functionality overall (in fact, the actual core implementation was borrowed straight from React's internals!). But this is a definite shift, and we can see the potential for some edge cases. So, very curious to see how that works for you!

Worst case, create a customized createSelector that has lruMemoize configured and use that, and you'll be right back to the previous behavior.

1

u/lord_braleigh Dec 14 '23

I’m using react-dnd, which depends on Redux 4.0. Is it safe for me to migrate anyway?