Intro To Redux with React - React for beginners #8

pay-fors members and welcome to the eighth tutorial in our react series now this one's gonna be pretty exciting we are finally stepping into Redux which if you've heard about react you've probably also heard about Redux it's like a huge topic a lot of a lot of people love to talk about it in fact if you even google it you'll see that there's a ton of stuff on it and getting started with Redux and react so I found it to be a bit challenging to onboard on to Redux so I'm gonna show you in this video a very simple tutorial on how Redux works I'm gonna give you an example of how Redux works and then we're gonna implement it into something simple like a counter and then on the next couple of videos we're gonna build on our knowledge and continue using Redux and then integrate it with something known as redux saga so before we get started let's take a look at how Redux works so let's say from everything that you have learned from these tutorials you have a very simple app so here is your main component your main webpage and within there we have a component so this this rectangle right here will be our main component within our app so then within this come on let's say we have another component that looks like this you know maybe we're reusing it a couple of times maybe it's like an input field or something like that and whenever we change something in that input field let's say this one asks for the user's name I apologize in advance from my really poor drawing skills I'm on a trackpad so let's say this text box enters a name and then below that we have another component down here that says something like let's say it says in this come on we say help we say hello whatever your name is so let me make that bit smaller fits okay so okay we can definitely make that a bit bigger okay so says hello name so whenever we want our program so that whenever we type something in to this inner component right here it updates this component down here now if you've been paying attention it you would know that it's actually sort of a mission to do that in fact we would have to create a function that whenever someone types in a name here it would relay the name to the outside component which is this this one outlined in blue right here and then and then that component would then relay it to this main component which would then relay it to this and in order to do that we're gonna have to use a lot of different props and child references so child's calling parent functions all to pass that one variable that one state variable into this into this component now Redux what Redux allows you to do is it acts as sort of a global state for your entire react application so instead of having to do to pass name from that component all the way to this component then to this component and then into this component what we can do is we can have what's known as a reducer and that reducer will store a bunch of variable names so a first name will be something like um we can initialize name to be undefined so we'll just do on U and D so if you can't read that and then whenever the user types in name into this column or sorry this input all we do is we trigger what we call an action which we'll be diving into in in more detail we trigger an action which then says to our reducer hey I want to make the name variable in here from undefined to whatever the person typed in and then this variable right here will just always be equal to whatever this is so when it's undefined we can have it just show nothing and when the variable changes we can have it say whatever the variable change to so there's no more passing state variables from this component to this component to this component to this component now we just have a global state that any component has access to and in its core that's really all that Redux is now Redux is made of a couple of different different functions so number one we have our reducer which will take in of which is the thing that actually holds all the variables in the first place and has the functionality to change the variables and update them we have these things called actions which is what your your react components will be dealing with directly so whenever you want something in your react component to trigger to change something in your reducer so maybe I should label it so we could see here reducer and this I can put another label here for your action whenever whenever you want something in your component to replace a variable in our reducer we trigger what is known as an action and our action will be the thing that tells the reducer that we want to change one of the variables okay and whenever we want to use one of the variables from the reducer inside of one our components we simply just import it as a prop it's as simple as that so now that you sort of have an eye level overview let's do a real example let's get started on a real example so what I'm gonna do is I'm gonna I'm gonna do make another create react app and let's call this counter with Redux now oh no capital no capital so we'll make this all lowercase and by the way a couple of you guys have been asking where you can find this code I have pushed all of this code to a github repository and in the description of this video you will be able to get all the code that we have done throughout all the videos it'll be all in there in that github repository so feel free to go and check it out after the video you can play around with the code you can see exactly what I've done so as you can see I've skipped a bit ahead and our react project is done setting up it's just the default react app that we are used to I've gone ahead and started it and if we go to our browser we can see that it's just the same create react app that we've been dealing with throughout all these tutorials so the first thing we're gonna do is we're gonna go ahead and install so NPM install Redux which is the core redux library and also react redux which contains all the bindings that connects redux and makes it usable by react and we're gonna go ahead and type - now save so that they're both saved who are package.json while all of that is loading we can go ahead and clean up some of the code here and I'm going to take the counter a class that we made in one of our last videos so just a basic counter and I'm gonna pop that guy right in here so let's briefly grow through this just in case you don't remember all we're doing is in this portion we are setting up a counter we're setting the count equal to zero within this state we have one button that increments the count we have one button that decrement sit and we can just here in the JSX this is where our buttons are and it says the current count is blank and then the two buttons that increment and decrement so I'm gonna go ahead and import that into our app so important here from counter and we're gonna go ahead and pop that we'll get rid of all of this stuff fact we'll just get rid of all of this and we're just gonna have the counter now we can go back to our app and we can see here all we have is a simple counter we can increment and decrement the count now what we want to do is change it so that this counter I mean right now this counter doesn't fall under sort of the the outline that we use to make this like it doesn't really make sense to replace this with redux but showing you how to do this in this video I'm just gonna show you how we would replace it with redux and then in the next video I'm most likely gonna give you an application where it actually makes more sense to do it but this video is just to understand the very core basics of redux while it still installs and it is taking quite a long time to install now that redux is setup we can go ahead and the first thing we're gonna do is we're gonna make our reducer so we're gonna go ahead and make a file call read reducer j/s now it's good to note that in more production-ready apps you'll see that the reducers and the stores and the actions and all this stuff will be organized into folders for now we're not gonna worry about any of that any of that let's just jump straight into the nitty-gritty of things so remember the reducer is here for two things number one it holds our state and number two it has functions that based on what action happens it will say what to do with the objects in our state so sort of like handler functions so I'm gonna paste in what its gonna look like right now and walk us through it so the first thing we're gonna do is we're gonna initialize our initial state now every single variable that we want to be in the state will be initialized here so in our example since we're just using a counter the only variable we need is a count and we are gonna initialize that count to zero now the next part of it might look a bit complicated but let's step through this one by one so the reducer gets triggered whenever an action occurs as we saw from our diagram and actions come from the components themselves so these actions come in the form of a string so for example one of our action types could be increment and one of our action types could be Deak riman so what we are doing here is we are setting up a little structure here so that whenever an action is triggered we look at the type of action it is and then depending on the type of action we deal with it differently so if the action type is an increment action you can guess what we're gonna do we are going to take in our state and we are going to rewrite the count variable in our state with whatever the current count is plus 1 and when we have a decrement action we are going there's a console log in here when we have a decrement action we are going to rewrite the count in our state to be equal to whatever the count was previously minus 1 and if an action triggers that doesn't call any of these cases we've we have accounted for it we'll just return the state's straight up now this return isn't actually putting pushing the state anywhere all it's doing here is overwriting the current state with what we want our new variables to be so this default return won't actually link to anything or won't actually be used in any case now that we have our reducer setup we can go ahead and we can create our actions we're gonna create a JavaScript file called actions dot J s and in here you're gonna see the code for this is gonna be a lot simpler than the reducer essentially what we're doing is we're exporting a function based on every action that we want to have so in this case we have two very simple actions we have the increment action and the decrement action now the type here specifies what string it will fire off now this string has to be identical to the one that we are catching in the reducer it's important to note that we can also take in a variable if we wanted to so for example in some applications your action like for for the example where we had the name the name one here we could do something like export Const set name is equal to and then we would pass the name in like this we were then and then in here we type the type would be something like set name and then we would set the name variable equal to the name that were passing in through this and we would actually be able to if we were to catch the case set name we would actually be able to get the name by doing action dot name instead of see here we have action dot type which gets the the variable type if we did action on name we would have access to that name variable and we could go ahead and set the name in our initial state if we wanted to so I'm gonna go ahead and delete that but I just wanted to let you know that for your own sake that way in the next video when we actually use that functionality you'll be able to grasp it easier so we have made our action and we've made our reducer there are a couple things we have to do left 4 1 we a have to connect our component to this action we have to make a discus action callable through our component and B we have to do something we have to set up we have to link our app with our Redux store in the first place so let's go ahead and do that first so let's go ahead and create a JavaScript file called store j/s and in here this is what the code will look like we're gonna get the create store function from redux we're gonna we're gonna import our reducer that we just made so this should be uppercase R and then what we're gonna do is we're gonna say our store is going to be equal to the create store function of the reducer so essentially what we're setting up for is we want to pass in our reducer we want to be able to pass in the variables inside of our reducer in this case count as a prop to our app in order to do that we have to quote use the store within our application so the way we do that is we simply come into our app touch is the root of our entire project you can also put this in the index J s as well as you want in fact let's go ahead and put that in our index J s so what we can do here is we can import the provider class and we're gonna take that from react Redux and what we are gonna do with that is we are gonna wrap it around our active our application tag just like this provider and then we can go ahead and put app in here so our entire re react application is now wrapped around with this so the last thing we have to do is we have to simply import the store that we made so import store from the slash store and what we do is in the provider we just write store is equal to store and what that says is pretty much in every single component that is in that every single child component from this provider tag we are going to be passing in this store as a prop and as you saw before this store all the does is it creates a store with the reducer and the reducer is where the real magic happens so just to recap what is going to be happening is our counter our counter component is going to be calling our action our action will then tell the reducer what type of operation we want to perform in the case of an increment it is going to increment this count by one and it will then display it on the counter and that's the last part we just have to now connect our counter a to our reducer variable and B to the action that it can call so let's go ahead and do that we are going to be using two magic functions that are called map state two props and map dispatch two props now it sounds a bit confusing but they're really simple map state two props is pretty much this is where you put what variables what state variables you want to include in your component from the reducer so in this case if we look at the reducer the only variable we really care about is the count so we are going to say count is equal to state count where state is just our reducers state and you can call this anything you could say reducer state and then replace that here but the nomenclature default is usually just state now what this allows us to do is it will make it so that our count whenever we want to access this count from our reducer all we have to do is inserting this state that counts like we did in the previous counter in fact we can go ahead and get rid of this whole constructor right here that declares the state we can just replace it with this dot props dot count so this is pretty much saying we are gonna pass whatever variable we have here in as a prop and the name of the prop is going to be count so if we were to name this like a current count then we would also change this to current count as well now the second magic function here is map dispatch to props and this is where you call pretty much this is where you select which actions you're going to be using so we look at our actions J s and we can see here there are two actions that we want to use the increment and the decrement so all we have to do here is write increment and decrement and we have to import those actions from actions so we can say import increment and decrement from dot slash actions and just like before just like before if we want to then call this action we refer to it from this dot props so if we look here if you remember the counter function our button on click we call this increment function over here and in here we edit the state but remember we no longer have a state in our component so instead we want to call this the prop star increment and for decrement we want to call this top props and this top pops our increment and decrement are coming from map dispatch two props and that is coming from these actions so now the last thing we have to do is we have to do what is known as connecting our component so if you remember from I think the third or fourth react to toriel one of the things I talked about is putting the export default down here so that you can wrap whatever your class name is in special tags so we're actually going to use that now we are first gonna want to import something called connect from react redux so we're gonna import connect from react - Redux ok and now what we're gonna do is we're gonna instead of having export default counter we're gonna wrap this counter in our connect so you can see we're exporting default connect and then it the so let me see if I can make this look a bit more intuitive so if you see here the first the first thing in connect in the first brackets we have map state two props a message dispatch two props and the second thing is counter pretty much what we're doing is we're applying these props to our onto our counter component so that our counter component has access to these variables inside these props are sorry the the variables inside of our our state and our dispatch as props now if we save that it'll format it oh and it looks like we forgot to just put brackets since we are calling a function here so now if we were to say that we can go back to our chrome and let's see if this works so if we click increment as you can see it is incrementing the count and if we click decrement we are d commenting the count so let's actually do a bit of digging so inside of our reducer for case increment lets console dot log console the log we caught an increment increment action of action so you'll see here if we inspect if we inspect our console here whenever we click increment BAM we caught an increment action you can see it's been called four times out for all the four times we've incremented so to give you one final rundown of how this is working so we have a reducer that has inside of it a state and a couple functions whenever we go into our account whenever we click a button to increment our count it calls an action that action then calls are the corresponding case within our reducer which then does something to the state and our counter is then getting the state getting the state and the action is to call from mat state two props and that dispatch two props I hope that cleared up how Redux works and how you include it with a react I will be pushing this code up so if you still are a bit iffy on it you can go to the github that will be in the that will be in the description below and you can actually go and play around with it yourself just clone the repository run an NPM install and do an NPM star NPM start and you can put some console dot log everywhere to see what's getting triggered when so thanks for watching guys in the next tutorial I'm probably gonna be doing it a bit of a more hands-on tutorial when it comes to redux something that's a bit more applicable and realistic for redux is uses and also either in that tutorial of the next one I'm gonna go over redux saga which will tie in the backend work and with express that we did in the last tutorial so thanks for watching and I'll see you guys in the next video

Channel: Anthony Sistilli

Views: 3,267

Keywords: programming, React, React for beginners, React tutorial, React crash course, React lifecycle, Anthony sistilli, Beginners React, Componentdidupdate, ComponentdidMount, componentWillUnmount, React components, Lifecycle methods, Javascript React, ReactJS, React Browser Router, BrowserRouter, React Browserrouter, React routing, Routing, Frontend development

Id: -bzUwdgxAyo

Length: 23min 53sec (1433 seconds)

Published: Sun May 19 2019