Learn useReducer In 20 Minutes
Вставка
- Опубліковано 19 чер 2024
- 🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
In this video I cover everything you need to know about the useReducer hook. I go over all the main use cases for useReducer as well as many common mistakes that developers make. This is part of a series of React videos where I cover all the important hooks in React.
📚 Materials/References:
useReducer Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 Concepts Covered:
- How to use hooks in React
- How to manage complex state in React function components
- How to use the useReducer hook
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useReducer
The second example was a lot to take in but I think once I understand the design pattern, the whole concept becomes clear. Thank you for the great explanation
Man you're like 23y/o and knows more than a Senior developer 💯
is he Junior developer? 🤔
Senior developers know more about engineering in general. System Design, Data Structures, OOP, communication are all skills that senior devs will need to know. I know I'm going to catch so much hate for this.
@@RickyGarcia_Learning that is 100% correct, primarily system design and TONS of social skills that young people lack. Being a senior isnt only being able to program on your own, its being able to lead a team of devs, something young devs without much work experience will just lack. simplifies is really knowledgeable in the tech aspect tho for sure!
@@RickyGarcia_Learning Rawr! I hate you! Just kidding.
well, this is not senior level, this is React basics. don't get me wrong, I really like his videos, but you can't tell he knows more than a Senior developer just by looking at this video.
You made it very easy kyle Thank you so much here is my learning from the above explanation:-
1.) UseReducer hook gives us an array of [state,dispatch] same as useState hook and use Reducer itself takes an reducer function , inital state.
2.) Whenver we runs an dispatch function the reducer function get's triggered and with the help of reducer function we can update new state.
3.) Reducer function takes 2 arguments which is the current state and action and the parameter action is used to write the logic based on the dispatch action type.
4.) Dispatch function takes an object (action) which contains two things action_type the action which we want to perform and also it takes payload which contains all the variables which we want to pass to over reducer function.
Once Again thank you so much Kyle for the great explanation.
This is easily still the best introduction to useReducer. Clear, concise. Way better than some of the paid classes I attended.
Kyle - Thanks for these great videos. I actually ran into issue the other day at work and went back to one of your videos and articles I'm subscribed to and it helped me in getting that bug fixed. Keep up the good work, man!
Its actually insane how good you can explain what you are doing. Thank you so much :)
amazing content, really impressed with your communication skills and how you break down things into understandable chunks
This tutorial is one of the most useful coding tutorials I've seen so far. Really happy with the way it's all being explained :)
This video is amazing. It's the best tutorial on useReducer I've seen! I love how easy it is to follow because you started with a really easy example by replacing useState with useReducer and then moved on to a more complex one with the todo app.
thanks! your ability to explain complex concepts and implement them effortlessly for us while walking through your thought process is insane. thank you for making these resources free
After binging 3 of these in a row I'm pretty sure I'll be buying your course. You are a great teacher, awesome job!
Kyle, we really need a repo with all of these hooks examples to use them as reminder :)
Thank you for great tutorials!
we can make one
@@temzeks ok go make one ! :D
pls check Full React Course in description
@@zetaalpha3319 bruh.
Super concise and informative. This is truly "simplified". Thanks a lot!
Just wanna say - I've watched a few of your videos, and they've all been very useful, well explained and presented in a digestible manner.
Well done sir! I've a few of your react vids to help understand and use react in a more powerful and organized way. Very generous of you and very appreciated!
Thank you so much Kyle, you’ve made me fall in love with React! I love the power of this hook!
Thank you so much for making this demo. I went through the steps carefully and have a better grasp on the concept. This was a good demo.
Your tutorials are so clean and informative, thank you for all the work you do!
Thank you so much for these examples. I was confused by the React docs because I wasn't sure what types state and todo were supposed to be and am not familiar enough with typescript to understand the source code. Definitely learned within 20 minutes!
Super helpful, reading the docs wasn't clicking for me. Thanks for taking the time to offer this!!
Its the best react hooks series on the entire internet
Clear, easy to understand and direct.
Just what I needed! Thanks man!
amazing.. it was a very hard part of React for me, but now, it's crystal clear to me after watching Kyle's tutorial.
Thanks Brother.
I was confused about this hook and even some others but now I am clear and can use where it needs. So, going to watch the other tuts of hooks. Thank you very much for the clarification with a live example
Kyle, thank you for these excellent videos. They are simple and quick. They are really helping. Again thank you for your great work. Love your videos
Thank you for putting everything together in such a short example, good work as always Kyle.
You talk straight to the point, no bs around and great explanation :) love this channel
This is an excellent video. I was going through a video guide on react (which was great) but once it got to reducers I got pretty confused. This is super helpful.
AND JUST LIKE THAT I learnt how to use useReducer. Short and informative video. Thanks man !
Man! This helped me understood useReact much much better! Thank you so much!! Going to implement it into my current work. Can't wait to dive into your other vids!
Thank you for this. Your videos on hooks are the best videos I could find on UA-cam.
Really a great class! I learned how to use it in the first 5 minutes following along :P Everything got much more clearer to me, thanks!
Great explanation. I really appreciate how you break it down even further with the examples. Helps explain the Hook better than the React Docs.
Actually those who familiar with redux would find this more easier! Thank you for your lesson sir !
It helped me a lot to understand the Redux concept. well done.!
that's probably the best explanation of react's useReducer Hook!! thank you very much for the simplification
Can't thank you enough! This complicated theme is so much easy now after your explanation!
Great tutorial. Thanks for making such awesome content. This was simplest and easiest possible example on useReducer I could find.
This is one of my favorite channels, thanks for everything
This is basically redux, great stuff
Best react hooks tutorial
I agree
Fantastic explanation and easy to follow! I only wish that we'd go into then writing tests at the end, as that will differ between just using useState and useReducer as well as it will get us thinking of how we structure our code so it's easier to test.
Great tutorial Kyle . For beginners second to-do example might be difficult but dont give up try to understand today tomorrow until you get it and watch this video 2-3 times and read some articles on the internet.
You are like a saviour for React mankind. Loved your work, man!
this is one of the best vids out there on the topic, thanks so much
Brilliant video for getting introduced to react useReducer hook. Thank you so much.
Extremely helpful. Well thought out and great content.
Mate I've discovered your channel yesterday. I am not a frontend guy, but since yesterday I watched over 10 videos and bought one of courses which btw is flawless!! Love your presenting style and the content!! I have had senior guys in my teams that don't know 1/10th of the things you teach here!! And most importantly you cut to the chase, no BS!! Kudos and keep going!! Thanks for inspiring us!
Thank you so much for the support. I am glad I have been able to help.
small world dude
best video about reducer i've seen so far, many thx wds
Awesome vid. I like the examples to help understand not just what it does but how to implement it.
Great job explaining it! Thank you, this was helpful!
thanks sir its help a lot , i watch the tutorial on Traversy where you guess but been really confuse when you use useReducer there but watching it here its now crystal clear for me hehehe , thanks again
Thanks for a great video, this really helped me get a handle on reducer functions.
exceptionally clear intro to this topic with a great example. thanks
oh man, you save my day, a very precise and detailed video. thumbs up.
The best explanation on this planet so far.... Great Thanks
that's the most complicated and crazy hook iv'e seen so far
thanks!
Great explanation, took me a couple tutorials to understand why you use this hook rather then use.state, think i need to practice a little more with its use but really starting to get to grips with react, thanks!
Thank you so much for explaining how we pass one `dispatch` function instead of many different handlers. So far in the major project I'm working on, I've only see useReducer used for context providers, and nothing else. And I've seen several places where handleX, handleY, and handleZ are passed in. I think this could be useful to refactor.
you have a special skill to explain everything on very simple examples, so you are making it impossible to not to understand.!!
That answers the question in my head : “why would I use useReducer while I have useState” because it’s always being compared to useState or explained with simple increment Function. Instead of saying they’re similar, saying that you can group multiple functions through conditions in a master function in order manage state in various ways, minimize prop drills and coming up with a simple todo app as you did was genious! Thanks man, I learn a lot from your tuts
wonderful video , the second example just makes everything clear about useReducer
I cant express how great your tutorials are. Thank you
Very helpful. Thanks for all the great React content! Some of the best I can find on the internet
This is my first stop whenever I have to learn a new concept in JavaScript...….thanks for simplifying the Web
Thank you for this amazing tutorial. You're a godsend. 😊
great simplicity. Cheers for the video
Perfect tutorial, thanks man!
This was a very clear tutorial. Thank you very much.
Thank you so much for making this video, it is so helpful.
Amazing lecture, Thank you :)
I have always had an issue in wrapping my head around State Management. After watching this not only I got familiar but understood state management concepts in general. I was able read and implement Redux (In Production) after watching this. After seeing the benefits, I went ahead implemented state management in Angular(Akita) application(In Production). You should do another video on Redux with Redux Toolkit. It would benefit many people like me.
woww just wowww!!!! you make things so damn easy. Thank you so much Kyle!
Finally found exactly what i was looking for. Thanks!
thank you so much for kindly and clearly explaning this hook
Thank you, Kyle. Helped a lot!!
Thanks a lot kyle.. awesome explanation ... cleared all the doubts
Best explanation out of four, I watched so far.
GREATEST ONE AT ALL.
I was taking a course in 'UDEMY' and he was teaching useReducer but personally I didn't understand anything. This one was so helpful Thank you for your effort and for simplifying the web for us ^ ^ ;
aprreciate so much all what you're doing. Thank you!
thank u soo much. Waiting to learn custom hooks from u now :)
Nicely explained. Thanks for the great tutorial.
Thank you so much. well explained the content with simple sample code. I am going to try it.
I watched many videos about useReducer but this one cleared all my concepts about it
Very on point and helpful, thanks a lot sir!
Just see how smooth you go while you code gives me inspiration to emulate :)
I never comment but this time i was impressed by how well you explain and your knowledge, you never disappoint.
Amazing content, brilliant explanation. Everything is great!. Thank you so much, very good job
That was gold as always.
Thanks a lot Kyle!
Hey man very cool video, straight to the point and clear!
Awesome explanation as always, thanks bud.
Brilliant video! Thank you very much for such a useful explanation, mate! :)
I love you man. Amazing explanation. Best react tutor ever
This explanation helped me a lot!
Best explanation in the Internet. Great!!
lover your videos!
I finally understand what is useReducer :)
Thank you, it was a great explanation!
Thank your very much! I like your way of teaching.
These videos are really helpful! Thanks a lot :)
thanks it was a great example! kudos to you.