React Redux Full Course for Beginners | Redux Toolkit Complete Tutorial
HTML-код
- Опубликовано: 29 июл 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
This React Redux Full Course for Beginners is a complete tutorial full of 4 hours of React and Redux Toolkit code and instruction to help you learn state management with Redux. Think of this React Redux full course tutorial as a video textbook with 7 clearly defined chapters.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
📬 Course Updates ➜ courses.davegray.codes/
🔗 Source Code and Resources for this React Redux Toolkit Series: github.com/gitdagray/react_re...
React Redux Full Course for Beginners | Redux Toolkit Complete Tutorial
(00:00:00) Introduction
(00:00:51) Chapter 1: Redux Toolkit Intro
(00:20:10) Chapter 2: App Structure & Data Flow
(01:04:22) Chapter 3: Async Logic & Thunks
(01:33:48) Chapter 4: Blog Project
(02:13:04) Chapter 5: Performance Optimizations
(02:46:50) Chapter 6: RTK Query Intro Project
(03:10:02) Chapter 7: Advanced Redux & RTK Query
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
Based on the "Redux Essentials" tutorial in the official Redux Toolkit docs by Mark Erikson with some project additions and modifications along the way: redux.js.org/tutorials/essent...
📚 Tutorial References:
🔗 NPM JSON-Server: www.npmjs.com/package/json-se...
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: redux-toolkit.js.org/
🔗 Redux Devtools: github.com/reduxjs/redux-devt...
🔗 Immer.js: immerjs.github.io/immer/
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this React Redux Toolkit full course for beginners helpful? If so, please share. Let me know your thoughts in the comments.
#react #redux #course
A 50 second intro followed by 4 hours of code and instruction to help you learn about modern Redux with Redux Toolkit and RTK Query. I bookmarked all 7 chapters in the description. If you complete one lesson per day, you'll complete the full course in one week. Join my Discord server to discuss and ask questions: discord.gg/neKghyefqh
Thank you, do you have any resources on Django React Authentication?
Amazing tutorial.
However, there were some difficulties along the way due to javascript uniqueness , probably could be avoided by using typescript .
Some code were very old dating back to ES 1 version to ES 3-4 maybe, since i am used to es 5-7 and the latest version i found it difficult to use the old code hence it was quite a pain for me . but all in all , very good.😄
Hiya! I'm the primary Redux maintainer and creator of Redux Toolkit. Thank you for putting this video together! In fact, I see that the source code is straight from the docs "Redux Essentials" tutorial I wrote... and that's GREAT! That means it's the same examples I want people to learn from! :)
I've been thinking of doing a video series based on the "Essentials" tutorial myself at some point, and I still might. (Eventually! When I have time! HAH!)
But until then, this appears to be a great quick intro to Redux Toolkit and React-Redux, the way we _want_ people to learn and use them today.
So Dave, thank you for taking the time to make this video!
Thank you, Mark. I noted I wanted "to give credit where credit is due" in the video series (playlist: ruclips.net/p/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo) and also that I modified a few things for the tutorial like starting with a bulletin board example, connecting to the jsonplaceholder site and populating reactions it doesn't provide. I'm glad you like it, and thanks for providing a great foundation in the docs! 💯
Hey Mark. When you do the tutorial please just don't do tutorials like every other YT channel. Please stress on the terms that you have used in the documentations. Also it would be great if you walkthrough your thought process while making the docs.
Mark.. The set up for redux toolkit is more complex than Context Api.. Frameworks should be created to make things easier than the existing ones
@@emmanueloluwafemi7236 Context and Redux are entirely different tools that solve different problems, so that's not a good comparison.
Context is a Dependency Injection tool for a single value.
Redux is a tool for predictable state management outside React.
Context is already built into React, whereas Redux is a separate library.
So yes, they _do_ have different setup, because they're not the same thing.
@@markerikson3383 yes I know but they do the same function when you apply useReducer with useContext.. It's the same function with redux. It's faster and more efficient than redux toolkit.... Redux is to manage state and also to make the state global to other components. This is the same work with useContext and useReducer... I don't see any reason I should abandon context Api for redux toolkit yet. I'm sure you know what I mean... I'm a full stack dev
Thank you Dave, I can't believe you are putting such an amazing tutorial with simplicity for free on youtube. other creators make things complicated to show that they know something which is not true but only confuse learners.
You're welcome! 🙏
Dave you're a godsend, you take from your time and make these masterful videos to teach us how to code. Other teachers should be like you. If there's anyone who contributed a lot to this world's future by raising a lot of skilled coders, it'll be you, thanks a lot! ❤️🙏
Thank you for the kind words, Ibrahim! 🙏
Thanks a lot Dave ! I appreciate it from heart. Watching your MERN full tuts and end up here , totally worth the time. In my opinion very few have the quality to explain things with no sweat and you are one of the best.
Thank you for the kind words!
I paused the video just to tell you're an amazing instructor. I can't believe I watched the whole course for free! I'll definitely recommends your channel to my friends. The amount of time and effort you make this video, you're truly a godsend.
Thank you for the kind words! 🙏
Given that I am an hour away from completing your React course(it is really nice), which I take daily from 4:30 am to 7:00 am for a month now, this Redux tutorial will be another nice tutorial to solidify my React knowledge.
Dave, This tutorial is perfect for beginners and your explanation is good to get understanding. The topics you are covered are most asked for job interview. Thank you I have learnt redux with this video and I just need to contribute in projects.
you are actually a generous man beside teaching, you also foster me to read the document and find out the way to learn another stack by myself. Thank you Dave
Glad to hear that!
For those of us in 2024, you may need this bit of additional code for part 3 to filter out the duplicate posts from the API. Not sure what happened, but I am getting 2-4 of each posts in my request and I copied exactly from the source code.
let content
if (postStatus === "loading") {
content = "Loading..."
} else if (postStatus === "succeeded") {
const orderedPosts = posts
.slice()
.sort((a, b) => b.date.localeCompare(a.date))
const preContent = orderedPosts.filter((val, i) => {
if (i !== orderedPosts.length - 1) {
return val.id !== orderedPosts[i + 1].id
}
return val
})
content = preContent.map((post) => (
))
} else if (postStatus === "failed") {
content = {error}
}
Thank you!
You can also use Set to filter out the duplicated posts by ID, I dont know if this the better approach, Can someone explain why this duplicating is happening
const uniquePosts = Array.from(new Set(posts.map((post) => post.id))).map(
(id) => posts.find((post) => post.id === id)
);
let content;
if (postStatus === "loading") {
content = Loading...;
} else if (postStatus === "succeeded") {
const orderedPosts = uniquePosts
.slice()
.sort((a, b) => b.date.localeCompare(a.date));
content = orderedPosts.map((post) => (
));
} else if (postStatus === "failed") {
content = {postError};
}
This channel brings the best content there is out there. Every time I need a specific content I come here to see if there is an explanation of it.
Thank you, Gabriel! 🙏💯
Your way of writing code is so elegant, I love it!
One of the best coding tutorial I have every seen. Though I have already some past experience with React and Redux, the way you present and explain is superb and deepen my understanding. Thanks! :)
Glad it helped!
I just love the way you narrate and explain. Thanks a ton for all the wonderful content !!! If possible kindly do a series/comprehensive tutorial on 'styled components'. thanks again :)
You're welcome, Chethan! 🙏 And thank you for the kind words and request!
Thank you Dave for providing high quality content. You're a wonderful instructor.
Thank you for the kind words, Ali! 🙏
WOW! Exactly what I needed, just on the right time! :D Thank you so much for such great content and dedication to share your knowledge! 👏
You're welcome, Eduardo! 💯
Same feeling 🥰🥰🥰🥰🥰 and thanks a lot Dave gray...
sir , I am Indian doing self study for web development, & you are the best resource that I found on internet for web dev.
Thanku very much sir 🙏🙏🙏🙏🙏
Thank you for the kind words!
Thank you for this great tutorial! You’ve done an amazing job with explaining this topic in detail. Looking forward to more videos!
You're welcome, Cervantes! And thank you for the kind words! 🙏
thank you so much , ive been waiting for someone to expalin it in a good way and here you did , thank you Dave , its really so helpful
You're welcome, Sam! 💯
Hey Dave, I came across this video after lots of videos and gotta say this is the best one I've watched.
Thanks for such a wonderful video.
Glad it was helpful!
Hey thank you for this tutorial. I like how you go over each line of the file. Also your explanation is perfect, especially at chapter 5.
Glad it was helpful!
Good day Dave Gray, what a nice redux toolkits tutorial, but I have a comment on the way majority of you expert programmers do teach programming, this is something practical, it would be better if you have an application you want to clone, and then put it aside, work with the documentation, as you are teaching, lets know the reason why you are using particular hooks, I think by that, no body will come here and feel like "oh no am not gaining anything here", because as you are writing the codes without documentation makes it a little bit difficult, because I personally feel like that, can't talk about other people....... If you are writing the code with documentation, then everybody will flow, and know the reason why you are using a particular hooks
Great work. Nice that you combine all parts in one video)
Thank you! 💯
When i become a decent web developer, my next mission will be to find this man and buy him a drink and a car. what a guy
Your delivery is so brilliant, thank you for this course!
You're very welcome!
the best React tutorial I've seen, best practices and clean architecture. I am impressed
Thank you for the kind words!
Thank you Dave! You have no idea how helpful this series has been
You're welcome! 💯🚀
Wow! Again, thank you for this! You're the best teacher I've ever had.
Thank you for the kind words, Peter! 🙏🙏
I followed you Dave within entire tutorial. GJ!!! TY!!!💙💛
Same thing in Typescript and we have perfection. Thanks Dave!
You're welcome and thank you for the request! 💯
Just finished it right now in 4 days and I was really needing to learn redux for an application that I am creating and in the of this I am really sure I came to the right place... Congrats Sir @Dave Gray
Happy to help!
Well i simply wanted to learn Authentication in React.... and ended up watching Node 7 hours Course, React 9 Hours Course and right know learning Redux 4 hours course. Life can be surprising !!!
I am so happy that I have opportunity to learn from well organized tutorials, and don't have to bother about outdated knowlage.
You're welcome! 💯
same here :D
Wow, just finished this after i think 2 weeks cuz i was on and off. I now understand redux, redux thunk, rtk query and have a deeper understanding of react in general. Thank you very much.
You're welcome!
I needed to implement this on my projects, thank you for this wonderful intro to Redux.
You're very welcome!
As a beginner in redux, I've got complete disorientated after the first lesson. The second lesson has too much information without explanation and I expect the rest of them to be the same. After all, I appreciate the time spent doing the video, but this guide is for more advanced than beginner people.
I totally agree with that.
💯 true!!
I agree
I thought i was way less than beginner 🥲🥲
I would advise you to get more familiar with reducers (useReducer hook) before starting this tutorial. If you are familiar with reducers then it wouldn't be too difficult for you to follow the tutorial.
You are genius as well as kind-hearted man sir...that's why uploading very high quality vedios
THANKS so much for you redux tutorials , been watching alot of videos on redux and even on Udemy and your course is just way better, thanks for helping me in my career.
You're welcome, Douha! 🙏
With the first lesson i understand how the redux works and with the second lesson i understand how to implement it in a project Thank you for the great tutorial i will keep watching
this course is really really good but i wont recommend to absolute beginners,because the guy explains things nicely but he kinda assumes that most of us already know some basic of react-redux and reduxtoolkit .This video was definitely good for me because already watched some tutorials before jumping onto this video .This video will definitely helps those guys who have some what knowledge of reduxtoolkit
thanks a bunch and awesome tutorials🔥🔥🔥🔥🔥
awesome video on Redux! one of the best ive seen. killer content as always Dave.
Thank you! 💯
Hi dave, for the rtk Query Advanced section, why are we usuing selectAll (selectAllUsers) in UsersList component, yet in PageList component, we use select selectIds (selectPostsIds)? the docs say that selectAll: maps over the state.ids array, and returns an array of entities in the same order. and selectIds: returns the state.ids array. still dont understand why we are using one for postslistand a different selector for userslist
Thanks Dave for great lecture and excellent examples that explain step by step redux and redux toolkit from zero to hero
thank you Dave. you have clarified a confusion that I'm faced with. thank you very much. please could work with this same project and teach us unit testing.
You're welcome and thank you for the request! 💯
I watched your playlist on redux toolkit. They are great and no room for any confusion. Thank you for your help 🙏
Thank you for the support! 🙏
Dave you are such an amazing teacher thank you for making this course available for us new devs for free i will recommand your channel for my friends
Thank you for the kind words!
watched this in Jan 2024, A great course. Thank you Dave.
I am heading to zerotomastery Asap.
Man, you are doing God's work by putting out such accessible quality content and that too for free!
Thanks man. I actually had no idea where to start with learning redux until this video.
Glad I could help!
For those of us who struggled to find why posts are duplicating after Chapter 3 ( lesson 3) just remove the react's strict mode, it helped me cause it doesnt do the rerender i think :)
Hi Dave Gray, can we add decrementByAmount button which subtracts with input value from the total. actually i am trying by using same strategy like incrementByAmount but the decrementByAmount btn is not working can you help in this regard?
FYI! There is an extension for the useState statement that you have to install and that is very helpful. ush
I heard an advice, being a developer try to automate things as much as you can especially the repetitive tasks.
very helpful! Thanks!
Hello! Thank you so much for this lesson! This lesson (and others) helped me a lot on my actual school project! I'm studding to reorient professionally to frontend developper and your lessons helped a lot through this journey 🐣 Thank you so much for sharing all this knowledge ❤🙏
You're welcome!
Thank you Dave, you are such an amazing tutor with good contents, you have really lifted us the jnr Devs in good ways, keep it up, Nigeria ....
Thank you, Gerald! And hello to Nigeria! 👋
1:19:16 my postExcerpt comp not showing up , check slice and comp and nothing is wrong , is anyone having this same problem?
This will be a great resource for many developers during this year ... Great Dave 👏🏻
Thank you! 🙏💯
@@DaveGrayTeachesCode Hey Dave i know redux but i only need the way to use redux in class based components have you deal this
2:30:39
In UserPage.js I did this instead of using createSelector:
" const allPosts = useSelector(selectAllPosts)
const postsForUser = allPosts.filter(post => post.userId === Number(userId)) "
and I didn't see any record of UserPage re-rendering when count increased using Profiler. Can anybody explain this? What is the difference between this and the createSelector method?
Thank you for the free course, I got full help and I finished it
Sir, I've been waiting for this superb piece from you for a long time. Thank you Very much
You're welcome! 💯
By far, the best redux tutorial. Thanks for sharing!
Thank you for the kind words! 🙏
Best ever tutorial on redux toolkit explanation is 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥. Thanks Dave for a such effort
this tutorial took me 7 days to complete 😂, because I am practicing in parallel with the docs and chat gpt to answer to my stupid questions, so I can get the idea how the things works in deep and be confident in my knowledge
At 26:00, How come the function receives state as a parameter? how does redux knows that the state needs to be passed.
Also, for the state, why we are getting the value of state by writing state.posts even though we are exporting reducers, not the actual value from the store.
It's confusing...
Wow! Thank you! This is very much appreciated!
You're very welcome! 💯
It makes a lot of sense, thank you so much 🥰
Glad it was helpful!
Thank you too much Dave, there isn't much tutorials on the internet about redux toolkit, I've got troubles learning redux toolkit with typescript, specially data fetching part, could you make tutorials on that topic, thanks again for your effort!
Thank you, Adrian - this course shows various ways of fetching data, but it does not include Typescript. I'm getting enough requests that I may need to do one with TS in the future. 💯
yes, typescript +1
Hi, can somebody explain why all the posts in postList get re-render everytime the reaction button is clicked, and how normalization solve the problems? most appreciate if somebody helps to explain .
I'm not fully get it. So I can have a method getTodosQuery and it will return a list of data and even a flag if it still loading or done. Then I assign the result to a new const and use in a component. But what if I need to acces some of loaded data in completely another component which is five level deep. Should I again call getTodosQuery?
Thanks Dave, you are an outstanding teacher, I highly recommend checking out the Redux tutorial. As someone who has experience with Redux, I found the tutorial to be an excellent resource that helped me deepen my understanding of the core concepts and best practices of Redux. One thing that I particularly liked about the tutorial is that it strikes a good balance between theory and practice. The explanations of the core Redux concepts (thorough) are excellent with examples to reinforce your learning and apply the concepts to real-world scenarios.
Thank you!
My best tutor of all time, special thanks for this wonderful video.
Hi Dave,
What should we do if we have paginated data and we wanted to implement optimistic updates? Like adding reactions to paginated blogs using onQueryStarted.
hey dave i apprecite your work you are ding great can you explain me the 37:40 why did you this postAdded: {
reducer(state,action){
state.push(action.payload)
},
prepare(title,content){
return{
payload:{
id : nanoid(),
title,
content
}
}
}
}
istead of just
addPost:(state,action){
state.push(action.payload)
}, is there any video that you recommed or any part of this video that you would tell me listen to?
users.find() in the post author component is returning undefined value hence all my post are being set to unknow user ..what am i doing wrong?
Thank you so much for always sharing your knowledge and helping the community
You're welcome! 💯
Dave, you're doing nice! Thanks a lot!
You're welcome! 💯
Dave, you're a good teacher and thank you for your courses.
I just wish you could reduce your speed a bit. Your courses are helping me a lot
You're welcome, Emmanuel!
Dave, in the execution of the RTK query, I get a 404 error when I make a PATCH and DELETE request. If I make the same request on the added Todo components it works fine but on the existing Todos then it gives the error. I even tried with your file, and it gives the same error. Can you help me with this
@dave please help me, I am getting undefined function while extract the generated hooks from RTQ.
Thanks in advance,
Your help is really appreciated
Thank you very much for your kindness .... no one teach better than you with every step explanationn thank you very much
You are welcome!
Got a question. I've done the chapter 2 and converted it to the React verion not using Redux then it looks fine , have no ideas what the needs to use Redux in the project
Dave i believe you are a master class level >>> happy to follow you
Really found this content useful, thank you so much for it .
You're welcome! 💯
It's just the best Redux toolkit tutorial ever, awesome!!!!, thanks a lot.
You're welcome!
Special thanks for that "Performance" section, pretty useful
Cheers!
Glad you liked it!
Wow this is how some concept should be taught...... An awesome Hand-On experience... Thanks @DaveGray
You're welcome! 💯
why do we need updatePost to be a thunk, when data is already in state and no async logic is needed. Kindly Clarify. Thanks
Hi Dave, you just made me a better dev! Thank you so much!
Glad to hear that!
Wow. Thanks for this amazing tutorial
Hey Dave, thankyou for your tutorial. But I did not understand everything properly because there was lack of explanation for example what does useSelector do and all.
It is just a healthy advice no criticism at all, but it was hard and had a feeling I might have to memorize everything .
UseSelector return undefined after fetchPost method is dispatched. I don't know why. I have been working on it for an hour. Does anyone know help me
good job thank you
first 20 minutes was all i need :)
I appreciate the knowledge you put in 🙏🙏.
Thank you! 💯
You are excellent teacher!!!!
Thanks for this tutorial Dave. You are a very important person.
Glad it was helpful!
Thank you for this ❤️
You're welcome! 🙏
Hey Dave!! Thank you so much for creating such an awesome tutorial on the Redux Toolkit query. However, in chapter 7, where you are using createEntityAdapter, I am having a hard time converting this example to typescript version. Would you be able to provide a TS version of this example in your supporting repository. Thanks heaps !!!
I can surely say that you are the best. Guru, my teacher
You know me! Liking the video before even starting to watch it because I know the content will be great as always
I appreciate that!
Hello Dave,
Amazing Video.
I have a question. Is their any significance of naming actions as reactionAdded and postAdded.
Is there any naming convention for actions. Will naming them as addReaction and addPost be any different?