React Redux Toolkit Tutorial for Beginners | Learn Modern Redux

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@eric_ng5253]

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?

[@DaveGrayTeachesCode]

@@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.

[@EndLessPain9999]

what about useContext??? can't replace it? sorry for newbie questions

[@BusinessWolf1]

It is not at all the best known global state management system for React. It's probabbly the worst.

[@imraanali6410]

please provide the VS code theme name sir!!!

[@mohammaddaudibrahim3501]

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.

[@mohamedyoussef8835]

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."

[@DaveGrayTeachesCode]

Thank you for the kind words, Mohamed! 🙏🙏

[@southernsunreviews5932]

This demo is the first one in what feels like 100 youtube videos that work. Thank you so much!

[@DaveGrayTeachesCode]

Glad to hear it helped!

[@anamatei2134]

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 ! :)

[@NamNguyen-oz8uj]

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 🎉🙏✨

[@DaveGrayTeachesCode]

Thank you for the kind words, Nam! 🙏💯

[@chisangamumba2961]

Ain't that the truth. 🔥👍

[@Proxamm]

Dave, you have quickly become my favorite KZbin 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!

[@DaveGrayTeachesCode]

Thank you for the kind words, Andres! 🙏🙏

[@cmefindaname]

Your teaching style is amazing! Thank you for the intro to Redux Toolkit!

[@DaveGrayTeachesCode]

You're very welcome! 💯🚀

[@deoxzyKun]

by far the best video on understanding redux rn! amazing work brother

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏🙏

[@CuteFunnyVideos20]

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❤

[@DaveGrayTeachesCode]

You're very welcome!

[@journeyoftulsi]

Simplest tutorial ever on redux! Thanks Dave!

[@criztiandev]

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

[@DaveGrayTeachesCode]

Thank you for the kind words, Criztian! 🙏 I am glad I have helped you on your journey! 🚀

[@codingispower1816]

Great intro. Can't wait to do your next redux tk vid!

[@FloraSora]

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.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@yumisunday]

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!

[@donaldballowe8855]

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!!

[@DaveGrayTeachesCode]

Thank you for the kind words, and glad I could help! 💯

[@TannerBarcelos]

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.

[@DaveGrayTeachesCode]

Thank you, Tanner! Glad I could help! 💯

[@jaymartinez311]

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!

[@DaveGrayTeachesCode]

Thanks for sharing and glad to hear I'm helping!

[@hamzahahmad1670]

It's awesome how the tutorial was thorough yet concise. Great stuff

[@DaveGrayTeachesCode]

Glad it helped!

[@CTILET]

Ooo thank you alot! When i began to study something you post a new video about it! It is amasing!

[@DaveGrayTeachesCode]

Good timing! 💯

[@georgejoseph2601]

This is pretty neat. Got the whole idea down while watching it at 2x. You’re an astounding teacher. Thanks.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@johnacsyen]

'Strive for progress over perfection', I really like this quote. This video explains concisely about Redux toolkit. Used to dislike Redux

[@ryanmamboudjemtchemeu4289]

Thank you Dave Gray. I've been struggling with redux toolkit before I found your video

[@DaveGrayTeachesCode]

Glad it helped!

[@rishabhtayal6607]

Well explained, worth every sec of this video.

[@alirezahekmati7632]

thank you! your content is GOLD! waiting for next js tutorial. 💥🔥

[@DaveGrayTeachesCode]

Thank you! 🙏 I am excited about starting a NextJS series this year. 💯🚀

[@artiliciousbysejal4862]

was actually struggling with redux toolkit, and this video explained everything so well! Thank you👍

[@arasefe]

A part from the tutorial, loved the shift+alt+down tip to copy the whole block below. Thanks

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@ajayramola9386]

This was the best redux tutorial thanks Dave. You are a great teacher!

[@DaveGrayTeachesCode]

Thank you!

[@MohammadWaseem-po2kq]

finally i found A gem, I was loooking for this tut..

[@Kamim78]

Excellent style of teaching. Thanks Dave!

[@DaveGrayTeachesCode]

You're welcome, Kamran! 💯

[@lucasiramos]

Amazing video! Can't wait to watch the whole series.... Thanks a lot for this work!

[@DaveGrayTeachesCode]

You're welcome!

[@ajayshekhawat2292]

you deserve many more subscribers learrned many javascript concepts from your video and best video on redux thank you

[@DaveGrayTeachesCode]

Thank you, Ajay!

[@penguincoding1353]

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...

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@DineshVutukuru]

Just when I thought I couldn't find any better videos, I find your videos.

[@DaveGrayTeachesCode]

Thank you for the kind words, Dinesh! 💯

[@syedabuthahira8053]

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 ❤️

[@DaveGrayTeachesCode]

Glad you enjoyed it!

[@andrewclarke6916]

At last! React Redux Toolkit gets the Dave Gray treatment. Maybe I'll finally get to understand Redux thoroughly this time around.

[@DaveGrayTeachesCode]

I hope it helps!

[@enriquefavila3847]

Thank you so much man, I just discovered your channel and it is fantastic! Keep it up!

[@DaveGrayTeachesCode]

Glad you enjoy it! You're welcome! 💯🚀

[@jenso413]

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

[@DaveGrayTeachesCode]

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. 💯🚀

[@Daniel-nb3kk]

Redux has never been so sexy to use before - thank you for the tutorial!

[@DaveGrayTeachesCode]

You're very welcome!

[@ЂорђеЈеленковић]

You are Dr. of this game! Please cointinue with everything about Redux. :)

[@DaveGrayTeachesCode]

More on the way! 🚀

[@arcosd63]

Hey Dave, this was excellent. Extremely well done.

[@DaveGrayTeachesCode]

Thank you, David! 💯

[@pitsonborellio7463]

You teach so well. woah, you make things so simple to understand

[@DaveGrayTeachesCode]

I appreciate that!

[@regilearn2138]

Wow,are you reading mind,just searching for thunk middleware,video uploaded,Thanks Dave,how many video yet to come on this topic

[@DaveGrayTeachesCode]

Glad to hear it! This will be a short series - guessing 4 to 6 videos - redux thunk coming very soon.

[@aya2222]

Very clear and concise explanation!! Thank you so much!

[@DaveGrayTeachesCode]

You're very welcome!

[@techadventures6645]

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.

[@DaveGrayTeachesCode]

For smaller projects, I don't recommend Redux, but many want to know it because it is frequently used with enterprise / large projects.

[@rfryanfavour4369]

You just taught me more than redux toolkit thank you sir

[@DaveGrayTeachesCode]

You're very welcome!

[@omarakki705]

You are one of the best teachers dave

[@DaveGrayTeachesCode]

Thank you!

[@tanercoder1915]

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!

[@DaveGrayTeachesCode]

Glad I could help!

[@luchonieves]

Top tier tutorial! Thanks for the video man, it's awesome.

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏🚀

[@zachariayussuf7652]

Awesome content , love your teaching method.

[@voice_famous_books4301]

Thanks, best teacher for react:)

[@noir4356]

Let's make it simple. You've helped me landing a job. Thank you :)

[@DaveGrayTeachesCode]

Great to hear! This is the feedback that lets me know I'm on the right track. Thank you for sharing!

[@dharmeshgohil9375]

Loved all your tutorial

[@DaveGrayTeachesCode]

Glad to hear it - thank you! 🙏💯

[@jacerchetoui709]

Man, you are a blessing, thank you !!

[@DaveGrayTeachesCode]

You're welcome!

Great video Dave!!! 🎉🎉 Could you please make the same tutorial using TypeScript? It would be extremely helpful

[@edwilsondasilva9946]

I am Brazilian. Sorry for some language errors. Thank you for sharing your knowledge.

[@DaveGrayTeachesCode]

You're welcome!

[@Miles09]

Awesome video as always.

[@DaveGrayTeachesCode]

Thank you!

[@danieljing9319]

nice stuff, awesome always, thanks Dave

[@DaveGrayTeachesCode]

You're welcome, Daniel! 🙏

[@jotarz96]

Thanks for this Redux tutorial !

[@DaveGrayTeachesCode]

You're welcome, Jonathan! 💯

[@marcostevanella6051]

Amazing, as always.

[@wendixiao9275]

Thanks for the fantastic tutorial!!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@willyhorizont8672]

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 ;)

[@DaveGrayTeachesCode]

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. 💯🚀

[@willyhorizont8672]

@@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 :)

[@yonnie0521]

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!

[@DaveGrayTeachesCode]

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.

[@ILohamLivingstone]

the best programmer teacher ever

[@Norfeldt]

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.

[@DaveGrayTeachesCode]

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.

[@Norfeldt]

@@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.

[@ZawCodes]

This looks brilliant.

[@syednoohu8692]

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 }

[@DaveGrayTeachesCode]

Accurate! 💯 redux-toolkit.js.org/api/createSlice#return-value

[@omarkraidie]

You just got a new subscriber!!

[@omarkraidie]

You even had a motivational speech at the end!! damn this channel is fire 🔥

[@DaveGrayTeachesCode]

Thanks!

[@Hero1Love2]

Thank you 🙇🏾‍♂️ 🙏🏾

[@azizbekibnhamid642]

amazing course!

[@tiril1991]

Amazing video, thank you so much!

[@DaveGrayTeachesCode]

You're very welcome!

[@TheMaKaBaY]

Nice tutoriel !

[@jFernandoZ]

Nice Redux Toolkit overview! Bit Refreshing...!

[@mohammadmirzaei8716]

Awesome! Thanks! please make some videos about integrate test and e2e test in react with typescript

[@DaveGrayTeachesCode]

Coming up later this year! Thank you for the request! 🙏🙏

[@younesseelkars8149]

Good quality content , thank you

[@hardwired66]

thank you Sir for react redux tutorial help me alot, maybe next react testing tutorial.

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@saidafzalabdusattorov6037]

Thanks , i hope you to make tutorial about Typescript ! Good luck ✊✊✊

[@DaveGrayTeachesCode]

Thank you for the request!

[@mohamedtarek5183]

you're the king of redux😀

[@DaveGrayTeachesCode]

I am far from the king, but thank you for the kind words! 😀🙏

[@sonamohialdin3376]

Awesome tutorial about redux thank you

[@DaveGrayTeachesCode]

You're welcome!

[@dipanshusingh]

Love your videos.

[@DaveGrayTeachesCode]

Thank you!

[@AndrewLapteff]

best tutor ever!

[@DaveGrayTeachesCode]

Thank you!

[@nicolasarcelin3220]

Spectacular, thank you

[@DaveGrayTeachesCode]

Thank you!

[@mosqutio88]

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!

[@DaveGrayTeachesCode]

This is built in to VS Code. Open Preference > Settings > search for "Bracket Pair Colorization" and enable it.

[@hermangeku7461]

Very greate, i learn more things

[@coder200]

need full playlist as soon as possible

[@DaveGrayTeachesCode]

Thank you - the playlist will be added to weekly until complete. 🙏💯

[@BaoNguyen-yy3vw]

great video, thank you so much

[@DaveGrayTeachesCode]

You are welcome! 🚀

[@aWebExpert]

Amazing explanation... thank you! But it's frightening when I see such a big amount of code you write in such a short time... Impressive! I recommend everyone to follow all your videos, it's an invaluable source of knowledge! Although it's accentuating the imposter syndrome 😅🤣😂

[@DaveGrayTeachesCode]

Thank you 🙏 Yes, this Redux series is an advanced topic and pace 💯

[@tamerlanermanbet6331]

Beautifully Video!

[@DaveGrayTeachesCode]

Thank you very much! 🙏

[@loussifchiheb8309]

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 ❤

[@harag9]

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.

[@mariusngaboyamahina9190]

This is an amazing tutorial. Thank you! Are you planning to do videos for RTK Query as well?

[@DaveGrayTeachesCode]

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.

[@dilucsuki8470]

I got incredibly confused with the examples in docs, I hope this helps me understand how to add async state

[@DaveGrayTeachesCode]

Later in the series, async thunks are covered. Even later, RTK Query is covered. Both are ways to issue async queries and update state.

[@dilucsuki8470]

@@DaveGrayTeachesCode ty! I'm already in that part!

[@siddiqahmed3274]

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❤️

[@DaveGrayTeachesCode]

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.

[@siddiqahmed3274]

@@DaveGrayTeachesCode hmm... I'll try that. Thank you ❤️

[@afsertanveer75]

8:56 how we imported counterReducer here whereas there wasn't anything like that from counterSlice file. Can anyone explain it?

[@gaudenciojiron7197]

Very nice course

[@luisalbertovillarortiz7424]

First things first, Thanks for sharing!! Dave sorry, in/at/on 6:28 why do you export counterSlice if you never use it ??

[@DaveGrayTeachesCode]

You're welcome! This tutorial is based on the Redux Essentials tutorial in the docs and it is there - but you can remove if not needed. Using ES7 snippets, I write most of my functions with export - in case I need to export. Reference: redux.js.org/tutorials/essentials/part-2-app-structure#creating-slice-reducers-and-actions

[@luisalbertovillarortiz7424]

@@DaveGrayTeachesCode Sorry, it is possible I was not enough clear. with my doubt. const counterSlice = createSlice({ //Some code here... }); in this part it seems we dont have to export counterSlice...

[@Akshara-k3g]

thanks Dave

[@jomaramomas7682]

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?

[@DaveGrayTeachesCode]

Thank you! 💯 Yes, I want to do some tutorials on redux-saga in the future! 🚀

[@jomaramomas7682]

@@DaveGrayTeachesCode Looking forward to it!

[@hatem.tommy.lamine]

I like your videos a lot and have watched most of them :) can you make a Nextjs+nextauth+JWT Tutorial ? I still can't wrap my head around the authentification with Nextjs

[@DaveGrayTeachesCode]

Thank you very much! 🙏 I am looking forward to working with NextJS this year. When I do, I know I will dive into the JWT auth for it also. 🚀

[@hatem.tommy.lamine]

@@DaveGrayTeachesCode awesome man, keep rocking

[@kopi4417]

Excellent video

[@DaveGrayTeachesCode]

Thank you, Kopi! 🙏