redux fundamentals as easy as possible

hey did everyone and welcome to the programming channel in here now this video has a specific goal in here the goal is really simple to make sure that you understand perfectly about the redux by the end of this video yes that's the only goal we have in here and really honestly in here I promise you that if you'll stick around you'll watch the video till the end every concept of the redux will be perfectly clear to you that's my promise in here okay so stick it out now let's jump into that and there are a couple of prerequisite that I really want you to have now one thing that I'll be doing all the redux in itself is a separate topic but it works really seamlessly with the react and react native that's why I'll be using react as our base ground in here so I have created a bare minimum react tab by using Create react app you might have already heard about it in the official documentation or if you are into the core serie then you might have already heard about it okay so I have created a bare minimum application which just says welcome to react nothing else etc is being done and in the package I have installed the read acts now how I can install it it's pretty fairly simple you can just simply run a command that says simply like let me just show you how you can install that I hope many of you already know that but it's fairly simple you just have to say npm install and then it should be Redux and make sure you save that so you have to just run this command in the terminal and I'm pretty sure many of you might be already aware of it okay so just go ahead do that in the terminal and I hope we are ready to rock and roll now moving on to the further things in the react native let me just fix that up because we will need this guy okay so before we move on into the reactant here now if I'll just ask you that if you have to rate the react between one to ten and the rating one as the easiest one and ten as the toughest one you'll read the redux between seven to eight and I don't blame you for that relax is fairly complex with the documentation and the stuff but one thing is promised in here that I wouldn't be using those block diagrams because they make things confusing things like payloads that reducer the action the complete store although they are perfect but they are fairly fairly complex and as a big nurse they are no good to deal a bit okay so let's get start in here and before I jump into the code I would like to bring up my iPad in here and would like to talk in general about it don't worry I promise you I won't be doing those blog diagrams so I won't be doing that okay so if you want to learn about the redux let's get first started in here and okay so this guy is good okay so let's go in with Redux okay so this is a Redux in here now if you want to make a Redux app or you're you want to convert your existing app into the reader which is by the way a good idea there are actually four steps in involved in hit okay so just four steps and you have to follow these steps exactly as I'm saying with the same kind of impact that I'm trying to make in here and you'll be ready to rock and roll so the step number one is to create a store okay so that's the step number one now what is this store now we don't need to worry about it right now what store is what we call it what the terminology is basically you just need to have a store now if you want to create a store it requires two pieces of information from you okay just two piece of information the first one is reducer now don't just get in a too much panic in here because it just determine lodging and I'll explain you what reduce reducer is and the second thing it requires is a state now it in case you are aware with the react you might be aware with the state variables and everything already so state is consider this as an initial state in here now step number two the step number one is over and I'll walk you through with the code as well and we are going to follow exactly the same thing and this will help you okay so the number one thing is store the second thing is to create this guy reducer so let me just write it we need a reducer okay now how we can create this reducer and first of all what is this reducer now reducer is an agent yep the agent that you see in the mi6 or James Bond it just an agent it just does whatever you tell it okay and in order to create a reducer again you need two things to be done the first thing is it requires a state which is again a state is like what's happening right now okay what is there what is the situation right now and the second guy is action so obviously if a James Bond guy is an action ethic personality and he needs some action to be done and he needs to state as well like what is the current situation and just deploy me there and I will perform some action okay that's it that's our reducer so based on some action given to it it is going to perform and now let's come on to the third state now third state is subscribe now subscribe is not like a subscribe on the YouTube but I think you might want to subscribe onto the channel but again subscribe is not that subscribe subscribe is something like getting connected to the base obviously our James Bond is need some order from the base like for example when to send cavalry there or do we need some gadgets there so all these things are connected with the base so base needs to be subscribed to whatever the activity that James Bond is trying to do okay and if I will talk about the programming terminology subscribe just simply means get the current state okay that's all that's all about it and see quickly we have moved on to the step number four the step number four is to take action or is also known as dispatch so what is dispatch now this patch is like some action is being sent to the James Bond like for example hey get the nuclear codes kill the villain or maybe save the day or save the girl just like that okay repeat that quickly because after that we are going to jump into the code and you'll see that this is exactly you might want to have all the time so step number one is to create a store which requires two things a reducer and a state then we need to in the step number two we need to create a reducer which requires two thing the state and action and again reducer is our James Bond and it requires two things what state currently it is and what action do we need to take and the third one is to subscribe subscribe to the base and in this case the base is actually the state and the final one is dispatch this patch simply means what action you need to take okay I hope you got that now I'll be using an analogy up or analog II whatever you call that analog II of marvel universe but you can you do that for anything anything at all now also I would like to give it a big star mark in here and this is star mark is simply because I'm not going into too much depth of the react now there are a lot of things involved in the react and redux as well like for example you never change your state never mutate your state or create everything into the separate file but right now we are here to understand the concept first we can break down everything into the separate file later on okay so now let's go ahead remove the iPad in here so you won't be singing to the iPad in here now this is the bare minimum skeleton of the app that we have in here I have got a Redux has happened to be 3.6 but doesn't really care in that particular case so first of all I have created a new file Redux demo dot J's it is completely a blank file created in the source folder there we go Redux demo dot J's so let's write some boilerplate code I need to see this okay adjusting a few things okay so now we are going to need a simple react and we are also going to need components so bare minimum skeleton their component and these are all going to come from react so that's the step number one now obviously since we are going to talk about the Redux and we have imported the react the Redux in our JSON file we might want to import that as well and we are not going to import everything in that because this is a bare minimum example in here we are just going to import create store from here now don't worry about it what that create store is we are going to follow exactly there now you might want to take a screenshot of the previous movie because we are going to follow exactly that okay since I have I don't have a real estate on the screen to show up the iPad as well that's why you might want to take a screenshot okay and this is going to come up from redux looks pretty damn good and I'm going to fill it up with the bare minimum class in here I have stored it in my CSUN snippet file under my abdomen you might want to check another video I have made a special video for that how to do that okay and we want our redux demo and there we go looks nice and again Redux demo and there we go and now if I just go back in here and write something like test it should be showing up in the app dot GS and first of all let's import hmm we want to import Redux demo and that's going to coming up from oops I need to add a dog slash I always forget the dot slash part in here Redux demo there we go and in here we are going to say hey why don't you just brint Redux demo in here say that and we got some problem view v is not defined okay my bad because this needs to be div you might be wondering why this oops my bad why this view is actually coming up because this view is coming up because this happened to be react native and I think Dave is going to be good okay I've saved you I've saved you and why don't you just reload for me okay there is not defined okay now they think sometimes happened and okay my bad you don't want a capital D okay bear with me bear with me this is this is important in here and there we go we have fixed it now we're not going to be doing anything in here so let's go into our console log so that I can explain you everything so just go to console log and I can just clear that up okay looks nice okay now time to step time to follow up everything and we are going to go inside the render and there we go we are going to do everything in here so what is step number one okay so just bear with me step one is to create store so we are going to create store and that requires two things the first one is reducer and what it requires a state okay so there we go so we are going to do the step number one is really easily it's just creating a constant here this is store now in order to create a store what you need is already defined thing that is create store not something that you might haven't guessed there and it requires two things the reducer and the state now alcohol might reduce her as just reducer okay and right now the state is actually paste you might want not want to call this as a piece because it should usually be an object which contains a lot of things in here you get the point and concept of the state already in the react Coast okay so that's the step number one create a store what is the step number two I need to just okay okay and then the second part is step two which is to create a reducer okay we have already used the reducer so here we might want to just get a reducer now and the reducer requires two things it requires a state and it requires action okay that's good so what it takes to create a reducer it's very simple you just have to say constant reducer this is how you do it and it's actually basically a function I could have I could have created a fat arrow function but that doesn't really bothering us much and obviously takes two things the first one is state and second one is action okay I got that now what what else we can do now based on what action is being thrown it just returns to the state based on actually something like a command being given in here and it's going to do and perform whatever the command is for example let me give you a simple example that whatever the type of the action is for example if I just say that actions dot type and bear with me this is the syntax that you have to follow you cannot do anything it is always dot type I repeat that again it is always dot type so if the action type is something equals to maybe like a tack I'll write that on all in caps because it's an attack it's Swedish okay if the action type is a tack then we might want to change the state a little here okay we might want to return something like I can return actually anything but I'll bear with me I'll return a specific thing in here and that is what action you want to take now with the action you might see this word quite a lot which is payload now this word can be anything this word can be payload this word can be value this can be new state this can be Paris this can be London his you got the point okay so we are going to just do one thing in here and I'll walk you through there would mean here because we are learning something important in here and what is the step number three and step three is we are going to subscribe I hope you have already subscribed to the channel in here so how do we subscribe in here in order to subscribe we just simply say store dot subscribe there we go done now but we might want to pass as a callback function in here you can call a function in here I would like to get a call that a function just because I got to remind that yes we can do that we are going to log in here that store oops I need to learn it store I need to learn how to spell in here so store is now and we are going to get the new state of the store okay and that's going to be store dot get state okay and that's how to get the state of the store okay I know there are a lot of step but these steps are all worth when you're scaling your app okay so step number three is done okay and now finally we are back on to the business step four is to simply dispatch action okay good now how can we dispatch the action now notice in here that our James Bond is in here where is it the step number one our store is being created the store is actually what is the current situation which is piece and this is our James Bond in here now James Bond has a function that if the thing attack is being passed to it he is going to just do something payload payload is like a command or he's going to perform at some simple command now our base is also connected now finally we are going to dispatch some action so how do we do that we are going to simply say hey just save the day or maybe something like that so dispatch okay this is the dispatch now dispatch usually is an object it can contain multiple things in here we are going to just do one thing first one is always type yep there is no exception first is always tight okay and our type is going to be attack now you might be linking in here that hey this attack is exactly the same this attack and yes you are right you are exactly right this is exactly the same so this is the attack so we have given it a situation that hey if the state actually changes from peace to attack then what you need to do we need to send some command as well and that command is known as payload okay now we are going to say right now that if the situation is attack then we might want to deploy one superhero here so our superhero is going to be Iron Man okay I know this is a little bit desire but bear with me and I'm going to save this and now there are a couple of errors but bear with me how the things actually works in here I'll talk you through with that okay now we are just doing an action dot payload but we need to do one more thing in here that if there is no attack then we are going to simply return or whatever general state in here now now although I have told you all these steps just like that but again there is one one small point in here to understand this all of this is perfectly good perfectly correct but what you might want to do is just move this step number to cut that and move it above the step number one okay say that and let me just clear up the message and I need to just do a mistake in here so that it just automatically reloads and I'll clear that console and now our step is attack now as soon as I saved this notice in here what happens in here I need to shrink it a little bit okay as soon as I save this notice now store is Iron Man okay so what is happening in here let me just try to explain it in here by putting one more example and then I'll walk you through with every code what is being done in here okay so let's just say let's just copy this in here that this is one command if there is an attack or if there is something known as green attack then in our payload we might want to deploy holic okay so we are going to dispatch an action that if the type is green attack then our payload is not going to be Iron Man that our payload is going to be Hulk okay notice now it's Hulk but what we are doing in here we are also managing our Iron Man is stories in here now right now this is not the perfect example let me walk you through what everything is happening in here because this is people's perfect example in here what we have okay so step number one is create store so we have created a store using by taking the help of create store from the redux it requires two things reducer and piece these is our current state okay and then we have got a reducer which is our James Bond which does whatever it is being told to do then on to the step number one we create a reducer and this reducer takes two things what state is in here and what action to perform in here now if we say hey if the action is being if the state is being changed to attack or maybe two green attack then we perform a specific action to be offered in here like for example we just say hey action dot payload or action dot payload but in here we are saying now your payload is Iron Man but in the green attack we says your payload is Hulk and in case there is nothing being deployed like there is no attack or anything we are just returning the state we are returning just the piece piece is good and we are since we are subscribed to the store we are getting all these things output on the screen because the base should be aware of what is being thrown on the screen okay and finally dispatch is like sending the commands they're pretty good pretty damn good okay now there are a few things associated why people get confused in the read axis because this thing this guy this reducer guy needs to go into it's a separate file in the folder of reducer and this guy does dispatch needs to go into a separate folder maybe or maybe in a separate file at least so that is why when you have so many file being linked up it gets a little bit confusing but this is actually the very minimal example that I could have thrown up on the screen ok I hope you got everything with the redux I know this was a long tutorial almost 2025 minutes but this is the most powerful example of understanding the redux now one thing that you always have to keep in mind and remember the four steps or the redux you will never face any problem but the important part is that step number two always comes at the top this is kind of convenient that every programmer follows first always create the reducer like first always create what kind of action needs to be taken down in here so ok so that's a convenience in here and I'm pretty sure whenever you are going to see now the Redux things it's going to make much more sense in here ok maybe maybe I'll create a couple of more videos on the redux explaining multiple files how to break down all of these components into multiple but that is only going to come up if I'll get enough requests in the comment section so make sure you do that and in case you haven't here subscribe to the channel do subscribe I make regular videos sometimes I do travel vlogs as well so sayonara bye bye

Channel: Hitesh Choudhary

Views: 125,622

Rating: 4.5023575 out of 5

Keywords: Programming, computers, code, hacking, information, Security, iOS, iPhone, udemy, online-courses, coupons, free-coupons, udemy-coupons, udemy-courses, android, iphone, reactjs, web-development, redux, Redux, Redux basics, react, react native, flux, reducers, actions, state, payloads

Id: 0ix_QLPkYhI

Length: 21min 41sec (1301 seconds)

Published: Tue Apr 11 2017