Simple App with Redux #1 - Redux for Beginners

welcome to this series on creating application with react and redux I'm going to assume in this series that you know the basics of react we're gonna be focusing on how Redux fits into this picture if you haven't ever tried any react go watch some other videos I have some other videos talking about react go check those out before you watch this series I'm also there for we're going to assume you know some basic JavaScript we're not gonna be talking really about CSS or HTML much I'm gonna just assume that you've got some JavaScript down and that you've played with and at least basically familiar with react maybe not good at it but at least you're used it and you know essentially what's going on so Redux will be our focus so Redux is a state container for react it is an attempt to go with a with the basic idea of a flux flow for data and events we're going to be talking about that as we go along it's a it's an abstract concept and so we'll be bringing in some pictures and whatnot to think through how these things work these first few videos we are going to start with bare minimal we are going to do as little as possible to get react apps built with Redux integrated and so we're gonna be leaving out a number of things that later we will be bringing in what you do in the small application is not what you would do with a large application and with these small applications Redux is way overkill but that's okay we're just going to be starting with Redux and just to get the ideas and then once you get the idea and simple then bring that to the little more complex and as we go through we'll be bringing in more ideas more pieces from redux as well as talking about more in terms of patterns and whatnot but for these first few videos they're going to be very simple and as little as possible that we can do in these applications just to get everything working so that's where we're going to start and this is our starter application today it's a a single component that has a value and a button and you increment value and when you increment it changes the value and therefore the component updates so what's let's see how we can build this okay let's get started so we have an app created made with create reactant and I have this open and atom and I have a picture and this is what we're going to be working from in this app this describes a very basic Redux flow and finally I have my terminal window the first thing I want to do is I want to install so NPM install Redux and we want to also install or react Redux Redux is the library for state management react Redux is something made to make Redux and react to stick together it's a binding library the idea is you can actually just totally use redux straight-up with react without react redux but it does come with some handy things in it so we're going to learn to use it and so we need to install those and give that a sec once we get those done we can go ahead and jump in and start making our counter all right let's start with the basic react component I have my app spit big so I have my app here and I actually don't need most of this stuff so I'm gonna go ahead and get rid of it don't need the logo so this should give us a nice blank app to play with let's create a new component be in this folder or another we'll call this the counter we're gonna start with making this a pure functional component this could just as well be a class-based component it doesn't really matter but we are actually taking a lot we're taking the state out of the components and we're also taking the event handlers out of the components and feeding them in through props that's where we're altima League owing to go so I'm just going to create this as a pure functional component so function counter and this will take props and here we're going to return something let's right now just get something on the page let's make sure everything's working and that's export default counter now if we go to app we can import counter from that file and put him in all right react must be in scope when using JSX what I forgot to do is I forgot here at the top that I do need to import react all right there it is the counter is now rendering pretty cool and so what we're going to do is we're going to need two things as you saw from the image at the beginning of the video we're gonna need essentially a an event handler we're gonna need a function for whenever we click on a button which means we are going to need the buttons we're not gonna hook this one up yet we're just going to focus on the data and the data is the count and so that's gonna go there now both of these are going to come in props I'm gonna go ahead and put the count in so we can see that right now there's the paragraph but there's no value here and the reason why there's no value here is I haven't passed anything in so now if I pass in something that's gonna basically work okay so here's count 5 increment doesn't do anything we're gonna do that after we get all the data ultimately flowing okay now that we have our component it's now just time to start talking about redux everything up to this point has been just playing all react now we're gonna talk redux let's look at our picture here's the basic flow we have our react component over here on the Left what we're going to do is whenever we click on the button that says increment we're going to create an action and then we're going to dispatch that action to what's called the store and the store will run through its reducer that's here and that's going to change the state and that will then update the component so we've got this one-way flow and if we hit the increment button again it's going to create an action will dispatch the action we will then run the reducer or Redux will run its reducer and then the component will rerender that's this is the flow we're ultimately going for right now we're just going to focus on setting up the store and that default data so let's go ahead and do that the first thing we're going to do is now that we have our counter we're going to import react to redux and i specifically I need a specific function here because what reactor EDX does give you some some basic things that help you glue Redux and react together and the thing we need is connect so this connect thing doesn't actually show up in here but it is going to enable some of these things and so we're going to import connect from react redux so the first thing we want to start with is we need is a function that will map anything from the state which we haven't quite defined yet we're gonna map anything from the state to crops alright so in this video we're working from component into the store into the state in the next video will actually work backwards will actually start with the state and then move towards the component but in this case let's do it let's create a function so a function map state to crops because that's what it does it Maps the state to the props so let's see this is going to take the state and we're gonna return something and so we're going to take the count from state and put it in a property called count and so this is what's going to be passed into here this name right here is actually what shows up in here and then will be used there so we can see this in action let's do a console log and map state to props and then speak ok so that's first thing we need to create this function and then what we need to do is we need to use that connect function that we imported at the top right there we're going to use that connect function to actually connect this function right here with the component and what this does this is actually what we're going to do is we're going to wrap our component with one created by the connect function so here's how this works we call connect we pass in map state to props and then what we do is we call immediately call what comes out of that and what this does is this creates a new component not our component creates a new component which hooks up this function right here to our component and then we export it now we don't to change here as far as this is concerned this is just the same old counter it isn't it's now wrapped in something else but that's that's ultimately what's going on here it's it's creating a new component and wrapping our component in it and sort of gluing all of these things together all right so that's step one now if we look here at our website we're gonna see Oh No bad things happen good a plant store in either the context or crops of connect counter either app the root component in a provider which we won't be talking about in this video or explicitly past store as a prop to connect counter and so this is our wrapped component that's what we will be doing but that'll be later what we need to do is we need to get to the next stage what we've done is we've wrapped our component and next step is actually to make our store so I'm gonna go and put this in a separate folder and this isn't a necessary convention this is how I like to do it I'm gonna go in here and I'm going to create index J s file it's in here that we're going to create our our store our Redux store this is where the reducer lives if we look at our picture this is what we're going to be creating up here and let's let's actually make this a little bit bigger all right so the reducers in the store actually all worked together and so we'll just on-the-fly improve this little picture right here a little bit there we go okay so what we're doing is we're working on this yellow right here how do we do that well in here we're doing plain ol redux no react Redux here this is just regular redux and at this point this distinction isn't going to be clear but later on it go so what we need to do is we need to import something from redux which is create storm so first thing is we do this next thing is we need to define what the state of our application is so the state of our application is right now just a count variable let's actually put a value other than 0 in there we'll just start off at 3 and so what this object does right here is this sets up the initial or the default state for our application and then what we do is we need to create something else and that is a reducer a reducer is a function the reducer takes two arguments it's gonna take a state and it's gonna take an action and now that we're just getting started let's go ahead and just let's just return the state at this point and I'm gonna add a console log in here so we know what when when this happens reducer running and I'm going to console.log the action so we can see this happen so this is the basic idea of a reducer now for us to use this initial state we just need to do this so the first time this is run there won't be any initial state and so therefore it'll use this and so this becomes on the first running the state of the application any subsequent time it'll actually have it'll actually be passing in state which will be changing this is just a one-time deal right here in in the running of the application and so whenever somebody calls this reducer the first time the initial state will get copied into here and then we'll see this run now the first one to call this will not be us it will actually be Redux itself to do that so now we're going to create the store we create the store by calling create store which we imported from redux and we pass in reducer and then we export default store and so this is the basic set of steps to create a Redux store right now this is there's actually no way of changing data in here we'll get to that here in a minute this is just creating something that that starts off where they count and this is like a basic shell for a store this is bat is basic and to get a basically functional store so we've got the store we've exported it I'm going to go to the app and I'm going to now import the store from store and so this import to this folder will grab the index J a sand run it automatically and so this comes here and now we could finally solve this error now let's see how we're doing okay so we have our counter as we can see a count of three where does that three come from well that comes from right here let's change it to something else so we can see that be different now I'd say okay so let's look at the float what we've done is we defined our store we have not dispatched any sort of action we've also not creating any sort of action to dispatch it but we do have a component that's rendering and we do have a store I want to open up the the developer tools here and go to the console and see something interesting okay and so we've got our application here that's running and we have C reducer running that is here in the store this is our action alright and so if we look in here we can say okay what's going on maps well that's not the one we want to look at well look at this one so here's the reducer running and what has been passed in here is an action and its type is this redux / yeah when i said that something is going to call the reducer this very first time and that's what's going to set the initial state and I said read X was going to do it that is this and this is how we know it happened because we console.log and this will happen once here whenever the when the store is first created and so when that happens that then will basically create this initial State notice this next console.log here this is map state two props and so where does that come from well that's from our map state two props function where the state was passed in and we map state dot count to count here this being what we're using right here so if we console.log remember this is our render all right we're gonna console.log the render props and let's see this again so whenever the application starts up what happens is Redux itself execute an action it dispatches an action which runs the reducer in the store and so here's the action dispatch there's that reducer running and then the a pre renders with the state of count eight and so then the re render the rendering of the component itself happens and what's in its props well there's that count of eight right there there's some other things too and this is something that react Redux is put in there this is all we care about right now and that's this value that came in because we mapped state to props all right so that's the flow dispatch action that runs the reducer and the componentry renders now it's our turn to create our own action and then dispatch it so that the reducer can run and we can change the data and therefore have the component updated so how does that work well this goes basically at this one is needs us to creating a new function and so let's do that instead of just mapping state to props we also need another function called map dispatch to crops node if this dispatch is the the dispatcher for redux and so here I'm going to return a new object just like we did before with the props up here and I'm gonna say on increment click and I want to pass in a function and what's going to happen here is this is going to come in on the props like so and then I can attach it to the button let's console.log that and see if we can see it in action well we got this warning map dispatched props is defined we never use so true we're gonna use it a minute okay so increment nothing is happening here we are gonna have to use it so let's go ahead and bring it in the map dispatch to props goes right after the maps state to props and now we get rid of the warning and when we click on this we can see that that console.log is happening and so what we've done is we've used the map dispatch to props to to make events work here but we still haven't actually entered into this flow yet you have to now create an action well in redux actions are objects so let's create one actions are objects that have a property called type they can have other properties as well and that often do but they must have a type called excuse me they must have a property called type because this is something that you will use in the reducer to determine what kind of action it actually is and so we've defined an action right here give it a type called increment that's create action right there so now let's dispatch it we got this right here so now let's see the flow happen we're gonna click on the component it's gonna create an action dispatch it and then we're gonna see it run and the reducer if I hooked up everything correctly all right so here's our console.log and then sure enough reducer running type increment and so we have an action we've created it we dispatch it and then we come to the reducer and there it comes in right there all right this is reducer running we have successfully dispatched in action to the reducer so now that we have an action here how do we finally close the circle and finish this thing off well what you doing here is you take this action you look at the type and then you decide what you're going to do so it's common it's not required but it's it's common in these to use switch statements so I'm going to say action about type I want to say case increment now what I want to do is I want to return a copy of the state I want to return a brand new state object for us to do that we have to either do it manually or we have to use something something that's built into JavaScript and it's really fancy or handy at least called object to sign let's do it that way if you haven't used to occupy sign before I'll give you a little bit of explanation now and we'll get to a better explanation later on in another video and so if we're gonna take the object that we have here in the state which first time through is going to be what was this if we're going to take that and make a copy of it we can do that by doing this so this first thing I'm passing in is a brand new object and then the state so what this will do is this starts off with a new object and it copies all the values out of here into this new object and then of course returns it but just copying the state is not what we want so what we're going to do is we're going to pass a third object in and we're going to say the count the new count is going to be the value of the state count plus 1 and so the way this flows is start with a brand new object copy all the values out of the state into this brand new object and then copy all the values out of here and so count of 8 is going to be copied at this point into the new object but then we're gonna overwrite that with 8 plus 1 so it'll now be a count of nine and so that's what ultimately gets returned now we're about to get in warning look there it is expected a default case and so all this is is the linter that's looking at the code it's just saying this isn't quite the way I'm expecting to do it what I want you to do instead of returning the state down here is return the state here and that's all there is for that morning okay Hey look at that that actually works so now that we have this complete I want to run through the entire flow of the application with our diagram okay so I'm gonna refresh the page we have the reducer running and the reducer is running because Redux itself has dispatched has created and dispatched in action and that action is of type as see this type property Redux in it with the two that sends signs in front of it so Redux is itself creating and dispatching that action to initialize the store to get it running and so when that first action is is executed this reducer runs and our initial state gets stored in the actual state so when that happens this will cause the component to re-render and that's why we get map state two props running and then the rendering of that functional component with that count okay now if we go here and we click on let's clear that out if we click on this what happens well the click event happened and so that's that console.log and then what we do is in the counter is so there's the console.log we create an action and then we dispatch it so we create an action and then we dispatch it and that goes to the store all right so this right here this dispatch is something that comes from redux this isn't something we built we're dispatching the action and what it does is it sends that to the store and so that jumped to right here so this is our reducer running so we clicked and the reducer is now running our action of type increment so now we're gonna go say okay do we want to handle this action so we're gonna switch on action that type and say okay increment yes we do have a case for that and so take the state as it is and create a new object based on it and override the count value that's currently in state with whatever this is and in this case it's count plus one and so this gives us a brand new object with a value of nine in the count which is why the map state to prop says nine right there and then we rerender so clicked run the reducer rerender how does that look in the diagram we clicked here it created an action it dispatched the action it run the reducer in the store and because there was a new state the componentry rendered and that's the entire flow all right so that is a basic minimalist aria Redux flow there's more to get to but this is about the bare bones of what you can of what you can do and actually have something functional with redux and react

Channel: Eric Sowell

Views: 63,375

Keywords: react, redux, reactjs, react-redux

Id: kJeXr1K3nyg

Length: 28min 27sec (1707 seconds)

Published: Mon Sep 04 2017