After the introduction to Redux Toolkit in part one of this series, this deeper dive with an example project will help you become more familiar with the structure and data flow of Redux Toolkit. You will also learn some extras about why creating and exporting selectors is a good idea, what a prepare callback helps with, and what Immer.js is doing under the hood in the createSlice method. If you're just starting with Redux Toolkit, I recommend going to the beginning of this React Redux Toolkit tutorial series: th-cam.com/play/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo.html
Can you please make a video on SWR library? Axios is more robust solution as compare to Fetch API. But when using SWR, does it really matter if someone use Fetch API or axios for Fetcher function in SWR?
I had watched numerous tutorials, but my comprehension of Redux remained elusive until I encountered this specific tutorial during my research. I am pleased to affirm that I am now proficient in utilizing Redux independently, thanks to the insights gained from this tutorial.
Jesus. I remember watching your videos a few months ago (when starting to learn React) and having most of what you did go over my head (I knew it was some cool stuff going on, it was just a bit advanced for me at the time, so I "saved" your channel for later lol). Now that I'm comfortable with React, I find your code to be so elegant. Everything is sooo simple and easy to follow/understand, yet powerful, efficient, and reusable (from my perspective). Thank you for putting these out Dave. I'm excited to continue to learn from you. ✊✊
one of the best videos on redux if not the best ... i recommand watching a full course of redux than redux toolkit than react-redux and get here to apply what u learned ... 100% u will have 100% clear vision about redux
Awesome content about Redux, Dave! It's incredible that you can deliver such information in 40 minutes and as a novice in Redux, I'm able to understand it very well! Thank you again!
have watched many videos and have read many blog for understanding redux but I found you the best , one thing I really want to ask , your coding logics and performing functions are just wow, how some one can be this much good to write such coding patterns ?, like you are just complete different and perfect , and Thanks a lot for your effort🥰
@@anishkushwaha9973 he is using a library that generates random numbers called "nanoid", you can install it from npm and he's setting the id dynamically before saving the post in the prepare function 18:36 same with date and other info.
"remember to keep striving for progress over perfection, adna little progress everyday will go a very long way " I remember 3 months ago when I tried to learn from this tutorial. Then I do not even know useReducer / useContext hooks so I failed to do it. Todays is the day, where after 3 months I develop my own website and needed to implment redux to it. This tutorial is well explained, and I see that then I was just too earlie in that place. Most of my knowledge I took from yours tutorials Dave. Thank you
Thank you Dave for this amazing tutorial. I just can't imagine how much time and effort you put into making this video available for free. Massive thanks from me.
Hi Dave, Thanks for the amazing work and easy steps to follow. I have a request, could you please create a separate react hooks playlist? It would be much easier than scrolling down the react tutorials playlist to find the react hooks videos. Thanks a lot for all your work.
The only channel i found on youtube which tells how to manage all the logic and separate all features of a React App like old redux in new redux toolkit love u man 💖💖
this is a very helpful tutorial since i learnt legacy redux and i had some issues with undefined payload in the state. it was time for me to transfer to redux toolkit. so far, your steps are very clear.
DAVE Thank you friend for sharing... even though my ENGLISH IS AWFUL... but with the translator and your excellent explanation I'm understanding everything... You earned a new Spanish-speaking subscriber and thumbs up to all your videos,, Jose Grillo from Venezuela greets you..... ESPAÑOL Amigo gracias por compartir.... a pesar que mi INGLES ES PESIMO ... pero con el traductor y tu excelente explicacion voy entendiendo todo... Te ganaste un nuevo suscriptor de habla hispana y manito arriba a todos tus videos,, Te saluda Jose Grillo de Venezuela.....
@@DaveGrayTeachesCode jajaja gracias por contestar,,,,, estamos igual con mi INGLES... pero se te entiende para que mejores cuando dices" I comprende un pequeno" mejor di " YO comprendo un poquito" jejejejej Do you plan to continue making more videos of this series? TRADUCTOR GOOGLE hahaha thanks for answering,,,,, we are the same with my ENGLISH... but you are understood so that you get better when you say " I comprende un pequeno" better say "YO comprendo un poquito" hehehehe Do you plan to continue making more videos of this series?
Man you are a godsend, I love your content. Just a note, maybe edit the 7 videos title a little bit? It's not immediately evident that this is a series, or the order to watch these videos in
Nice one. I like how you are going away from super beginner react stuff! So often, once stuff gets more advanced, the tutorials are more vague and less helpful. Would love to see some DB fetching incorporated into your RTK setup.
Amazing Tutorial! 👏👏 Quick question: At 27:46, should useEffect() hook be used to track the dynamic variables and then assign to the 'canSave' variable?
Not necessary for this. All are state variables if I remember correctly. Any time one of them changes, a re-render will occur which will update the values used here.
Hey Dave, What a coincidence! This is what I exactly needed and every steps was so easy to grasp. By the way, how do we validate form data before storing it in Redux. It would be better if we get a video on doing that like a pro. Thanks for the great video.
The segment titled "Immer.js is active in createSlice" was really an "ah-ha" moment of the last few years of me trying to really understand where React and Redux were really trying to go. After working with React 18 and react-router-dom 6 I thought I might just be forever typing in what worked. That little bit on what redux toolkit offers that redux doesn't really brought it all together.
>< Redux is tough. I'm going to have to build this like 20 times to make it stick... Either way this it the most straight forward tut I have found. Thank you so much Dave. You just got another subscriber.
Hello Dave thanks to this amazing tutorial! I'm wondering though why you choose to disable the button manually instead of letting the browser prevent the form submission when inputs are empty, just like using the required attribute in the inputs?
Both work! One benefit of disabling the button manually with JS is that your submit button does not necessarily need to be within the form. Another is that the button is clearly disabled in the UI instead of letting the user click and then say the form cannot be submitted.
Hi Dave, You're Great! I was wondering, regarding 'canSave' at 27:45 would you have to type-convert all variables to Boolean, since it does that either way under the hood when you use logical operators ( && )? also, could you please explain why wouldn't we have to store 'canSave' as state?
Good questions, Daniel! In reverse order, we do not store 'canSave' as state because it is defined with every render of the component and based upon the title, content, and userId states. We do need to use Boolean() on these variables because we are setting 'canSave' to their value. We want them all to be true or it is false. We don't want 'canSave' to be equal to the title, content, or userId though. Perhaps in a conditional, we could say if (title && content && userId) // do something - but not in this case. I hope that helps! 🚀
Hi Dave, first of all, thanks for such an incredible content! Let me ask you somethin, which are the pros/cons of using unshift instead of creating a new ordered list, to displays the posts?
Unshift mutates array data in Javascript. Creating a new array is what I would usually do... but inside createSlice, Redux Toolkit uses ImmerJS. There is a link to more about ImmerJS in the description, but here is a link to the Redux docs explaining why they decided to use it: redux-toolkit.js.org/usage/immer-reducers#why-immer-is-built-in
After the introduction to Redux Toolkit in part one of this series, this deeper dive with an example project will help you become more familiar with the structure and data flow of Redux Toolkit. You will also learn some extras about why creating and exporting selectors is a good idea, what a prepare callback helps with, and what Immer.js is doing under the hood in the createSlice method. If you're just starting with Redux Toolkit, I recommend going to the beginning of this React Redux Toolkit tutorial series: th-cam.com/play/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo.html
Can you please make a video on SWR library?
Axios is more robust solution as compare to Fetch API. But when using SWR, does it really matter if someone use Fetch API or axios for Fetcher function in SWR?
Any plans to make a newer version of this tutorial or any app version using typescript with users and auth?
Trust me, this is so so much better than any of the other tutorials on redux toolkit that I found here on YT, Good job Dave!
Thank you!
very clear and concise
I had watched numerous tutorials, but my comprehension of Redux remained elusive until I encountered this specific tutorial during my research. I am pleased to affirm that I am now proficient in utilizing Redux independently, thanks to the insights gained from this tutorial.
Jesus. I remember watching your videos a few months ago (when starting to learn React) and having most of what you did go over my head (I knew it was some cool stuff going on, it was just a bit advanced for me at the time, so I "saved" your channel for later lol). Now that I'm comfortable with React, I find your code to be so elegant. Everything is sooo simple and easy to follow/understand, yet powerful, efficient, and reusable (from my perspective). Thank you for putting these out Dave. I'm excited to continue to learn from you. ✊✊
one of the best videos on redux if not the best ... i recommand watching a full course of redux than redux toolkit than react-redux and get here to apply what u learned ... 100% u will have 100% clear vision about redux
Please who are the people to dislike videos from this Man ? You people disliking incredible work like that hould stop !
13:55 Learned something new. Did not know about nanoid :) Great tutorials
Happy to help!
Awesome content about Redux, Dave! It's incredible that you can deliver such information in 40 minutes and as a novice in Redux, I'm able to understand it very well! Thank you again!
Thank you for the great feedback, William! 💯
Valeu!
Thank you so much for the support, Junior! 🙏💯
have watched many videos and have read many blog for understanding redux but I found you the best , one thing I really want to ask , your coding logics and performing functions are just wow, how some one can be this much good to write such coding patterns ?, like you are just complete different and perfect , and Thanks a lot for your effort🥰
Thank you for the kind words! 🙏 I am far from perfect, but my goal is to get a little better every day! Striving for progress! 💯
My, my, isn't that the best redux tutorial series?! Perfect tutorial, thanks for your efforts!
How ...he is setting userId??
@@anishkushwaha9973 he is using a library that generates random numbers called "nanoid", you can install it from npm and he's setting the id dynamically before saving the post in the prepare function 18:36 same with date and other info.
"remember to keep striving for progress over perfection, adna little progress everyday will go a very long way " I remember 3 months ago when I tried to learn from this tutorial. Then I do not even know useReducer / useContext hooks so I failed to do it. Todays is the day, where after 3 months I develop my own website and needed to implment redux to it.
This tutorial is well explained, and I see that then I was just too earlie in that place. Most of my knowledge I took from yours tutorials Dave.
Thank you
Glad I could help you keep making a little progress every day!
Bro, the first redux toolkit video was really good, but this one is a perfect example! Thanks man, it's amazing
Glad to hear it, Lucho! 💯
Thank you Dave for this amazing tutorial. I just can't imagine how much time and effort you put into making this video available for free. Massive thanks from me.
17:49 prepare & reducer
21:30 Redux devtools
As someone who's been here from day one, I’m really happy to see how rapidly this channel is growing. Congratulations!
Thank you so much for the support and kind words! 🙏💯
I love you man, I've been strugling with the passing of objects to the initialState but you make it seem so simple. thanks a lot
You're welcome! Glad I could help 🚀
Dave, I love what you done . By clearly and deliberately describing it, it really helped me grasp!
Glad to hear that!
Hi Dave, Thanks for the amazing work and easy steps to follow. I have a request, could you please create a separate react hooks playlist? It would be much easier than scrolling down the react tutorials playlist to find the react hooks videos. Thanks a lot for all your work.
Great request and reminder - I wanted to do that and forgot to. Thank you!
I have watched so many videos for redux toolkit. But this will be the best of all. Thanks Dave.
Great to hear!
Awesome job. Super clear and to the point.
The only channel i found on youtube which tells how to manage all the logic and separate all features of a React App like old redux in new redux toolkit love u man 💖💖
You're welcome, Waleed! 💯
this is a very helpful tutorial since i learnt legacy redux and i had some issues with undefined payload in the state. it was time for me to transfer to redux toolkit. so far, your steps are very clear.
easily one of the best redux courses i have ever come across
Thank you for the kind words! 💯
Thank you for making the video, very clear explanations and walkthroughs :)
Awesome tutorial, you are the best Dave
Thank you, Santiago! 💯
Thank you so much! Great explanation and step-by-step guide!
Thanks your teaching style is very awesome. I understand redux much better now.
DAVE Thank you friend for sharing... even though my ENGLISH IS AWFUL... but with the translator and your excellent explanation I'm understanding everything...
You earned a new Spanish-speaking subscriber and thumbs up to all your videos,,
Jose Grillo from Venezuela greets you.....
ESPAÑOL
Amigo gracias por compartir.... a pesar que mi INGLES ES PESIMO ... pero con el traductor y tu excelente explicacion voy entendiendo todo...
Te ganaste un nuevo suscriptor de habla hispana y manito arriba a todos tus videos,,
Te saluda Jose Grillo de Venezuela.....
Gracias Jose! 🙏 Mi espanol no es muy bueno pero I comprende un pequeno. 💯
@@DaveGrayTeachesCode jajaja gracias por contestar,,,,, estamos igual con mi INGLES... pero se te entiende
para que mejores cuando dices" I comprende un pequeno" mejor di " YO comprendo un poquito" jejejejej
Do you plan to continue making more videos of this series?
TRADUCTOR GOOGLE
hahaha thanks for answering,,,,, we are the same with my ENGLISH... but you are understood
so that you get better when you say " I comprende un pequeno" better say "YO comprendo un poquito" hehehehe
Do you plan to continue making more videos of this series?
@@josegrillo6867 gracias mi amigo! Yes, there are more videos to come in this series.
you are a great teacher bro!
Great content, Thank you 🙏
thanks dave! always on point
You're welcome, Drew! 🙏
Best Redux Course by Far!!!!!!
Thank you!
thank u gray for this amazing tutorial
Man you are a godsend, I love your content.
Just a note, maybe edit the 7 videos title a little bit? It's not immediately evident that this is a series, or the order to watch these videos in
Thank you, Michael! 🙏
Thank you so much!!! Best explenation I've ever heard! Very nice educational project!
Glad it was helpful!
I love it. Very explanatory
Brilliant tutorial, mate. The best one on Redux toolkit
Thank you for the kind words, Vipul! 🙏 More to come in this series. 🚀
Thanks for the video & yes I absolutely loved the fast approach
Thank you, Samrath! 💯
Why does this video not have 100k likes? Dave is literally the best programming teacher on the internet.
Thank you for the kind words!
Detailed, descriptive, cool!
Thanks a lot.
Glad it was helpful!
Thanks. this series has been very helpful for me to understand the react/redux architecture.
Great to hear! 💯
Amazing tutorial , a bit fast ... had to view it a few times but with the help of code reference makes perfect sense. Well done Dave!
Simple and to the point 😍😍
Thank you!
One of the best Redux Toolkit explanation :)
Thank you! 🙏
I enjoyed this video & got to see a different workflow when developing React apps thanks!!
Glad it was helpful!
Never seen Big-Leb :/ Now I gotta watch it.
2/9 Redux vids done. Learning a lot, thanks, Dave!
best tutorial
These are really great courses. Thank you so much
You're very welcome!
You're amazing, with awesome explanation simplicity capabilities, can you make a tutorial about redux-persist!!
Thanks Dave Gray. Your redux toolkit tutorials has really help my career journey as a software developer.
Great to hear!
Outstanding content! Thanks a lot.
You're welcome!
Thank you,
I like your crystal clear voice
This is AMAZING,thank YOU!!!
You're welcome!
Tquu dave lot of good content with nice and clean explanation 😊
Thank you for the kind words! 🙏
Amazing channel. Lots of useful information
Glad you like them!
This is amazing Dave, thank you for the hard work. A video about RTK Query would be really useful.
Thank you, Ali! I agree, and it will be made 🚀💯
@@DaveGrayTeachesCode Thank you again sir
Wow, thanks!!
You're welcome! 💯
Thank you!!!!
Como sempre video top demais! God bless you!
Thank you for the kind words! 🙏
thank you for your efforts mr.G. you are helping big amount of people.
Glad I could help!
thank you its excellent and complete course
You're very welcome!
thanks dave i learnt lot from ur videos....
You're welcome, Sachin 🙏💯
Thank you, Dave
New subscriber here . I came from the teachings of brad traversy . Now im here to learn more and use other techniques of redux
Brad has a great channel. You are welcome here Bon Chan!
amazing course!
44:09 a pretty cool trick I found is tho pass as prop {...{post}} that way works the same as in literal objects!
After adding the reaction button and then saving a new post, I'm getting type undefined ™ cannot read properties of 'thumbsUp', please advice
Yes Thanks, fast pace is good, we'll slow the video down, if it's too fast. :)
Thank you!
Nice one. I like how you are going away from super beginner react stuff! So often, once stuff gets more advanced, the tutorials are more vague and less helpful. Would love to see some DB fetching incorporated into your RTK setup.
Thank you, Juicy! Your request for DB fetching will be fulfilled very soon! 💯🚀
good course, thank you.
You are welcome! 💯
very good example. Thanks a lot.
You are welcome!
Hi Dave, Thanks for the amazing work keep teaching us
Thanks, will do!
Wow. Great tutorial. Very usefull for beginners. And it`s grate that you explain every step
You're welcome, Oleg!
Great tutorial, thanks for this. though I started my project with Typescipt & Vite so had some minor issues I had to sort out along the way :)
Dave, thank you.
It was so hard by myself
You're welcome!
wow wow wow. Please series on design pattern and DS as well.
Thank you for the request!
Amazing Tutorial! 👏👏 Quick question: At 27:46, should useEffect() hook be used to track the dynamic variables and then assign to the 'canSave' variable?
Not necessary for this. All are state variables if I remember correctly. Any time one of them changes, a re-render will occur which will update the values used here.
Hey ,hey. My my, I learned amazing stuff in this tutorial. Thanks Dave!
Glad to hear that! And nice Neil Young reference! 🤘
Amazing project and tutorial
Glad you like it! Thank you, Sona! 💯
@@DaveGrayTeachesCode You are welcome
Somehow I knew you were a fan of the big Lebowski! 😁 Superior tutorials keep them coming
Thank you! 💯
excellent as always!
Thank you, Aman! 💯
It would be great if you were to make a tutorial about redux-persist, it's missing something like that out there, and you are the best teacher
Thank you for the kind words and the request! 💯🙏
Although I think the pace is too fast, great tutorial by the way.
Hey Dave,
What a coincidence! This is what I exactly needed and every steps was so easy to grasp.
By the way, how do we validate form data before storing it in Redux. It would be better if we get a video on doing that like a pro.
Thanks for the great video.
Thank you! You might be interested in this video for form validation and accessibility: th-cam.com/video/brcHK3P6ChQ/w-d-xo.html
@@DaveGrayTeachesCode Thanks, Dave. I'll definitely check it out.
awesome guide!
Thank you!
Sir: your voice is charming, your session is gold...
Thank you so much! 💯
Thank you so much
You're welcome! 💯
The segment titled "Immer.js is active in createSlice" was really an "ah-ha" moment of the last few years of me trying to really understand where React and Redux were really trying to go. After working with React 18 and react-router-dom 6 I thought I might just be forever typing in what worked. That little bit on what redux toolkit offers that redux doesn't really brought it all together.
Glad to hear that, Ryan! 💯
faster pace - good!
Thank you for the feedback!
I think createSlice needed more explanation of WHY we were doing each step. Otherwise, good tutorial as always Dave.
Thank you!
great explanation
Thank you!
Thanks for the tutorial part 02
I also would like to see the part 02 geting together with next.js and mongoose integration
Next.js will be a separate series that I am very much looking forward to 💯🚀
very clever very awesome
>< Redux is tough. I'm going to have to build this like 20 times to make it stick... Either way this it the most straight forward tut I have found. Thank you so much Dave. You just got another subscriber.
You're welcome! 💯
thank you
Hello Dave thanks to this amazing tutorial!
I'm wondering though why you choose to disable the button manually instead of letting the browser prevent the form submission when inputs are empty, just like using the required attribute in the inputs?
Both work! One benefit of disabling the button manually with JS is that your submit button does not necessarily need to be within the form. Another is that the button is clearly disabled in the UI instead of letting the user click and then say the form cannot be submitted.
@@DaveGrayTeachesCode Got it thank you so much for the response, really appreciate it!
Hi Dave, You're Great!
I was wondering, regarding 'canSave' at 27:45
would you have to type-convert all variables to Boolean, since it does that either way under the hood when you use logical operators ( && )?
also, could you please explain why wouldn't we have to store 'canSave' as state?
Good questions, Daniel! In reverse order, we do not store 'canSave' as state because it is defined with every render of the component and based upon the title, content, and userId states. We do need to use Boolean() on these variables because we are setting 'canSave' to their value. We want them all to be true or it is false. We don't want 'canSave' to be equal to the title, content, or userId though. Perhaps in a conditional, we could say if (title && content && userId) // do something - but not in this case. I hope that helps! 🚀
Thank you! :)
only one word for you awesome awesome
So nice you said it twice! Thank you! 🙏🚀
Hi Dave, first of all, thanks for such an incredible content! Let me ask you somethin, which are the pros/cons of using unshift instead of creating a new ordered list, to displays the posts?
Unshift mutates array data in Javascript. Creating a new array is what I would usually do... but inside createSlice, Redux Toolkit uses ImmerJS. There is a link to more about ImmerJS in the description, but here is a link to the Redux docs explaining why they decided to use it: redux-toolkit.js.org/usage/immer-reducers#why-immer-is-built-in
So, do prepare methods automatically run before it's associatated reducer when defined from within the createSlice method?