Learn useReducer In 20 Minutes

Подписаться 1,6 млн

Просмотров 487 тыс.

50% 1

🚨 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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 615

@thesuperiorman8342 3 года назад

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

@nickmee8731 3 года назад

Man you're like 23y/o and knows more than a Senior developer 💯

@negatif9163 3 года назад

is he Junior developer? 🤔

@RickyGarcia_Learning 3 года назад

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.

@Justin-ei1qf 3 года назад

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

@KevinBeal 3 года назад

@@RickyGarcia_Learning Rawr! I hate you! Just kidding.

@SupunPraneeth 3 года назад

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.

@mohammedalmukhtar8949 3 года назад

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!

@lodoss118 3 года назад

amazing content, really impressed with your communication skills and how you break down things into understandable chunks

@dl88889 3 года назад

This is easily still the best introduction to useReducer. Clear, concise. Way better than some of the paid classes I attended.

@rickeyupadhyay6898 Год назад

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.

@cryptonite6000 Год назад

Its actually insane how good you can explain what you are doing. Thank you so much :)

@PenguinjitsuX 2 года назад

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.

@darinadimitrova7432 Год назад

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

@DuyTran-ss4lu 3 года назад

Super concise and informative. This is truly "simplified". Thanks a lot!

@VinnieBrazelton13 3 года назад

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!

@alexzhang2099 Год назад

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

@Bellathor 2 года назад

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.

@dubskiski4964 2 года назад

Your tutorials are so clean and informative, thank you for all the work you do!

@rBroneak 2 года назад

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!

@hoangcuongtran4606 2 года назад

Actually those who familiar with redux would find this more easier! Thank you for your lesson sir !

@alyssadeng6462 2 года назад

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!

@HarveyXE 3 года назад

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.

@devc.krishna8573 3 года назад

Its the best react hooks series on the entire internet

@daveliew 2 года назад

Thank you so much Kyle, you’ve made me fall in love with React! I love the power of this hook!

@DimoDimov1 2 года назад

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.

@elie_hokayem 3 года назад

Thank you for putting everything together in such a short example, good work as always Kyle.

@klc3rd 2 года назад

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.

@praveenkg725 9 месяцев назад

Clear, easy to understand and direct. Just what I needed! Thanks man!

@devilstrela 3 года назад

You talk straight to the point, no bs around and great explanation :) love this channel

@munirmahmud1415 3 года назад

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

@joelwalkley3902 3 года назад

Super helpful, reading the docs wasn't clicking for me. Thanks for taking the time to offer this!!

@tejasmandre666 3 года назад

AND JUST LIKE THAT I learnt how to use useReducer. Short and informative video. Thanks man !

@mohammedmogary7134 2 года назад

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

@RobiulIslam-dn9mm 2 года назад

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.

@setoseng Год назад

Great explanation. I really appreciate how you break it down even further with the examples. Helps explain the Hook better than the React Docs.

@SaurabhNative 3 года назад

Great tutorial. Thanks for making such awesome content. This was simplest and easiest possible example on useReducer I could find.

@ridl27 3 года назад

Kyle, we really need a repo with all of these hooks examples to use them as reminder :) Thank you for great tutorials!

@temzeks 3 года назад

we can make one

@iJuce 2 года назад

@@temzeks ok go make one ! :D

@zetaalpha3319 2 года назад

pls check Full React Course in description

@ridl27 2 года назад

@@zetaalpha3319 bruh.

@yyxx9309 Год назад

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!

@jadalhamwi1543 3 года назад

that's probably the best explanation of react's useReducer Hook!! thank you very much for the simplification

@mma-dost Год назад

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.

@pqrsandeshbackup 11 месяцев назад

Thank you for this. Your videos on hooks are the best videos I could find on RU-vid.

@adtc Год назад

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.

@simdanofficial 3 года назад

This is one of my favorite channels, thanks for everything

@AmodeusR 2 года назад

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!

@satya-lifevlogs 3 года назад

You are like a saviour for React mankind. Loved your work, man!

@easterling9489 Год назад

Can't thank you enough! This complicated theme is so much easy now after your explanation!

@kisnasur2145 2 месяца назад

It helped me a lot to understand the Redux concept. well done.!

@pavankjadda 2 года назад

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.

@leanprogrammer 3 года назад

This is basically redux, great stuff

@jaisalshah7731 3 года назад

The best explanation on this planet so far.... Great Thanks

@zakichoudhury8501 Год назад

Brilliant video for getting introduced to react useReducer hook. Thank you so much.

@imaxle3663 3 года назад

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

@kazak4761 Год назад

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!

@bushbuddyplatypus 10 месяцев назад

exceptionally clear intro to this topic with a great example. thanks

@musicinsession Год назад

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!

@WebDevSimplified Год назад

Thank you so much for the support. I am glad I have been able to help.

@NikosKatsikanis Год назад

small world dude

@leylakanaan3912 Год назад

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

@njayman 3 года назад

Best react hooks tutorial

@edoardocasella8169 3 года назад

I agree

@jimhawkins2483 7 месяцев назад

best video about reducer i've seen so far, many thx wds

@prvizpirizad4336 3 года назад

you have a special skill to explain everything on very simple examples, so you are making it impossible to not to understand.!!

@KhoaNguyen-mv2mu 3 года назад

Just see how smooth you go while you code gives me inspiration to emulate :)

@ecoded3033 3 года назад

Extremely helpful. Well thought out and great content.

@MarshallBanananana Год назад

Best explanation out of four, I watched so far.

@griffinbaker964 2 года назад

this is one of the best vids out there on the topic, thanks so much

@jbworshipmoments3831 Год назад

Very helpful. Thanks for all the great React content! Some of the best I can find on the internet

@TheCesarGarciaITPro Год назад

Awesome vid. I like the examples to help understand not just what it does but how to implement it.

@waleedkhan5372 3 года назад

oh man, you save my day, a very precise and detailed video. thumbs up.

@itamarreiter8438 11 месяцев назад

that's the most complicated and crazy hook iv'e seen so far thanks!

@stumpedtroper 2 года назад

This is incredible. I'm pretty new to react. I once tried using useState for a complicated state and ended up abandoning the project lol. UseReducer was exactly what I was trying to do with useState then.

@mikelan9854 Год назад

wonderful video , the second example just makes everything clear about useReducer

@victorsmilyborgesalmonte8418 Год назад

Best explanation in the Internet. Great!!

@user-sy5fd7kn8w 8 месяцев назад

Great job explaining it! Thank you, this was helpful!

@rehanazeem5694 5 месяцев назад

I watched many videos about useReducer but this one cleared all my concepts about it

@DShazin 2 года назад

I cant express how great your tutorials are. Thank you

@hasibulhasanhasib3242 2 месяца назад

This was a very clear tutorial. Thank you very much.

@learncodingwithahmet 2 года назад

great simplicity. Cheers for the video

@santosdejesusmateocamacho3086 Год назад

I never comment but this time i was impressed by how well you explain and your knowledge, you never disappoint.

@monjurmorshed2854 Год назад

Nicely explained. Thanks for the great tutorial.

@nviiriyusuf2609 Год назад

This is my first stop whenever I have to learn a new concept in JavaScript...….thanks for simplifying the Web

@tedramert785 3 года назад

Perfect tutorial, thanks man!

@mertdr 2 года назад

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

@EduardKaresli 3 года назад

That was gold as always. Thanks a lot Kyle!

@legen_dary42 2 года назад

Thanks for a great video, this really helped me get a handle on reducer functions.

@aafighters4535 Год назад

A single video clears all the concepts

@hammam92 3 месяца назад

I love you man. Amazing explanation. Best react tutor ever

@abdillahihussein1816 2 года назад

Amazing lecture, Thank you :)

@user-cj6te2oj4m 3 года назад

Finally found exactly what i was looking for. Thanks!

@kalvinwei19 2 года назад

Thank you, Kyle. Helped a lot!!

@wokefactory7392 3 года назад

I finally understand the useReducer API... Thank you!!!

@simonfreeman2427 3 года назад

Thank you for this amazing tutorial. You're a godsend. 😊

@enginb3818 Год назад

Amazing content, brilliant explanation. Everything is great!. Thank you so much, very good job

@carreiracomti 2 года назад

Man, this was amazing! You've just got a new like and a new subscriber! I'm starting my channel on teaching about the tech career path and I hope to become as good as you on teaching and helping others! Thank you very much and congratulations!

@AGriffith 2 года назад

Hey man very cool video, straight to the point and clear!

@bala2222222 Год назад

Thank you so much. well explained the content with simple sample code. I am going to try it.

@Dean-Shepp 3 года назад

Awesome explanation as always, thanks bud.

@parasmyname784 2 года назад

Thanks a lot kyle.. awesome explanation ... cleared all the doubts

@janeinaustralia2119 2 года назад

Awww thanks heaps such a great explanation! Got stuck at course on Udemy wish I would seen your lecture before getting one!

@jasonhuang4333 2 года назад

Good explanation and demonstration!

@koordszz 2 года назад

Kyle, you don't know how much time you've saved me for learning this hook.

@jacquitratongamanahaja979 2 года назад

Thank you so much for making this video, it is so helpful.

@theidanking Год назад

lover your videos! I finally understand what is useReducer :)

@Orhanozkercin35 3 года назад

This explanation helped me a lot!

@hailedagmawi8109 7 месяцев назад

thank you so much for kindly and clearly explaning this hook

@ren33710 Год назад

Great video, as always. I'm working my way through the React Hooks playlist and everything is so well explained. Regarding dispatch, seems like a large dispatch function with many paths through it would be harder to wrap tests around than a number of discrete helper functions. Which approach is better for test automation? Or is that not an issue.