Это видео недоступно.
Сожалеем об этом.
Redux For Beginners | React Redux Tutorial
HTML-код
- Опубликовано: 12 авг 2024
- Check out my courses and become more creative!
developedbyed.com/
Join my patreon: / dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Hello everybody! In this episode we are going to learn about redux, which is a state management library. We are going to use redux with react to help us grow and maintain larger apps.
We are going to be using react-redux which now offers a few new tools that easily integrate with react hooks, such as useSelector and useDispatch.
I highly recommend you to watch my react for beginners video if you are having trouble following this tutorial.
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
#react #redux
The easiest explanation about react-redux I've ever seen
Exactly!
first time i started to read about redux was like a: "What a hell, so complicated!" ))))
Can’t agree more
So true!
I know, right. I tried watching so many tutorials but none made me understand the concept properly
I watched so many different tutorials, and even bought a Udemy course before I found this video… no one explained the core concept in a simple way, they all just jumped into making a million files and doing things out of order. You helped me finally grasp this, thank you so much!!!
i know right
Exactly
Yup same here
Yes, I have already forgot all about redux. Did you try Use Context + Local Storage?
which udemy tutorial if you dont mind telling?
TIMESTAMPS
00:00 Introduction
01:41 Overview of app
07:08 Initialise app
08:46 Setting up with Redux only
08:54 Store
09:57 Actions
10:47 Reducers
11:22 Dispatch
19:27 Integrating React-Redux
23:05 combineReducers
27:35 Redux DevTools
30:54 Hooking up to app
32:04 useSelector hook
34:49 useDispatch hook
38:12 Adding arguments (payload) for Actions
You forgot the goodbye song
Thank uu so much
39:35 Goodbye, my lover!
thank you
Thanks
How did this guy teach everything in 40 minutes that people aren't able to teach in 40 hours? Absolutely amazing.
Because pedagogical talent like all talent follows a Pareto distribution
@@bioshazard 🤔😕
@@Gnnesh in other words, very few people are extremely talented and put almost everyone else to shame. That is true everywhere including teaching.
"If you can't explain it simply, you don't understand it well enough". You made my day bruh...
I want this on my wall like those motivational posters that are all black with the white text
this line hits
"in case you’re ever going to get hired" ..... lmao that hit deep!
@@virtumind where are you located and are you for real 4 years lol?
@@virtumind oof what's your area of expertise and what projects have you done... I supposed you have already done 40 projects in different frameworks and languages
@@ThePaullam328 yes I used php js nodejs reactjs C# Delphi
@@virtumind if I were you having those 4 years, I would have branched out to Kotlin/Swift mobile dev, C#/C++ game dev, Python data analytics, machine learning, etc., instead of just sticking to very limited options... for web dev as well there are sth like JQuery, Vue, Angular, and you can even try WordPress... Btw use some very up-to-date languages instead of sth that nobody uses nowadays like Delphi if you wanna get hired.
@@ThePaullam328 react node php has very high demand. I went to several interviews 70% are very hard to pass and the rest that I passed, HR did not replay to me later. Some companies want the developer to beg for a job. Any way my location is my prison I can not find a way to relocate.
the part 9:50 - 19:25 where you explain store, action, reducer, dispatch was so useful! can't wait to use it on my project! thank you so much!
2 years since the creation of this video, still the best and cleanest explanation i've seen
I am delaying the Vue video until Vue 3.0 drops so we know 100% what changed. If you want to see redux thunk I will add it when we build a project so we can see a practical use.
Thanks for anything and your support on Patreon!
Dev Ed Ok.. appreciated it
Thanks , keep up the hard work 🖤
Please do redux-thunk too.
@Rakhimbek Berkinbay there are many alternatives. ContextAPI is provided by default in react. You don't even need to install any extra packages for context API. Also easy peasy state manager is there.
what program you editing your video and screen recording please
After having a meltdown and damn near crying after my coding schools React assignments... I came here and in 30 mins understood way more than 2 days of two-hour lectures. I like how you speak in lamens terms... maybe thats all I needed.
dont cry, just add me on facebook i'll help you :D
@@dylanlee9176 haha
the fact that you learn react in your school is what is making me cry, in my school they only taught me C, C++, Flash, HTML and CSS and that was it... xD
fr lmao
@@sofiachaves2575 you guys learnt this in school??
Can I just say ' I love you dev ed'. First, you taught me context API and when I was ready to go further, you are still here to teach me redux.
Hey youtube, someone deserves a consistency and simplicity award
The video is neither very short nor very long. Completely on point. Thank you so much !!
Thank you, you are one of the rare RUclipsrs who actually goes and explains the concept rather than just doing it.
One little thing for the beginners: instead of using a ternary operator for conditional rendering at 34:40 it's preferable to use { isLogged && Valuable Information... } according to React docs.
huh, i've never used conditional rendering like these. will try to use this later
I prefer it this way, even without the documentation :D
doc's link, please.
@@rudeadyet1992 Here it is! reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
Could also simplify arrow function when returning object by :
export const increment = () => ({
type:"INCREMENT",
payload:5
})
instead of
export const increment = () => {
return ({
type:"INCREMENT",
payload:5
})
}
Glad to watch your coding sessions, This is a very detailed,focussed and real-time explanation. The best part is that you make us feel easy about the topics. Keep up with the laughs and the smile! haha.
After all the struggles, finally the best and the easiest explanation of Redux! Thank you so so much!!! You are a great teacher!!!!
Ed, you're the man! In 40 minutes you just made sense of something I've been trying for 2 weeks to understand. Thanks!
Lol redux is damn easy, you're just a kid got excited to learn something something pretty hard easily for the first time.
Chill
@@nativetube I'm 35... If its so easy, why are you watching tutorials. And how bored are you that you're trolling 10 month old comments. Why throw shade for me showing gratitude to Ed for putting together a decent tutorial? Get a girlfriend and move out of your mom's basement.
@@nativetube Imagine being so insecure about your programming abilities that you have to go around downgrading other people for learning new concepts. Absolutely pathetic.
This comment section went south so fast...
@@nativetube dear if u think u r so intelligent and don't need anyone help then what the hell u r here up for.... And I m pretty sure you don't know redux properly... U just saw this video and then u are thinking u r an hero then u started bullying... Dear everyone have right to get educated and can study....
I usually don't comment on tutorial videos. I just watch like and skip. But this one was a different one. The way you explained it was really awesome. You made such a huge topic soooo easy to understand. This one is the best tutorial on Redux which I have seen till date. Thanks buddy, you are really a great teacher. Keep going. We will keep supporting... 😍😍😍
13:00 action
14:00 reducer
16:30 Dispatch
19:40 react-redux start
23:12 Hook the reducers into our store & combine all reducers
31:00 interact with React Redux
34:50 modify the counter with increment/decrement
Just about the easiest explanation of redux I've seen.
Thanks Ed.
T h a n k y o u ! - The first tutorial I've seen about Redux where I really got the impression that the tutor ACTUALLY INTENDS to help people understand Redux. My experience is that many people who make tutorials seem to have a lot of thoughts in their head about showing others how smart and fast *they* are, and they seem to forget a little bit that they are actually trying to help *others* understand some new or difficult concepts. I personally appreciate everybody's effort who teaches others something, but it's so beautiful when someone is able to do it very well.
Please, keep doing what you are doing!
Most likely they don't understand what they explain cause they look like they memorized somebody's instructions and thanking god for nobody there to ask them a question.
Great comment. I've been one of those "let me show you how great I am" guys for a long time. It saddens me to know how many people I might have made feel insignificant with my behavior. The Universe made sure to knock me down to a point where I could finally see the consequences of my actions.
this x1000
Truth is they don't understand it themselves.
Hey Ed! I really appreciate the fact that you get into these topics with so much positivity on your face.
Keep up the good work!
All your videos are gold this one was no disappointment...definitely the best redux explanation on the internet.
Love this redux tutorial, very easy to follow and understand! Dev Ed could always know what really hinders us and help us get out of that in a very clear way!
This is the best redux tutorial I've found till date 😍😍😍
Give him a medal! This is great. Simple and everything to the point.
we just started learning redux in my bootcamp and when I heard about actions and reducers, etc.. I was so lost and confused, but this video really helped me understand redux much better. Thank God for you, I appreciate you so much man. 👍🏻
To be honest, this man helped me a lot to become a developer! Thanks
You finally helped me understand how to use redux, no other tutorial out there breaks it down as well as you did. Thank you!
I am complete beginner to react and redux, however, I could understand the concept and code. Nicely explained. Well done and Thank you.
how is your react skills now?
@Azizbek Xushnazarov i have 9 months 😂
@Azizbek Xushnazarov yes
This video was a life-saver!! I was trying to make sense of Redux for past few days!
I’m a current SWE but I know way more about devops and infra than web dev and I *immediately* subbed this channel from the moment I opened the vid, I love your personality and the humor you bring to explaining stuff!
Finally, I see the light at the end of the tunnel! Thank you so much!
This really helped me to wrap my head around Redux after struggling with the basics for a while. Great visual explanation of the concepts.
It feels like redux creators also struggle a lot to come up with such a mess 😂😂😂
It’s 2 months I am searching for a better video and now I found this. This is the best lesson on React Redux. #reactredux #reactjs #react best tutorial. You’re a awesome. Thank you so much.
Thank you SO MUCH! Even though there are new ways to operate Redux nowadays, this 3yo tutorial was the only thing that did it for me, now I finally understand it. You're a life saver, thanks!
This is the best explanation. Dude knows how to explain complicated things 🤟
I feared Redux so much that I wasted 3 months not learning it. Your video made so many things clear about it. Thanks, @Dev Ed. I finally got some confidence to go ahead and learn more as your course has cleared many basics that were blocking my way.
I also did spend 3 months. Then never used redux. The companies I talked to, don't use it. I needed persistent state... why have a global state if it is not persistent? You get global state with React Context (and React Context is sooo easy to use)
only a great man can make and explain complex things much simpler. .. you are really great . words cant express my gratitude
Hey my gorgeous friend Dev Ed! I am now working as reactjs dev because of your crystal clear tut. Thank you so much!
Such a good explanation. I watched a Udemy course with a whole app and it was knowhere near this explanatory. Sometimes we need to do just baby steps. Nice work man, really nice work.
Really great explanations! I like that you explain things repeatedly and highlight certain points that reduce how magical redux feels sometimes
Redux = dark magic .... or nice magic? :)
I’m here to refresh Redux concepts for my assignment and interview for my first job and indeed Ed you’re amazing. Big thanks in 2021.
You just won a sub. The explanation was so smooth and dynamic even tho you said you don't like Redux. Kudos!
This gave me the 'click' in my brain that I was hoping for... Thank you!
same. been avoiding redux for months because of the initial wtf moment i had when first learning it. this helped.
omg, i love the high-level overview in the beginning! Just diving into the code and jumping from file to file is so confusing!
No words can express my appreciation for you. keep shining Dev ed.
I wanted to learn Redux and I watched many redux tutorials, none of them explained Redux in such an easy way. Thank you so much.
Great tutorial! At first I didn´t want to keep on watching it since you said you didnt like Redux. But even though you dont like it you still did an amazing job at teaching it.
I can't describe the much of love that I have to you , you literally made my day bro👌♥️
This was amazing, I would get confused seeing stuff like reducers and dispatch wondering wtf they do but you explained all the concepts very nicely and now I understand a lot better :-)!!
Very demystifying. The best explanation on react-redux ever. Good job.
No one would say redux is difficult to understand after watching this. Dev Ed❤
bro this guy is great
I say: It's difficult. Especially since I think it does not solve any of my problems. That is: 1/ Distributing state in a simple way, 2/ Persistent state in a simple way
you are a wonderful instructor. Amazing explanation for the complex and complicated Redux library
I really love how happy/ cheerful you are while teaching this clearly reflect the joy which you get while teaching. Thank you
I am was learning redux, and it was brutal, I got sad, I got lost...
Then I found your video, and put a smile on my frowny face...
Thank you for bringing some hope and light to redux.
Thank you for bringing some light comedy to the software development trenches :) You are my hero today! :)
Great video! I recommend calling the 'reducer' an action handler. Thank you!
it's actually a sync event handler.
Could you consider making a tutorial of a real world app in React? Thanks for sharing your knowledge. Kind regards.
+1
counter ++
I will be creating one tomorrow. Also a comparison between Angular and React :) as the way you implement is very similar
@@ChrisTarasovs great.. looking forward to it..
Here you go guys, ruclips.net/video/4S0DLZKNDAk/видео.html
Sorry it took me so long, I was ill :(
The most amazing tutorial I have ever seen! I loved every bit of this video. I was getting so much confused on this topic but you explained it all in such a nice way and with such enthusiasm. Damn it man! I have never seen anyone explain such a topic while carrying such a wide smile on his face. I love the way you explained all of this brother, please do not change this style.
And one more thing, I was not interrupted with even a single ad during such a long video! I do not have ad-block just to support content creators like you, and this time I felt really bad that I was not bombarded with ads like all the other youtubers do. Please add more ads. I want to support your efforts.
Yes, I agree, the best Redux tutorial so far. But can I get persistent state management with redux? All state disappear as soon as the user hits refresh in the browser...
This man is the best for redux tutorials
I have watched a lots of tutorials for redux but nothing is as simple as this
Great job
I was in trouble to understand Redux in my work. But this tutorial helped me a lot. Thank you.
Do you use Redux today. I use Context: ruclips.net/video/Uex_Z8CLHsc/видео.html
Thank you! I really appreciate when someone "nuclear physics things" made understandable in such an easy way.
The most straightforward and simple explanation of redux on entire RUclips. Thank you very much.
Why didn't i discover your channel all this while. I have wasted so much money, time and effort on tutorials that got me confused the more. You a life saver, such a wonderful tutor. Your channel will be on my top list. Thanks.
Great tutorial, you make things so easy to understand!
This video was perfect timing! Appreciate it man
So easy to understand. I was truly a beginner at this and yet I understood.
I also just love the energy and humor of Ed!
Bro I watched like almost hundreds of tutorials on redux and you were the one who made me finally understand it. :)
the ending is awesome dude. !!!!
oh my god, that was such a good introduction!! thx a lot
One of the most concise and helpful tutorials for any programming concept that I have ever seen.
The best redux tutorial in entire YT actually. No native russian guides anymore about programing stuff. Thanks for explanation
It's nice to see that Juventus' Aaron Ramsey spends his time off teaching people how to code.
Lol .. thats true
Teachers: i am explaining everything to you
Me: watch this video
I speak french, and there is various tutorial in my language, but there is nothing that come quite close to your tutorial. It's crystal clear, thanks!
Thank you so much! I was confused about react-redux and you fixed all the problems! You won a new subscriber ;)
greatest explanation i have ever seen, tks bro
So cool. Could you provide a video wirh Firebase Auth / Collections in a React Context? I‘ve seen some videos but your explanations & style of doing videos suits me better. :)
Yes, I have a video with Firebase Auth / Collections in React Context... :) ruclips.net/video/Uex_Z8CLHsc/видео.html
This was extremely helpful, and I so love how funny you are! Your humor makes difficult subjects far easier to comprehend! Thank you so much!!
Every attempt of implementing Redux into my app finishes with implementing React Context :(
Thanks for the video. Gonna dive into it once again.
React Context is perfect. Specially if you combine it with Local Storage and Use Effect Hooks, like this: ruclips.net/video/Uex_Z8CLHsc/видео.html
greetings from South Africa, thanks for the vid
Am from south Africa too
Great and easiest explanation. The best part is your video's are never monotonous or boring. Thanks Indeed
keep in mind you can pass to useDispatch state of some reducer to invoke dispatch with needed reducer, for example counter that we grab from useSelector(state => state.counter) or isLogged from useSelector(state => state.isLogged)
I might have an unpopular opinion but I prefer a lot more your videos than Traversy media, you are a lot funnier and more energetic which I find great.
Hello Ed thanks for the awesome content, I was wondering what VS theme are you using here?
Oros Alexandru if I’m not wrong, it should be Material Theme Palenight High Contrast
I just started my second ever tech job and my supervisor wants me to learn Redux. I had never heard of it before so I came to RUclips to find some videos that would help me understand it. I watched a few videos and nothing made sense to me until I stumbled upon your video! Thank you so much for this!
Best ever description for react-redux.
Keep growing.
I just wasted 3 working days and u saved my future time
Error: Reducer "counter" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.
wtf am I doing wrong?
I found the soulution. I'm surprised that how no-one pointed out this error. I guess people here in the comments just watches the video without trying the code on their own. Anyways, if you also face this error just add default statement to counter.js switch case.
const counterReducer = (state=0,action) => {
switch(action.type){
case 'INCREMENT':
return state+1;
case 'DECREMENT':
return state-1;
default:
return state
}
}
export default counterReducer;
@@unknownman1 Thanks man, I got the same error and was unable to find a solution
I mean he explicitly explained it in the video, but he just doing it in the loggedReducer (and I assume you already see the whole video without skipped anything). And you can just did the same thing for counter.
i have a doubt how it is linking increment/decrement action to counter reducer every time and he have not explained about the logIn and logout action..............
what if there are 2 different reducers both of them need increment and decrement actions, while in dispatch he haven't mentioned the reducer he is passing then how it would differentiate. that which reducer would get the increment/decr........
Imagine spending 30 minutes only setting up a counter redux store while Context API only takes a few lines of code on App.js 😂
Not few lines. Just a single line to call the Provider Component having a global state and than wrapping every other component inside it. if I'm not wrong
@@bagup_alpharetards it can be easily automated. Writing this mess by hand is a choice not a necessity.
Yes, Context is a line or two. And we can easily make context persistent, to survive a browser refresh, like this: ruclips.net/video/Uex_Z8CLHsc/видео.html
I did rewatch this after few days playing with react, now I can comprehend all you've discussed the entire video, thank you so much!
I have heard people telling me that REDUX is a pain in learning/understanding, but the way it has has been explained in this video helped a lot.
I am now comfortable to use it in my projects.
I spent 10 minutes of my life trying to know why the code wasn't working, turned out I forgot to put () in the dispatch(increment()) part.
thankk you :)
And I spend 10 hours! :(
Oh my god you saved me
Thanks :) i hate it :)
Seriously though, best explanation i found! subscribed!
I had a lot confusion about Redux entire lifecycle, honestly speaking no one explained like this before. Thank you so much!!!
Your videos are incredible, I have so much respect for your commitment to sharing all your knowledge, I've only watched a couple so far but i hit subscribe about 2 minutes in. They're truly informative and i think you have such a genuine and authentic personality it's so nice to hear you speak. Hope you never stop educating and thank you so much!
7:07 installation and theory, 19:40 project starts
"If you can't explain it simply, you don't understand it well enough"
I've been watching tutorials for several hours now, none of them were as fun and helpful as yours. Thank you so much 😭
I actually watched many other videos on Redux, but people forget that who is watching these videos are mostly noobs to react redux. Thanks Ed for keeping it somewhat simple, best video I watched for what I wanted.
When I do this I get "Actions must be plain objects. Use custom middleware for async actions."
I have this too, you find any solution?
@@adrieltelito Yeah. So the styles are actually OUTSIDE the component function so the reference to any variables also need to be outside the component function.