Deep Dive into Redux Toolkit with React - Complete Guide

In this video we will take a comprehensive view into Redux Toolkit (RTK) - the official way of setting up a redux application. We will look into all the features it comes with, go over the various functions it comes included with, and we will also set up a simple redux application in React in both the traditional way and also the redux toolkit way to compare.

⚠️ Corrections:
- At 3:12:43 I compare the bundle size of Redux and Redux Toolkit using npm page's "Unpacked Size" number. This is misleading because this size includes all parts of the package, including dev-only packages. A better measure to compare the actual size of the package that will impact your code is using Bundlephobia. According to Bundlephobia, the size of redux-toolkit (as of version 1.2.5) is 29.8kb, whereas redux is at 7.3kb. While RTK is still bigger, it is no way as big as I show in the video. Not only that, the redux team + immer team is still hard at work to better tree-shaking within the Immer library, so we will most definitely see a decrease in this size in the near future

🕒 Timestamps:

Intro:
0:30 Quick overview on Redux Toolkit
2:42 Video roadmap
4:50 Pre-requisites
6:35 What are the packages included in RTK?
14:13 What is Immer (And Immutable Update Patterns)?
19:40 Quick overview of the functions in RTK
34:22 How to install RTK into our apps

CodeAlong:
37:48 Get your starter code!
46:00 Old Redux Setup Begins
48:01 Visual Model of our app
51:50 (Old) Creating our action type constants
53:26 (Old) Creating our action creators
1:05:09 (Old) Creating our reducers
1:18:52 (Old) Setting up our redux store
1:25:21 (Old/RTK) Connecting our functional component with Redux
1:40:02 New RTK setup begins
1:43:02 (RTK) Creating our slices via createSlice
2:12:24 (RTK) Setting up our store via configureStore
2:27:48 Comparing old code vs RTK code

Going over RTK Functions:
2:29:53 configureStore() and getDefaultMiddleware()
2:36:09 createSlice()
2:45:05 Immutable Update logic vs Immer logic comparison
2:49:43 Pitfalls of Immer to watch out for
2:57:03 createAction()
3:02:01 createReducer()
3:04:43 other RTK functions

Q&A & Summary:
3:05:49 How do we handle async logic using RTK???
3:12:43 How big is the package compared to redux?
3:14:02 Didn't useContext and useReducer kill off redux?
3:14:51 Summary

🗄 Resources:

🔑 Key Concepts:

- Redux Toolkit (RTK)
- React
- Typescript
- Immer
- configureStore
- createSlice

#ReduxToolkit #Redux #React #Typescript

[AngleCoding]

🕒 Timestamps:


Intro:
0:30 - Quick overview on Redux Toolkit
2:42 - Video roadmap
4:50 - Pre-requisites
6:35 - What are the packages included in RTK?
14:13 - What is Immer (And Immutable Update Patterns)?
19:40 - Quick overview of the functions in RTK
34:22 - How to install RTK into our apps

CodeAlong:
37:48 - Get your starter code!
46:00 - Old Redux Setup Begins
48:01 - Visual Model of our app
51:50 - (Old) Creating our action type constants
53:26 - (Old) Creating our action creators
1:05:09 - (Old) Creating our reducers
1:18:52 - (Old) Setting up our redux store
1:25:21 - (Old/RTK) Connecting our functional component with Redux
1:40:02 - New RTK setup begins
1:43:02 - (RTK) Creating our slices via createSlice
2:12:24 - (RTK) Setting up our store via configureStore
2:27:48 - Comparing old code vs RTK code

Going over RTK Functions:
2:29:53 - configureStore() and getDefaultMiddleware()
2:36:09 - createSlice()
2:45:05 - Immutable Update logic vs Immer logic comparison
2:49:43 - Pitfalls of Immer to watch out for
2:57:03 - createAction()
3:02:01 - createReducer()
3:04:43 - other RTK functions

Q&A & Summary:
3:05:49 - How do we handle async logic using RTK???
3:12:43 - How big is the package compared to redux?
3:14:02 - Didn't useContext and useReducer kill off redux?
3:14:51 - Summary

[nikitarudenko]

I was bored reading RTK docs and luckily stumbled upon this GEM 😀 The quality of this tutorial is very high: consistent explanation, comparison with the old way, a detailed overview of the API, links to the corresponding articles, timestamps... I'm excited and surprised!

Subscribed and looking forward to new videos while watching your older tutorials 😃
Keep up the good work 👏👏👏

[Lindaine]

This video honestly, is the best redux tutorial I've seen so far. Some of the yt tutorials I've seen is not worth to watch because the documentation is better but this video is not one of them.

[nematjonabdulloev]

I have read the documentation, but since there was no complete picture I couldn't wrap all in my head. Your tutorial helped me to learn more deeply.

[amirmohamadbashiri]

I gotta say when searched for redux toolkit, I didn't expect something as awesome as this

[alinedealmeidaribeiro]

Thank you so much for this video. I have just started a job as a full stack dev, and I have been looking for resources to learn RTK. You have no idea how much you have helped this jr dev here :) Thank you!!!!

[Shakeel]

In my humble opinion, this is the best and the most comprehensive tutorial to learn redux-toolkit. You are so cool teacher, Justin Kim! Thanks a lot.

[profile]

One of the best Redux Toolkit explanations out there! Great video!

[sanjaygalami]

You know what, I had just heard about redux toolkit by senior, and really wanted to learn about it.... and now here you are with such a great and with pretty good explanation. and this is the first content from your channel I ever watch and I really appreciate your hard work on the content... anyway thanks a lot. Keep learn and keep sharing the knowledge u learned.

[serhatuyanmis]

So cool that he has added notes and better practices after finishing recording. You are the man!

[buzzebee]

Really useful! I've been using redux for a few years. The RTK docs were information overload, this video really helped me grasp the benefits of RTK. Putting together the slices and seeing the difference between the traditional redux approach and how much simpler the RTK method is was mind blowing. I'll definitely be using this in projects going forward. Thanks so much!

[jtrxiooi]

You are a funny guy with such talent in providing tutorials. Thanks a lot, I am having fun learning redux toolkit.

[nandukishore]

If you were a team lead or a senior SWE, then your team or the new recruits would be very lucky to have you, watching their back. You explain concepts so nicely, patiently and it would be great working under you.

[garethparry]

This is so, so good. Thank you! Very comprehensive, and it's great you did this all in Typescript by default so I don't have to keep thinking "Okay, but how do I type this?" the whole way through.

[MurphyIsMyLastName]

Haven't watched the video yet--I'm sure it's great. I already want to thank you for uploading in 1440p despite the 3hr+ runtime.

[MinjunKim]

Awesome! I always have thought that using redux-toolkit without redux would also be a great idea and somebody should share that technique. Thank you for making this video! 👏👏👏

[mnox]

This tutorial is AMAZING! Very helpful roadmap in the beginning, adequate examples for demonstrating key topics, informative recap, insightful Q&A, and a bonus summary. Thank you for making this! Well rounded and efficiently delivered! The timestamps in the comments is the cherry on top.

[IrfanullahJan]

The best redux/redux-toolkit tutorial I could find, thank you!

[kamikozzz]

Thanks a lot from Russia. I was reading RTK & Redux for the first time. It was hard for me to reach further than Basic Tutorial... and I didn't make it :D
Fortunately, I gave the 2nd chance to this "task" and found out this 3-hours tutorial with all of the stuff I need: TS, before RTK, RTK now

Good luck maestro!

[shaznanfairoze]

came here with existing RTK knowledge and learnt a lot more from this, thank you so much!