Redux has previously been difficult to learn and implement, but it has also been the best known global state management system for React. The creators of Redux have addressed the difficulties of Redux by offering Redux Toolkit as the recommended modern way to implement Redux. Redux Toolkit abstracts away some of the previous difficulties and makes applying Redux to your project easier! If you are just getting started with React, I suggest completing my React JS full course for beginners first: ruclips.net/video/RVFAyFWO4go/видео.html
@@eric_ng5253 this is my first on Redux and Redux toolkit. I previously have one tutorial in my react series on easy peasy redux which is a great implementation. I also cover the context API in that series.
A mental model that has helped me understand the flow 1. State -> Object 2. Actions -> Events 3. Reducers -> Event Listeners 4. Dispatch -> Event Triggers
2 месяца назад
This is an incredible alternative way to remember them. Thanks.
I learned from udemy and from many coding channels on youtube, BUT you are one of the very best teachers, your teaching style is so simple and easy to understand. Thank you very much Dave, look forward to all of your new videos 🎉🙏✨
I agree with Nam Nguyen's comment... "I learned from udemy and from many coding channels on youtube, BUT you are one of the very best teachers, your teaching style is so simple and easy to understand."
Dave, I have now started to watch only your videos... Please don't ever stop sharing your knowledge with us. I love your teaching style, I learn so much from you. Thank you ! :)
Dave, you have quickly become my favorite RUclips channel to learn from. Your pace, tonality, and very well structured lesson context is beyond amazing. I've learned so much from you and have digested your content very easily. Thank you for all you do!
Just two notes for you. 1) I LOVE how you specify what shortcuts you're using! We're beginners, we don't know your shortcuts! Thanks for being one of the first and few who actually spell out their hotkeys in tutorials like these. 2) Great tutorial, I feel my brain expanding. Great note on progress rather than perfection. That's the ticket. That's the energy we need for the new year, 2023.
I just dont know why I am seeing this right now. I have wasted a lot of time trying to understand redux toolkit from other tutorials but I got more confused. But everything makes sense to me now. U are a gem of a teacher. Thank you for all you do. After watching ur node js course, I fell in luv with ur teaching style. Thank u Sir❤
Use it at work, learned a while back + learned some RTK recently. Used it on a project of my own actually. But, it still somewhat slips over my head here and there. Going through these videos has been the nail in the coffin for understanding it all. You wonderfully explained it. Your style resonated with me - straight to the point, technical, and not completely easy.
Hi, dave it's been a month since. I remember your Js course and it helps me a lot in my web development journey. I also finished your react course and not. I want to finish this redux course for you. I have recommended my friends to watch your tutorial because you teach so simple, direct, and easy, especially to beginners. Mabuhay ka Dave
ok. I just looked at your github repo for the useReducer example. I have to say I have struggled with redux and useReducer, and just like that as soon as I see your repo, I can actually see what is happening. I have looked at soooo many different tutorials and I swear they just confuse me more. You are an amazing teacher, thank you Dave!!
This is great! i was falling asleep reading the react-redux documentation and not looking forward to checking out redux-toolkit but this is a great tutorial thanks!
I’ve watched 12 minutes of the video and I’m already understanding. I got scared of redux for years. Went to vuejs and got a job but after all these layoffs (including myself) I had to comeback to react 😂 there are to many jobs right now in react for DOD especially surprisingly (Army Vet) that it’s my way back in the game. 💪🏾 I want to thank Dave for providing this for free! The job market sucks for Jr’s like me (i’m 40. discovered tech late) so I appreciate the content! I’m gonna go through your series and hopefully I get back on track!
It was wonderful session which I have never watched in any channel and that 20 mins content was really made me to fully concentrated until the end of the vedio. Thank you so much for making this kind of vedio ❤️
are you reading my mind? I am getting ready for my interview where I expect a lot of questions about redux toolkit... and I am one day in learning redux... this video will be extremely helpful!
Thanks Dave that's super cool tutorial. redux-toolkit is a brand new from redux. This tutorial quite rare in youtube and you explain it in a simple way very easy to understand , You gotta one subs from me...
a lot of channels do this, but be careful calling increment and decrement actions. They are actually action creators. It might not seem like it matters but it was really confusing to me at first, so I just wanted to clarify for anyone else confused. That is the reason why at 12:40 you call the functions to dispatch the action. You need to get the return value of the action creator, an action object, and then dispatch that
I think if you continue the series, you will hear me clearly define the action creators. It is a lot to take in as someone gets started with this. Hopefully, the series brings it all together. 💯🚀
I dont know yet everything I learned on React was smooth, short and simple. Never a lesson over 20 mins. But with redux ... only courses likes 2 hours minimum. I really hope this will save me time later, cause thats a huge time investment.
Great tutorial, thanks. you mentioned at the start the "toolkit" basically replaces the original redux and it's no longer needed, then later on you installed both as the "Provide" is still react-redux, So a little confused. do we still need to add both. I guess so.
A very fine walkthrough 👍👍👍 thank you very much for sharing this. In my opinion there is still a lot of code to write with redux compared to some alternatives (react context, valtio, etc.). Couldn't stop thinking that the dropping the named exports could "reduce" some of the lot of code writing that is needed.
Thank you! Yes, you are correct. We often give simple examples to show how Redux works, but unless the project is large, using something like the Context API or (in my opinion) Easy Peasy Redux is easier to implement. I do like the changes that have been made with Redux Toolkit vs the old standard of Redux.
@@DaveGrayTeachesCode yes, and slice seems like a much better name (thank you for explaining what that is all about). Imagine that using it with typescript would also improve the DX.
Thanks again dave, yesterday I was about to ask yo about using redux toolkit in useRefreshToken, useAxiosPrivate and useLogout hooks. I can't wait you make video for that also ;)
Thank you, Willy! Quick note on your question about combining Redux with the login strategies - Redux is the global state management. You would switch the state that needs to be shared throughout the app - like the auth state - to a Redux store and associated slice reducer. This is a good idea for a follow up video in that series. 💯🚀
@@DaveGrayTeachesCode yes I have remove the context api and refactor the hooks and use redux toolkit instead and its all works fine but still Im not sure if I code it the right way especially in the useAxiosPrivate. And yes I think its gonna be great content for next video :)
Those who wonder what createSlice will return ? , which will return an object that looks like: { name : string, reducer : ReducerFunction, actions : Record, caseReducers: Record. getInitialState: () => State }
thanks for the great video, very helpful. Im pretty confused the part at 9:08, that you import counterReducer from the counterSlice file, but i couldn't find the counterReducer in that file. would you mind to give me a hint? thanks!
Hi Yonnie - I'll try to help. If you go to the resources link in the description and view my source code for lesson 1, please look in the counterSlice file. At the very bottom of the file, you should see "export default counterSlice.reducer" ..The counterSlice we create above in that file has a reducer, and that is what is exported here and then imported at 9:08 as you referenced.
thanks for the great video ❤ may be you can do a redux toolkit with typescript vide and that wil be really apperciated and helpful nad thanks in advance ❤
In the last part of the video, you use useState hook, and It looks like, just handle local/Component state, In order to make it global, You dispatch incrementByAmount action, Is This a common pattern to follow? I ask so, since, I'd omit useState hook. But Would IT affect performance app, Since, On this case manage local state is better than global.
Thanks for the tutorial, but I have a question: why use a useState to store the increment amount value when you could just create a new redux state on counterSlice?
Sir your content is great. May God bless you for all the hard work you put in making these tutorials. Sir i have a request to make, though it is out of scope of this video... If you would make a tutorial how to use module css and global css together... For example, i have my base styling and utilities done in one style sheet. I want to use them throughout the app. But also i want to use some component specific styles... Is it even possible or we have to Duplicate the css? It would be great if you make a video over it or suggest some article to read. Thank you sir❤️
You can use more than one CSS stylesheet. For example, your index.css is at the top of the cascade and will apply to all. You can make a module stylesheet that will come after in the cascade and apply to a specific module and any child modules within the specific module.
As a super noob - I think you overcomplicated it by showing the increasebyAmount because now you threw in react states - which confused me a bit and its not pure redux alone anymore . should have just shown how to add by static value.
Redux has previously been difficult to learn and implement, but it has also been the best known global state management system for React. The creators of Redux have addressed the difficulties of Redux by offering Redux Toolkit as the recommended modern way to implement Redux. Redux Toolkit abstracts away some of the previous difficulties and makes applying Redux to your project easier! If you are just getting started with React, I suggest completing my React JS full course for beginners first: ruclips.net/video/RVFAyFWO4go/видео.html
I have been watching your tutorials and I will say it's great. yours came out in handy!... Do you have any on Redux API?
@@eric_ng5253 this is my first on Redux and Redux toolkit. I previously have one tutorial in my react series on easy peasy redux which is a great implementation. I also cover the context API in that series.
what about useContext??? can't replace it? sorry for newbie questions
It is not at all the best known global state management system for React. It's probabbly the worst.
please provide the VS code theme name sir!!!
A mental model that has helped me understand the flow
1. State -> Object
2. Actions -> Events
3. Reducers -> Event Listeners
4. Dispatch -> Event Triggers
This is an incredible alternative way to remember them. Thanks.
I learned from udemy and from many coding channels on youtube, BUT you are one of the very best teachers, your teaching style is so simple and easy to understand. Thank you very much Dave, look forward to all of your new videos 🎉🙏✨
Thank you for the kind words, Nam! 🙏💯
Ain't that the truth. 🔥👍
I agree with Nam Nguyen's comment... "I learned from udemy and from many coding channels on youtube, BUT you are one of the very best teachers, your teaching style is so simple and easy to understand."
Thank you for the kind words, Mohamed! 🙏🙏
This demo is the first one in what feels like 100 youtube videos that work. Thank you so much!
Glad to hear it helped!
Dave, I have now started to watch only your videos... Please don't ever stop sharing your knowledge with us. I love your teaching style, I learn so much from you. Thank you ! :)
Your teaching style is amazing! Thank you for the intro to Redux Toolkit!
You're very welcome! 💯🚀
Dave, you have quickly become my favorite RUclips channel to learn from. Your pace, tonality, and very well structured lesson context is beyond amazing. I've learned so much from you and have digested your content very easily. Thank you for all you do!
Thank you for the kind words, Andres! 🙏🙏
Just two notes for you.
1) I LOVE how you specify what shortcuts you're using! We're beginners, we don't know your shortcuts! Thanks for being one of the first and few who actually spell out their hotkeys in tutorials like these.
2) Great tutorial, I feel my brain expanding. Great note on progress rather than perfection. That's the ticket. That's the energy we need for the new year, 2023.
Glad it was helpful!
Simplest tutorial ever on redux! Thanks Dave!
I just dont know why I am seeing this right now. I have wasted a lot of time trying to understand redux toolkit from other tutorials but I got more confused.
But everything makes sense to me now.
U are a gem of a teacher. Thank you for all you do.
After watching ur node js course, I fell in luv with ur teaching style.
Thank u Sir❤
You're very welcome!
by far the best video on understanding redux rn! amazing work brother
Thank you for the kind words! 🙏🙏
Great intro. Can't wait to do your next redux tk vid!
Use it at work, learned a while back + learned some RTK recently. Used it on a project of my own actually. But, it still somewhat slips over my head here and there. Going through these videos has been the nail in the coffin for understanding it all. You wonderfully explained it. Your style resonated with me - straight to the point, technical, and not completely easy.
Thank you, Tanner! Glad I could help! 💯
It's awesome how the tutorial was thorough yet concise. Great stuff
Glad it helped!
Hi, dave it's been a month since. I remember your Js course and it helps me a lot in my web development journey. I also finished your react course and not. I want to finish this redux course for you. I have recommended my friends to watch your tutorial because you teach so simple, direct, and easy, especially to beginners. Mabuhay ka Dave
Thank you for the kind words, Criztian! 🙏 I am glad I have helped you on your journey! 🚀
ok. I just looked at your github repo for the useReducer example. I have to say I have struggled with redux and useReducer, and just like that as soon as I see your repo, I can actually see what is happening. I have looked at soooo many different tutorials and I swear they just confuse me more. You are an amazing teacher, thank you Dave!!
Thank you for the kind words, and glad I could help! 💯
This is great! i was falling asleep reading the react-redux documentation and not looking forward to checking out redux-toolkit but this is a great tutorial thanks!
I’ve watched 12 minutes of the video and I’m already understanding. I got scared of redux for years. Went to vuejs and got a job but after all these layoffs (including myself) I had to comeback to react 😂 there are to many jobs right now in react for DOD especially surprisingly (Army Vet) that it’s my way back in the game. 💪🏾 I want to thank Dave for providing this for free! The job market sucks for Jr’s like me (i’m 40. discovered tech late) so I appreciate the content! I’m gonna go through your series and hopefully I get back on track!
Thanks for sharing and glad to hear I'm helping!
Thank you Dave Gray. I've been struggling with redux toolkit before I found your video
Glad it helped!
was actually struggling with redux toolkit, and this video explained everything so well! Thank you👍
thank you! your content is GOLD! waiting for next js tutorial. 💥🔥
Thank you! 🙏 I am excited about starting a NextJS series this year. 💯🚀
Ooo thank you alot! When i began to study something you post a new video about it! It is amasing!
Good timing! 💯
'Strive for progress over perfection', I really like this quote. This video explains concisely about Redux toolkit. Used to dislike Redux
Excellent style of teaching. Thanks Dave!
You're welcome, Kamran! 💯
This is pretty neat. Got the whole idea down while watching it at 2x. You’re an astounding teacher. Thanks.
Glad it was helpful!
finally i found A gem, I was loooking for this tut..
A part from the tutorial, loved the shift+alt+down tip to copy the whole block below. Thanks
Glad it helped! 💯
Great video Dave!!! 🎉🎉 Could you please make the same tutorial using TypeScript? It would be extremely helpful
This was the best redux tutorial thanks Dave. You are a great teacher!
Thank you!
Just when I thought I couldn't find any better videos, I find your videos.
Thank you for the kind words, Dinesh! 💯
Thank you so much man, I just discovered your channel and it is fantastic! Keep it up!
Glad you enjoy it! You're welcome! 💯🚀
Redux has never been so sexy to use before - thank you for the tutorial!
You're very welcome!
Amazing video! Can't wait to watch the whole series.... Thanks a lot for this work!
You're welcome!
Awesome content , love your teaching method.
Thanks, best teacher for react:)
Hey Dave, this was excellent. Extremely well done.
Thank you, David! 💯
Very clear and concise explanation!! Thank you so much!
You're very welcome!
You are one of the best teachers dave
Thank you!
At last! React Redux Toolkit gets the Dave Gray treatment. Maybe I'll finally get to understand Redux thoroughly this time around.
I hope it helps!
It was wonderful session which I have never watched in any channel and that 20 mins content was really made me to fully concentrated until the end of the vedio. Thank you so much for making this kind of vedio ❤️
Glad you enjoyed it!
are you reading my mind? I am getting ready for my interview where I expect a lot of questions about redux toolkit... and I am one day in learning redux... this video will be extremely helpful!
Glad I could help!
You just taught me more than redux toolkit
thank you sir
You're very welcome!
you deserve many more subscribers learrned many javascript concepts from your video and best video on redux thank you
Thank you, Ajay!
Loved all your tutorial
Glad to hear it - thank you! 🙏💯
You teach so well. woah, you make things so simple to understand
I appreciate that!
Thanks Dave that's super cool tutorial. redux-toolkit is a brand new from redux. This tutorial quite rare in youtube and you explain it in a simple way very easy to understand , You gotta one subs from me...
Glad it was helpful! 💯
Wow,are you reading mind,just searching for thunk middleware,video uploaded,Thanks Dave,how many video yet to come on this topic
Glad to hear it! This will be a short series - guessing 4 to 6 videos - redux thunk coming very soon.
You are Dr. of this game! Please cointinue with everything about Redux. :)
More on the way! 🚀
Man, you are a blessing, thank you !!
You're welcome!
Top tier tutorial! Thanks for the video man, it's awesome.
Thank you for the kind words! 🙏🚀
Let's make it simple. You've helped me landing a job. Thank you :)
Great to hear! This is the feedback that lets me know I'm on the right track. Thank you for sharing!
nice stuff, awesome always, thanks Dave
You're welcome, Daniel! 🙏
This looks brilliant.
Awesome video as always.
Thank you!
Thanks for the fantastic tutorial!!
You're welcome! 💯
I am Brazilian. Sorry for some language errors. Thank you for sharing your knowledge.
You're welcome!
Thanks for this Redux tutorial !
You're welcome, Jonathan! 💯
amazing course!
Amazing video, thank you so much!
You're very welcome!
a lot of channels do this, but be careful calling increment and decrement actions. They are actually action creators. It might not seem like it matters but it was really confusing to me at first, so I just wanted to clarify for anyone else confused. That is the reason why at 12:40 you call the functions to dispatch the action. You need to get the return value of the action creator, an action object, and then dispatch that
I think if you continue the series, you will hear me clearly define the action creators. It is a lot to take in as someone gets started with this. Hopefully, the series brings it all together. 💯🚀
I dont know yet everything I learned on React was smooth, short and simple.
Never a lesson over 20 mins.
But with redux ... only courses likes 2 hours minimum.
I really hope this will save me time later, cause thats a huge time investment.
For smaller projects, I don't recommend Redux, but many want to know it because it is frequently used with enterprise / large projects.
Nice tutoriel !
the best programmer teacher ever
Thank you 🙇🏾♂️ 🙏🏾
Amazing, as always.
Good quality content , thank you
Great tutorial, thanks. you mentioned at the start the "toolkit" basically replaces the original redux and it's no longer needed, then later on you installed both as the "Provide" is still react-redux, So a little confused. do we still need to add both. I guess so.
A very fine walkthrough 👍👍👍 thank you very much for sharing this.
In my opinion there is still a lot of code to write with redux compared to some alternatives (react context, valtio, etc.). Couldn't stop thinking that the dropping the named exports could "reduce" some of the lot of code writing that is needed.
Thank you! Yes, you are correct. We often give simple examples to show how Redux works, but unless the project is large, using something like the Context API or (in my opinion) Easy Peasy Redux is easier to implement. I do like the changes that have been made with Redux Toolkit vs the old standard of Redux.
@@DaveGrayTeachesCode yes, and slice seems like a much better name (thank you for explaining what that is all about).
Imagine that using it with typescript would also improve the DX.
Nice Redux Toolkit overview! Bit Refreshing...!
You just got a new subscriber!!
You even had a motivational speech at the end!! damn this channel is fire 🔥
Thanks!
Awesome! Thanks! please make some videos about integrate test and e2e test in react with typescript
Coming up later this year! Thank you for the request! 🙏🙏
Awesome tutorial about redux thank you
You're welcome!
Spectacular, thank you
Thank you!
Thanks again dave, yesterday I was about to ask yo about using redux toolkit in useRefreshToken, useAxiosPrivate and useLogout hooks. I can't wait you make video for that also ;)
Thank you, Willy! Quick note on your question about combining Redux with the login strategies - Redux is the global state management. You would switch the state that needs to be shared throughout the app - like the auth state - to a Redux store and associated slice reducer. This is a good idea for a follow up video in that series. 💯🚀
@@DaveGrayTeachesCode yes I have remove the context api and refactor the hooks and use redux toolkit instead and its all works fine but still Im not sure if I code it the right way especially in the useAxiosPrivate.
And yes I think its gonna be great content for next video :)
This is an amazing tutorial. Thank you! Are you planning to do videos for RTK Query as well?
Yes, I am. I cover all of the foundational skills for Redux Toolkit in the series first and RTK Query will finish out the series.
Those who wonder what createSlice will return ? , which will return an object that looks like:
{
name : string,
reducer : ReducerFunction,
actions : Record,
caseReducers: Record.
getInitialState: () => State
}
Accurate! 💯 redux-toolkit.js.org/api/createSlice#return-value
thanks for the great video, very helpful. Im pretty confused the part at 9:08, that you import counterReducer from the counterSlice file, but i couldn't find the counterReducer in that file. would you mind to give me a hint? thanks!
Hi Yonnie - I'll try to help. If you go to the resources link in the description and view my source code for lesson 1, please look in the counterSlice file. At the very bottom of the file, you should see "export default counterSlice.reducer" ..The counterSlice we create above in that file has a reducer, and that is what is exported here and then imported at 9:08 as you referenced.
Very greate, i learn more things
great video, thank you so much
You are welcome! 🚀
thank you Sir for react redux tutorial help me alot, maybe next react testing tutorial.
You're welcome! 🙏
Hey man thank you very much for this, really learned a lot. Btw, do you plan on adding a video about integrating with redux-saga?
Thank you! 💯 Yes, I want to do some tutorials on redux-saga in the future! 🚀
@@DaveGrayTeachesCode Looking forward to it!
Thanks , i hope you to make tutorial about Typescript ! Good luck ✊✊✊
Thank you for the request!
Good tutorial buddy. Currently struggling on callin API for Data with Redux and TypeScript... Maybe u gonna do smth like this in the future?
Thank you and great suggestion!
thanks for the great video ❤ may be you can do a redux toolkit with typescript vide and that wil be really apperciated and helpful nad thanks in advance ❤
need full playlist as soon as possible
Thank you - the playlist will be added to weekly until complete. 🙏💯
Love your videos.
Thank you!
I got incredibly confused with the examples in docs, I hope this helps me understand how to add async state
Later in the series, async thunks are covered. Even later, RTK Query is covered. Both are ways to issue async queries and update state.
@@DaveGrayTeachesCode ty! I'm already in that part!
In the last part of the video, you use useState hook, and It looks like, just handle local/Component state, In order to make it global, You dispatch incrementByAmount action, Is This a common pattern to follow? I ask so, since, I'd omit useState hook. But Would IT affect performance app, Since, On this case manage local state is better than global.
Thanks for the tutorial, but I have a question: why use a useState to store the increment amount value when you could just create a new redux state on counterSlice?
The official docs & tutorial may help further illustrate: redux.js.org/tutorials/essentials/part-1-overview-concepts#state-management
Hey Dave! Which VSCode extension you installed to show you the opening and closing () ?
Reference: 2:10 time mark and code lines 3 and 7. Thank you!
This is built in to VS Code. Open Preference > Settings > search for "Bracket Pair Colorization" and enable it.
Beautifully Video!
Thank you very much! 🙏
you're the king of redux😀
I am far from the king, but thank you for the kind words! 😀🙏
What the difference between using React Effector and Redux? Can i use effector instead of redux?
This is bad idea at the current time?
Both are for state management. You can use either one.
Sir your content is great. May God bless you for all the hard work you put in making these tutorials. Sir i have a request to make, though it is out of scope of this video... If you would make a tutorial how to use module css and global css together... For example, i have my base styling and utilities done in one style sheet. I want to use them throughout the app. But also i want to use some component specific styles... Is it even possible or we have to Duplicate the css? It would be great if you make a video over it or suggest some article to read. Thank you sir❤️
You can use more than one CSS stylesheet. For example, your index.css is at the top of the cascade and will apply to all. You can make a module stylesheet that will come after in the cascade and apply to a specific module and any child modules within the specific module.
@@DaveGrayTeachesCode hmm... I'll try that. Thank you ❤️
thanks Dave
8:56 how we imported counterReducer here whereas there wasn't anything like that from counterSlice file. Can anyone explain it?
Do we need Redux with useReducer and useContext hooks?
As a super noob - I think you overcomplicated it by showing the increasebyAmount because now you threw in react states - which confused me a bit and its not pure redux alone anymore . should have just shown how to add by static value.
Very nice course