🕒 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
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 👏👏👏
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.
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!!!!
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.
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!
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.
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!
Quick note at 3:12:43 - How big is the package compared to redux? Here is a quote from Mark, one of the maintainers of Redux: You showed that the "Unzipped" sizes are like 163K for Redux, and 700K for RTK. I think that NPM's "Unpacked size" stat is actually the size of the entire .tgz package file, unzipped. That package includes all of the different forms of the library, including dev/prod CommonJS, ESM, UMD, original source, and other files. That's not at all the size of actually using the package. As an example, you can see the current file sizes in the /dist folder in the published version of RTK 1.2.5. redux-toolkit.esm.js is 14.2K, unminified. If you look at the Bundlephobia stats for RTK 1.2.5, you can see that the total size of using RTK is about 30K minified, but that includes Immer and Redux as well, because they're dependencies. (Note that RTK 1.3 alpha has several improvements on bundle size, and also tree-shakes better.) Overall, the actual features in RTK do add a bit more size just because it's additional code, but most of the bundle size comes from things you'd already be using anyway (especially Redux and Immer), and RTK's features should simplify your own code enough that it's a net improvement in bundle size.
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.
Earlier I didn't like working with Redux until a high requirement is there due to the requirement of a lot of redundant code for setting it up and then managing it. But working with RTK seems an awesome way to work with Redux system. Thank you @Justin for creating such an awesome tutorial. 3 hrs well spent.
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.
At 2:20:51, if you face error different from the error shown in the video, you need to update the typescript version. Run the command npm i typescript@latest to update your typescript
Thank you so so much Justin. I was really struggling with redux toolkit. I had a urgent requirement to be built in redux toolkit and your video was really helpful and to the point in explaining the toolkit. The comparison really helped me. Looking forward for more of your videos. I would like to request you to put videos on Middlewares.
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! 👏👏👏
This was an amazing tutorial. First of all it is pretty clear, this tutorial focused redux and redux-toolkits side by side comparison even though using react and typescript. Secondly the narrator ( author ) making same mistakes which we can do. I know They were a real mistake but I loved it to see my mistakes too. In short this tutorial mainly focused on redux and redux toolkit. And did that job pretty good. Thank you.
Thank you for this. Really struggling with redux and typescript. Nice to see this in depth comparison and have it as a reference. Everything well explained
Thank you so much for explaining RTK in such an understandable way. It really helped me to see the value in using this library. I really look forward to your createAsyncThunk video. keep up the good work!!
Awesome man you're given incredible explanation ❤️👌 love it finally well understood the redux native way. So just now stopped it I'll resume it to complete RTK asap. Thanks man❤️
That was a really good guide! Although I think it was better to split it into 2 videos instead of one, I can see you didn't do any more videos for the last 6 months so hope you are doing well and will be back soon with more great content, cheers!
This is awesome. Amongst every redux tutorial I've watched. It's good that you will have an idea on how to do vanilla react-redux since almost every company that uses redux prefers it than toolkit. I'll use RTK on my side projects. Thanks!
Excellent job, it is a pleasure that somebody put a lot effort making something, i really appreciate your dedication. god bless you, i enjoyed from the beginning to the end
Thanks for doing this tutorial, @Justin, it is great! I can't wait to see the "async" tutorial comes out, I just got stuck in a project because I still not sure how to do it in RTK. and I don't know TypeScript ...
Kelvin Liang thanks! I will try to have the async video out soon. Have you ever tried asking in the Reactiflux discord channel? A lot of people are very willing to help out there, so for now I would start there
Hey Justin, amazing tutorial. You have a knack for teaching. You knew your target audience well, that you're teaching experienced developers, but at the same time, there were certain points where you need to just slow down and give context. I felt like you went fast at the appropriate time and slow at the appropriate times. It was a worthwhile 3+ hours! I have a question about your setup. You're using useDispatch, and createSlice. I'm trying to access the global store within createSlice. I imagine this is not possible. So then my question is: How do I access the getState() within my action creator (so that I can access global store)?
Thank you for your tutorial , it is very helpful and insightful. You were saying that there is going to be a video about 'createAsyncThunk' is it coming up soon?
Well, so many Redux React tutorials, but almost no rounded RTK end-to-end project there. This tutorial is the first complete and side-by-side comparison with RTK tutorial. Typescript/RTK makes it even super.
Might be a stupid question, but how does the TS know inside the todosReducer, that each action has that certain payload? I cannot see the connection between case TOGGLE_TODO and that string 'TOGGLE_TODO' giving me any reference to the ToggleTodoActionType, but TS somehow understands that it is...
I do have a video in the backlog I want to make for selectors, but here are two resources: alexnitta.com/understanding-reselect-and-re-reselect/ redux.js.org/recipes/computing-derived-data
🕒 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
Please, put these timemarks in the video description to make youtube automatically mark sections in your video
Correct, this should be added to the video's description
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 👏👏👏
I hate docs
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.
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.
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.
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!!!!
I gotta say when searched for redux toolkit, I didn't expect something as awesome as this
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.
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!
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.
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!
Quick note at 3:12:43 - How big is the package compared to redux? Here is a quote from Mark, one of the maintainers of Redux:
You showed that the "Unzipped" sizes are like 163K for Redux, and 700K for RTK. I think that NPM's "Unpacked size" stat is actually the size of the entire .tgz package file, unzipped. That package includes all of the different forms of the library, including dev/prod CommonJS, ESM, UMD, original source, and other files. That's not at all the size of actually using the package.
As an example, you can see the current file sizes in the /dist folder in the published version of RTK 1.2.5. redux-toolkit.esm.js is 14.2K, unminified.
If you look at the Bundlephobia stats for RTK 1.2.5, you can see that the total size of using RTK is about 30K minified, but that includes Immer and Redux as well, because they're dependencies. (Note that RTK 1.3 alpha has several improvements on bundle size, and also tree-shakes better.)
Overall, the actual features in RTK do add a bit more size just because it's additional code, but most of the bundle size comes from things you'd already be using anyway (especially Redux and Immer), and RTK's features should simplify your own code enough that it's a net improvement in bundle size.
You are a funny guy with such talent in providing tutorials. Thanks a lot, I am having fun learning redux toolkit.
So cool that he has added notes and better practices after finishing recording. You are the man!
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.
One of the best Redux Toolkit explanations out there! Great video!
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.
Earlier I didn't like working with Redux until a high requirement is there due to the requirement of a lot of redundant code for setting it up and then managing it. But working with RTK seems an awesome way to work with Redux system. Thank you @Justin for creating such an awesome tutorial. 3 hrs well spent.
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.
At 2:20:51, if you face error different from the error shown in the video, you need to update the typescript version. Run the command npm i typescript@latest to update your typescript
came here with existing RTK knowledge and learnt a lot more from this, thank you so much!
Thank you so so much Justin.
I was really struggling with redux toolkit. I had a urgent requirement to be built in redux toolkit and your video was really helpful and to the point in explaining the toolkit.
The comparison really helped me. Looking forward for more of your videos.
I would like to request you to put videos on Middlewares.
Awesome work Justin. Clear and comprehensive.
The best redux/redux-toolkit tutorial I could find, thank you!
The quality of this video is really good. Please make one using 'createAsyncThunk' whenever you have the time. Thanks a lot for this video!
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! 👏👏👏
진짜가 나타났다 ㅋㅋ 리디 홈페이지에 리덕스 툴킷에 대해 쓰신 글을 보고 배우려고 찾은 튜토리얼에서 이렇게 만나네요 😊😊
Good tutorial. High quality of content, and explanation. Example given in tutorial are pretty comprehensive and practical. Good job.
This was an amazing tutorial.
First of all it is pretty clear, this tutorial focused redux and redux-toolkits side by side comparison even though using react and typescript.
Secondly the narrator ( author ) making same mistakes which we can do. I know They were a real mistake but I loved it to see my mistakes too.
In short this tutorial mainly focused on redux and redux toolkit. And did that job pretty good.
Thank you.
Walking through the docs + watching this makes it more clear. Thank you sir!
just loved the way you're explaining
Thank you for this. Really struggling with redux and typescript. Nice to see this in depth comparison and have it as a reference. Everything well explained
Nice explanation. Any update on createAsyncThunk video ?
Thank you so much for explaining RTK in such an understandable way. It really helped me to see the value in using this library. I really look forward to your createAsyncThunk video. keep up the good work!!
Thanks a lot for this comprehensive migration guide. This is exactly what I needed.
What an amazing tutorial.
Thank you for that!
Initially, I thought you we chanting some mantra when you said QUOTE-UNQUOTE XD
Great tutorial man thanks
2:53:00 im confuse, that's the example that RTK gives you when you install the CRA RTK template and ir works.
Hi Justin,
Thank you for the comprehensive tutorial!
I have been looking for a tutorial on Redux toolkit and thank you 🙏 such a great one! Very helpful
really enjoyed your video from start to end. thanks dude
Thank you so much for such a comprehensive and on to the point course
Awesome man you're given incredible explanation ❤️👌 love it finally well understood the redux native way. So just now stopped it I'll resume it to complete RTK asap. Thanks man❤️
you should add a patreon link in your description. you did lots of hard work. many people definitely would like to award you.
The best ever lesson about redux toolkit, thank you bro ))
Thank you very much, you’re explaining everything excellent! 2x speed, and got it all 🤘🏻
Great tutorial, thank you so much for your effort! This video is so well thought out, was a pleasure to follow along!
This video is a gem. Thank you!
very good. Thks. Will try to apply it in a react-native apps
Thank you Justin! This will help me a lot in my following work task. Looking forward to see video about Selectors (reselect) in redux toolkit
That was a really good guide! Although I think it was better to split it into 2 videos instead of one,
I can see you didn't do any more videos for the last 6 months so hope you are doing well and will be back soon with more great content, cheers!
Thanks Justin. This lecture is awesome.
This is awesome. Amongst every redux tutorial I've watched. It's good that you will have an idea on how to do vanilla react-redux since almost every company that uses redux prefers it than toolkit. I'll use RTK on my side projects. Thanks!
Excellent job, it is a pleasure that somebody put a lot effort making something, i really appreciate your dedication. god bless you, i enjoyed from the beginning to the end
I would do a quick follow up using thunk
On 1:00:00 What is that syntax called in TypeScript? I’m not sure what it does.
Great tutorial, Justin. Are you still planning to make tutorial about createAsyncThunk?
Great video. Looking forward to new content. Thank you.
Very good video, thanks :) Greetings from Portugal!
This was thorough sir. Thank you
Counter reducer
1:15:50 old
2:07:40 new
Give this man a BELLS... you just saved me from depreciation...
You helped me grasp the basics , thank you!
Thanks for doing this tutorial, @Justin, it is great! I can't wait to see the "async" tutorial comes out, I just got stuck in a project because I still not sure how to do it in RTK. and I don't know TypeScript ...
Kelvin Liang thanks! I will try to have the async video out soon. Have you ever tried asking in the Reactiflux discord channel? A lot of people are very willing to help out there, so for now I would start there
@@AngleCoding , Thanks for pointing that out, I will take a look at it. 👍❤️
Absolutely Brilliant Tutorial,
God bless you for this free powerful content!
THANK YOU so much for all the effort you have put on to prepare the video. You saved lot of hours for me. Thanks again..!!
Great video thus far thanks so much love the way you explain and show docs and examples just everything thanks!
Thanks a lot!
Which IDE's theme is used in this tutorial?
Thank you! keep uploading more videos!!
Awesome tutorial. Thanks a lot!
this video deserves more views
HI Justin, Did you create tutorial on createAsyncThunk API from redux/toolkit /
So grateful for this, thank you! Love the thoroughness. Hope to see more 🔥 from you!
Awesome video, thanks a lot for your effort!
Hey Justin, amazing tutorial. You have a knack for teaching. You knew your target audience well, that you're teaching experienced developers, but at the same time, there were certain points where you need to just slow down and give context. I felt like you went fast at the appropriate time and slow at the appropriate times. It was a worthwhile 3+ hours!
I have a question about your setup. You're using useDispatch, and createSlice.
I'm trying to access the global store within createSlice. I imagine this is not possible. So then my question is:
How do I access the getState() within my action creator (so that I can access global store)?
This is very fantastic and awesome that saved a lot of time for me. Thank you for your time and considerations.
What a explanation !!!! hats off
It's a pity we cannot press many likes here like in medium website!!!
Thank you so match!
Amazing tutorial! Thank you very much! 💛
Thank you so much for this tutorial, I love you man!!!!
Спасибо за проделанную работу!
Thank you for your tutorial , it is very helpful and insightful. You were saying that there is going to be a video about 'createAsyncThunk' is it coming up soon?
Thank you very much for this awesome video!!🍉
excellent context. just subscribed.
How can share/pass state between the reducers ? is the extraReducers help with that ?
Great...really f******** great tutorial of rtk with typescript and react
Nice explanations. If you released a Redux Toolkit for Beginners' series it could get popular. I'd definitely watch it.
Thanks. I do have that in my backlog. Please stay tuned!
Well, so many Redux React tutorials, but almost no rounded RTK end-to-end project there. This tutorial is the first complete and side-by-side comparison with RTK tutorial. Typescript/RTK makes it even super.
Might be a stupid question, but how does the TS know inside the todosReducer, that each action has that certain payload? I cannot see the connection between case TOGGLE_TODO and that string 'TOGGLE_TODO' giving me any reference to the ToggleTodoActionType, but TS somehow understands that it is...
Thanks for detailed video.
Thanks for this, valuable from head to toe.
Thank you, definitely helps a lot.
Async + RTK please!
Thank you for this video, it is really great. Subscribed and liked!
Hey Justin, Thanks for making this. Could you please share some good articles/tutorials for selectors?
I do have a video in the backlog I want to make for selectors, but here are two resources:
alexnitta.com/understanding-reselect-and-re-reselect/
redux.js.org/recipes/computing-derived-data
@@AngleCoding Thanks a lot.
May we supported to write interfaces inside the "switch case" due to block some code repeating?
I was looking for this video
Hello Kim, Which font are you using? and the settings for the respective font?
thanks for the vid!! 👍👍👍
Did you ever release the video about createAsyncThunk?
Well done Justin!