Redux For Beginners | React Redux Tutorial

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

[@user-mk9ew8fh5y]

The easiest explanation about react-redux I've ever seen

[@dreams-do-come-through]

Exactly!

[@alexandergroshev3991]

first time i started to read about redux was like a: "What a hell, so complicated!" ))))

[@cicciopasticcio8469]

Can’t agree more

[@atasuki37]

So true!

[@kavindesivalli]

I know, right. I tried watching so many tutorials but none made me understand the concept properly

[@romanazeem3098]

"If you can't explain it simply, you don't understand it well enough". You made my day bruh...

[@stephanpaul8954]

I want this on my wall like those motivational posters that are all black with the white text

[@siddhantraj5323]

this line hits

[@saffwanqamar5849]

How did this guy teach everything in 40 minutes that people aren't able to teach in 40 hours? Absolutely amazing.

[@bioshazard]

Because pedagogical talent like all talent follows a Pareto distribution

[@Gnnesh]

@@bioshazard 🤔😕

[@bioshazard]

@@Gnnesh in other words, very few people are extremely talented and put almost everyone else to shame. That is true everywhere including teaching.

[@TonyyStarrkk1994]

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

[@nalathomas6340]

i know right

[@Ctrlshifti]

Exactly

[@zNeoDev]

Yup same here

[@worldclasscode1847]

Yes, I have already forgot all about redux. Did you try Use Context + Local Storage?

[@mocoebabymom]

which udemy tutorial if you dont mind telling?

[@ScopedMach1ne]

"in case you’re ever going to get hired" ..... lmao that hit deep!

[@SpamFreedom]

@@virtumind where are you located and are you for real 4 years lol?

[@ThePaullam328]

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

[@virtumind]

@@ThePaullam328 yes I used php js nodejs reactjs C# Delphi

[@ThePaullam328]

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

[@virtumind]

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

[@Sabrina-dx5jc]

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

[@ThreeCrowns]

You forgot the goodbye song

[@run_down_mid8480]

Thank uu so much

[@Mhand]

39:35 Goodbye, my lover!

[@ahmedjguirim7237]

thank you

[@monikan9854]

Thanks

[@kempisabel9945]

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!

[@maximoarauz8115]

2 years since the creation of this video, still the best and cleanest explanation i've seen

[@vicliur2]

Thank you, you are one of the rare KZbinrs who actually goes and explains the concept rather than just doing it.

[@JenniferStewart100]

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.

[@dylanlee9176]

dont cry, just add me on facebook i'll help you :D

[@meerestiyak9483]

@@dylanlee9176 haha

[@sofiachaves2575]

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

[@farban6200]

fr lmao

[@kyrianmolokwu8306]

@@sofiachaves2575 you guys learnt this in school??

[@xiaoyuchen9731]

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!

[@felicitya.9077]

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

[@developedbyed]

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!

[@mhdyousuf3392]

Dev Ed Ok.. appreciated it

[@drenkarvet4768]

Thanks , keep up the hard work 🖤

[@Somsubhra_Das]

Please do redux-thunk too.

[@Somsubhra_Das]

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

[@munyetech]

what program you editing your video and screen recording please

[@P2WFosraken]

Finally, I see the light at the end of the tunnel! Thank you so much!

[@syedkalam5781]

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.

[@dashayankovsky8323]

After all the struggles, finally the best and the easiest explanation of Redux! Thank you so so much!!! You are a great teacher!!!!

[@OhmVibe]

This really helped me to wrap my head around Redux after struggling with the basics for a while. Great visual explanation of the concepts.

[@aammssaamm]

It feels like redux creators also struggle a lot to come up with such a mess 😂😂😂

[@ryansamarakoon8268]

You finally helped me understand how to use redux, no other tutorial out there breaks it down as well as you did. Thank you!

[@brazybenjamin2937]

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. 👍🏻

[@adityakadam2256]

The most straightforward and simple explanation of redux on entire KZbin. Thank you very much.

[@SomeRandomNess4]

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!

[@Somsubhra_Das]

This is the best redux tutorial I've found till date 😍😍😍

[@marwansalah4910]

I like that you are organized and really impose a specific coding style that makes it look easy, thank you sir!

[@swag380]

Watching this before an interview test, and it's a huge help! Thank you for taking the time to make this while also indulging on your personal perspective about the technology!

[@cobalt0s]

Give him a medal! This is great. Simple and everything to the point.

[@mdintekhabshaukat3941]

I am complete beginner to react and redux, however, I could understand the concept and code. Nicely explained. Well done and Thank you.

[@birajpokharel7278]

how is your react skills now?

[@birajpokharel7278]

@Azizbek Xushnazarov i have 9 months 😂

[@birajpokharel7278]

@Azizbek Xushnazarov yes

[@brandonwie4173]

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.

[@therealblackgold]

All your videos are gold this one was no disappointment...definitely the best redux explanation on the internet.

[@geoffreyhoffman4261]

Ed, you're the man! In 40 minutes you just made sense of something I've been trying for 2 weeks to understand. Thanks!

[@nativetube]

Lol redux is damn easy, you're just a kid got excited to learn something something pretty hard easily for the first time. Chill

[@geoffreyhoffman4261]

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

[@skyro6138]

@@nativetube Imagine being so insecure about your programming abilities that you have to go around downgrading other people for learning new concepts. Absolutely pathetic.

[@kuronakajima9645]

This comment section went south so fast...

[@kumargourav7065]

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

[@KyleSmith-qs1if]

This video was perfect timing! Appreciate it man

[@ShaliniNegi24]

I really love how happy/ cheerful you are while teaching this clearly reflect the joy which you get while teaching. Thank you

[@psycodeveloper9001]

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... 😍😍😍

[@carsontrinh414]

Really great explanations! I like that you explain things repeatedly and highlight certain points that reduce how magical redux feels sometimes

[@worldclasscode1847]

Redux = dark magic .... or nice magic? :)

[@SulferDragon]

One of the most concise and helpful tutorials for any programming concept that I have ever seen.

[@kelcamer]

I am absolutely blown away by how well you've taught and described this and I want to say thank you from the bottom of my heart for helping people like me learn! You're amazing!!!

[@tarekfathi2003]

you are a wonderful instructor. Amazing explanation for the complex and complicated Redux library

[@denns0r]

oh my god, that was such a good introduction!! thx a lot

[@aarond791]

Phenomenal work on this tutorial. Great advice along the side including the Redux Dev Tools extension and all the comments/various implementation examples.

[@Srishti9015]

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!

[@martinbozinovski]

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.

[@millertime6]

omg, i love the high-level overview in the beginning! Just diving into the code and jumping from file to file is so confusing!

[@ice_tee]

The video is neither very short nor very long. Completely on point. Thank you so much !!

[@sloth303]

Thank you - clear and concise. The 'why' at the beginning was especially helpful

[@cherniaev]

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.

[@m3rl1on]

huh, i've never used conditional rendering like these. will try to use this later

[@d3struction61]

I prefer it this way, even without the documentation :D

[@rudeadyet1992]

doc's link, please.

[@cherniaev]

@@rudeadyet1992 Here it is! reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

[@bengrandin2646]

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

[@imhrsh]

the ending is awesome dude. !!!!

[@NeeshieK]

I watched a few videos and yours made the most sense! explained in a very simple way that is hard to not understand. my current work uses it so I've been trying to learn it. thank you so much!

[@jackiekopco]

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

[@meganadams]

This gave me the 'click' in my brain that I was hoping for... Thank you!

[@LiteraryLad_824]

same. been avoiding redux for months because of the initial wtf moment i had when first learning it. this helped.

[@dreams-do-come-through]

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!

[@aammssaamm]

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.

[@thecodetoad6098]

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.

[@trevorallen7554]

this x1000

[@scriptkeeper8243]

Truth is they don't understand it themselves.

[@blank583]

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!

[@cloud244]

Great tutorial! I was so confused with all the concepts but you made it so easy to understand!

[@xoxoo4877]

Thank you! I really appreciate when someone "nuclear physics things" made understandable in such an easy way.

[@veronicaperez308]

Great tutorial, you make things so easy to understand!

[@twinklegoyal2239]

Absolutely amazing, 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!!!

[@edwardslayd7816]

Amazing stuff! Look forward to exploring more of your videos! Thanks so much!

[@maximilianahmad9014]

I can't describe the much of love that I have to you , you literally made my day bro👌♥️

[@AiwwwA]

This is the best explanation. Dude knows how to explain complicated things 🤟

[@crosscripter]

Way to go, you made Redux seem waaaaay more simple than most tutorials.

[@westm1839]

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!

[@FerminArellano]

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.

[@namphuong8828]

greatest explanation i have ever seen, tks bro

[@udaypadaganur6217]

Hey Ed, I just love it. The way you put it on the screen.

[@j3z741]

What an awesome explanation. Thanks for being so clear. With some programming concepts i think it is better to first understand the problem the tool is trying to solve and make a mental model of what the tool will do, instead of trying to remeber everything. Thanks Ed!

[@high-oncode7576]

No one would say redux is difficult to understand after watching this. Dev Ed❤

[@nicholasmamali2704]

bro this guy is great

[@worldclasscode1847]

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

[@demetriuscyprian8368]

To be honest, this man helped me a lot to become a developer! Thanks

[@chilledsam3025]

Really a clean tutorial. Simpliest. You should have a full REACT tutorial. Loved it

[@rogermanea2140]

Thank you for this ! You covered Redux but also gave some context on the implementation, that was very helpful.

[@user-nt5sp2sr5l]

I was in trouble to understand Redux in my work. But this tutorial helped me a lot. Thank you.

[@worldclasscode1847]

Do you use Redux today. I use Context: kzbin.info/www/bejne/i5bbkI1ueLF7qcU

[@idevbrandon]

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

[@tufanklnc1696]

You just made sense of something I've been trying for 3 days to understand. You're amazing

[@vaibhavagrawal6770]

Great and easiest explanation. The best part is your video's are never monotonous or boring. Thanks Indeed

[@lovegovindasat]

Great video! I recommend calling the 'reducer' an action handler. Thank you!

[@aammssaamm]

it's actually a sync event handler.

[@manpreetjord1885]

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.

[@worldclasscode1847]

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)

[@prakhar.odyssey]

Amazing tutorial guys. So easy to follow and great examples and descriptions. Thank you creating such an awesome video🙌🏾

[@roykomprath4140]

Of every video I've watched on this, you have connected the dots for me. I'm incredibly impressed and subscribed to your channel. Thank you so much.

[@nivaech]

Every attempt of implementing Redux into my app finishes with implementing React Context :( Thanks for the video. Gonna dive into it once again.

[@worldclasscode1847]

React Context is perfect. Specially if you combine it with Local Storage and Use Effect Hooks, like this: kzbin.info/www/bejne/i5bbkI1ueLF7qcU

[@Blure]

Could you consider making a tutorial of a real world app in React? Thanks for sharing your knowledge. Kind regards.

[@bugwriteryang8038]

+1

[@kefamutuma7402]

counter ++

[@ChrisTarasovs]

I will be creating one tomorrow. Also a comparison between Angular and React :) as the way you implement is very similar

[@kefamutuma7402]

@@ChrisTarasovs great.. looking forward to it..

[@ChrisTarasovs]

Here you go guys, kzbin.info/www/bejne/aoSTdX-QgLN3d80 Sorry it took me so long, I was ill :(

[@tienphan637]

The way you've talked about this topic was so simple but much efficient, thanks a lot guys!!

[@arturkoza5495]

Wow! I have watched many different basic Redux tutorials, and thanks to YOUR I finally understood basics concepts. Thanks!

[@douglaslombard5616]

greetings from South Africa, thanks for the vid

[@lowercasegoon5231]

Am from south Africa too

[@LeaDClan]

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

[@worldclasscode1847]

Yes, I have a video with Firebase Auth / Collections in React Context... :) kzbin.info/www/bejne/i5bbkI1ueLF7qcU

[@sayedfaridqattali6494]

This is the best tutorial I would recommend for learning Redux. Thank you Dev Ed!

[@pabloaltamirano7775]

Amazing tutorial tbh, i clearly understood everything, keep up the good work my dude

[@animexanime2566]

Teachers: i am explaining everything to you Me: watch this video

[@Alexandru-OM]

Hello Ed thanks for the awesome content, I was wondering what VS theme are you using here?

[@raj_drummer]

Oros Alexandru if I’m not wrong, it should be Material Theme Palenight High Contrast

[@muhammadsaadjamil1783]

Awesome Video, I Have been struggling with redux for some time but you clearly explained it. Thank a lot!

[@alhassanhassan2308]

And he explains it so seamlessly. Thank you man!

[@T-Show.]

It's nice to see that Juventus' Aaron Ramsey spends his time off teaching people how to code.

[@sweetech4087]

Lol .. thats true

[@ddog742]

Thanks :) i hate it :) Seriously though, best explanation i found! subscribed!

[@michaelgatmaitan1797]

Thank u Dev Ed! All of your tutorials are so clean!

[@fabr0]

dude, that was great, i cant believe how many ununderstandable vids i've seen before i came across yours. thanks for that!

[@barjuandavis]

Imagine spending 30 minutes only setting up a counter redux store while Context API only takes a few lines of code on App.js 😂

[@bagup_alpharetards]

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

[@aammssaamm]

@@bagup_alpharetards it can be easily automated. Writing this mess by hand is a choice not a necessity.

[@worldclasscode1847]

Yes, Context is a line or two. And we can easily make context persistent, to survive a browser refresh, like this: kzbin.info/www/bejne/i5bbkI1ueLF7qcU

[@Pyraptor]

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.

[@aadeshsharma0001]

thank you so much ,now i am very comfortable with redux and i have also watched your context api video that was also very helpful.Thanx for clearing these concepts.

[@syedahmadarshad3711]

For someone who is new to Redux, this is perfect. Simple and concise.

[@andrisladuzans7607]

7:07 installation and theory, 19:40 project starts

[@Breezbriznost]

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.

[@Jensensjyde]

thankk you :)

[@thissohil1166]

And I spend 10 hours! :(

[@jonathanperez8404]

Oh my god you saved me

[@chrisstucker1813]

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

[@roopapalanisamy3054]

Best ever description for react-redux. Keep growing. I just wasted 3 working days and u saved my future time

[@unknownman1]

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?

[@unknownman1]

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;

[@ayaanqui]

@@unknownman1 Thanks man, I got the same error and was unable to find a solution

[@permanar_]

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.

[@syedimam1998]

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........