Redux Advanced Tutorial - React, Redux Toolkit, RTK Query Project

In this Redux advanced tutorial, we will use React, Redux Toolkit, and RTK Query to completely transition a blog project from Axios async thunks to RTK Query, normalized state and optimistic updates.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

Redux Advanced Tutorial - React, Redux Toolkit, RTK Query Project

(00:00) Intro
(00:34) Welcome
(00:48) Prerequisite knowledge
(01:05) Starter Source Code
(01:46) JSON Server
(03:50) Create an api slice
(05:43) Update postSlice to an extended api slice
(08:54) getPosts endpoint method
(13:19) Update the postsSlice selectors
(15:50) Reconfigure the store
(18:59) PostsList component
(21:18) PostAuthor component
(22:21) getPostsByUserId endpoint method
(24:50) addNewPost endpoint method
(26:09) updatePost endpoint method
(27:13) deletePost endpoint method
(27:58) Export the auto-generated hooks
(28:30) AddPostForm component
(30:57) EditPostForm component
(33:13) UserPage component
(36:04) Header component
(37:00) Optimistic Updates for Reactions
(42:49) ReactionButtons component
(44:57) View Redux state cache and network requests with dev tools

📚 Tutorial References:

📚 General Redux Toolkit References:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

✅ Follow Me:

Was this tutorial about Advanced Redux with RTK Query and React helpful? If so, please share. Let me know your thoughts in the comments.

#react #redux #advanced

[sashalehedza]

I can’t express in words how grateful I am to you, the course is at the highest level, as well as the react course on creating a blog, you are a great fellow and this content is even better in some places than many paid courses on udemy, I am sincerely glad that I got on your channel, I hope everything will be fine in your life!

[martapfahl]

Optimistic or pessimistic updates are crucial when using RTK Query for a good UX in my POV, thanks you helped me a lot!

[andrewclarke]

Holy moly, Dave. This has got to be the toughest lesson you've put together yet! There's a heck of a lot to take in here. I get the general idea of how it all works but understanding it in detail, line by line, is really difficult.

[michaelchristensen]

Hey Dave. Loving your content. I think it would be very valuable for the community if you could create another more basic tutorial using RTK query starting with a project from scratch. I feel like I followed your redux tutorial pretty well up to this one. However, with all of the copying, pasting, and refactoring, this video was by far the hardest to follow. I have watched it multiple times now and done a bit of digging elsewhere and in the docs and am slowly getting it, but I would love a video with a more basic approach with a simple project from scratch. All the best!

[wishmeheaven]

Splendid!
What a treasure.
Thank you, Dave.
I wish there was just an extra example with the latest v2.0 (combine slices, lazy loading, in-slice new selectors mechanism, etc.) but overall, that series is top notch.

[siddiqahmed]

This channel is definitely one of the greatest resource for anyone who want to learn the mern stack for now😅. I know you are going to add more awesome content in other technologies as well. May Allah blesses you sir👑❤️

[aakashjyoti]

thankyou sir for this excellent tutorial and great explanation too. It makes my life easy with redux.. as a beginner, I'm having a hard time with redux but after this tutorial, this is changed.

[shineLouisShine]

Thanks.
This one, with all the new syntax and without any visual presentaion of the outcome along the way (for 45 minutes), was a particular tough one..

[elvissautet]

This man's content is super best🇰🇪🚀🚀

[vrdevchris]

Thank you for walking through this very helpful. I think the table way of thinking is effective, yet not always needed depending on scale. I will take that into my job and see if it is best for us. But thank you for being so slow and explaining absolutely everything. Helps me to make my own assumptions and thoughts that works best for my team =)

[takisnani]

Thanks Dave!
Just a very simple trick: You can use ctrl + shift + k to directly delete the whole line
Have a good day!

[compelledcatholic]

I appreciate your effort in all the content you have produced. Your are truly a credit to the community. I have to admit, though, that the pace of the last few videos was difficult for me. I am sure it's due to all of these concepts being new to me, but there were a few times I felt like I was trying to drink from a fire hose. I had to step away, and come back later. I'm still a bit confused on the async / thunk approach vs. RTK Query. From my reading, it seems that the RTK Query library is meant to reduce boilerplate and be more efficient in the purely mechanical process of moving data. However, it is not diet thunk or thunk-light. I'm not sure if it was the pace or my newbness, but the concepts and verbosity of RTK Query didn't make me want to use it more than using thunks. I need to tinker with it, I suppose. I felt like the concepts in thunks were at least within my grasp of understanding, but when following along with the advanced RTK query tutorial, a lot of it was just too dense to digest. Will likely have to replace my mouse from the number of times I had to pause, back up.... but I do appreciate all you do. I'll have to spend some more time with Redux.

[prezes.]

Great tutorial! I have one question. How to pass argument to query build if api call is for exmaple "/users?arg=foo"? Because when Im trying to pass it from component via useSelector by calling selectUsersResult with an argument its not working. It only works when Im hardcoding argument in usersSlice like that but in my case arg is dynamic so it cant work like that. I would appreciate help with this, thank you

[alonsovillarral]

This is a high quality tutorial, i love your videos dave!

[guyeilon]

Thanks for the wonderful tutorial. would like to see last part preform without the Performance Techniques and Optimizations, and focusing the combinng RTK Query with Redux Toolkit. Thanks again. great job!!!

[akashjaiswal]

Hello Dave, Great Content, I am really grateful for this redux series.

[amitei]

Thanks for the video, that's exactly what I was looking for!
The only difference is I use redux-saga, because there's A LOT of complex asynchronous logic in my project. I am having a hard time trying to weave it into the stack you represented.

[ВолодимирПриходько-лл]

Hi there Mr. Gray!
I would really like to express my gratitude towards your work! Your Redux Toolkit - RTK Query course is truly amazing! I learned so much by watching it and reading documentation afterwards. Your tutorial significantly simplifies understanding of some tricky parts of Redux library. However I have a small question about this tutorial, if you will.

So when you update a reaction in the list of posts, it looks like the whole list is being re-rendered. Is it expected behaviour or only one post should be re-rendered as it was in Redux Toolkit series? Thank you in advance!

[ankitnegi]

Hello Dave, Great work you are doing, one more request from me is to add a video where you show how to use all this with typescript. And one please for Next js with Redux Toolkit. It would help a lot. Thanks💛

[chrisstucker]

Hi Dave, great video but a lot to take in! I have one question regarding line 61 at 15:50. Why do we need to pass in the selectPostsData(state) function? Why can't we just use getSelectors(state => state.posts) like we did last time? I know selectPostsData() is creating a memoized selector but I thought normalized state was kinda memoized anyways