React Redux Tutorial - A simple Counter App

all right what's up guys today we're gonna be talking about redux and how to implement it with react alright so I'm not gonna lie to you Redux is kind of a pain in the butt but that's mainly just because it's a lot of boilerplate okay there's a lot of code that you have to write initially in order to set it up but after its set up it's actually pretty easy to implement right so you can see I have a little react router and redox boilerplate template right here on my github just because you know I don't feel like setting it up every time right but it's important to set it up from the start so that you understand what everything is and how to get it to work so that when you are working with redux in the future you're not gonna have any questions about where things are coming from okay so redux a lot of people have a hard time with it and I think it's actually much simpler than they give it credit for I think people really just get bogged down with the terminology and just the amount of the amount of places that they have to look in order to get something to work but I promise you it's really actually not that bad alright guys so what is redux well Redux is a state management tool okay so you know how in our react applications if we had application level state well the one problem with application level state is that if we had some state in our app jas file and we needed it in a child component well we would have to pass that state as a prop to the child component okay but what if we have like nested child components like what if our child component has a child component that has a child component okay well what we would need to do in order to get that data all the way down there is we have to pass it one by one down the state tree okay so that's kind of a pain in the butt to do and it can take some time and you know it's a it's a pretty easy way to run the errors right if you have that many levels that you have to go through there's a good chance you're gonna make a mistake somewhere along the way all right so state management tools like redux are here to solve that problem okay and pretty much what it's going to do for us is it's going to allow us to have some application state that lives in this one place and we can access that application state from anywhere in our application and we don't have to pass anything down the prop tree all right so that's what Redux does let's talk about let's kind of talk about how it works really quick and then we're gonna start writing some code okay so what we have in redux are really three main things that we got to worry about all right we have a store which is where our data gets stored okay we have reducers which is where the logic of our data where the logic of our data essentially gets gets modified right and the reason it's called a reducer is because it's that it's like the reducer function all right I thought the name reducer was a little confusing right and then we have actions right cuz it sounds like actions would be like doing something but the reducer is where is where things actually happen to our data okay and then actions are simply just payloads of data right it's how we get our data into a reducer which is where some logical stuff happens to it you know like we're just gonna make a simple counter app so you would like to increment counter by one inside the reducer and then it gets sent to the store okay so let me show you this really quick because that probably sounded that probably sounded weird all right I explained it like this one time and I feel like this is a pretty easy to wrap your head around it a pretty easy way all right so Redux has these three things right and there's a few things in between that have to happen in order to do in order to get them get them out of work right but the main thing is actions reducers and the store okay well what what is what is this when we actually think about it we'll redux is pretty much just a really complicated way of writing a function right so I want to give you this little example right now and then it may not mean much right now but then afterwards we'll come back and look at the example and hopefully it's more meaningful after we've actually done everything all right so the way you can think about Redux is just like writing a regular JavaScript function so let's just say function do something okay and then inside of here what we're going to do is we're going to console dot log some a variable called something all right so we're gonna actually pass that in right here into the parameter list right okay just a simple function and then we can uh we can get this to do stuff for us by saying do something hello everyone right and then it'll calm to log hello everyone all right so let's break this down because if you ask me Redux is just a very complicated way of writing a function right so what do we what do we have here well if we take a look at this a parameter list we're passing something in right we're passing in some data so that we can do something with it well you can think of this as the action right here that's it that's the payload of data okay and as you're gonna see in Redux later we also need to have action types which are the name of the payload of data okay so you know we could say the action type is do something right this would be an example of an action in redux we got a name of something and the data that it comes with that's it okay those are actions okay so where would the reducer be well the producer would be inside of these curly braces right here because in here we're doing something with the data that we sent in that's the reducer all right and then the store is just I guess it's just this console dot log window right we're doing something with our data and then it's getting output right here and that's where our data lives okay so you know Redux does have a lot of boilerplate but hopefully you're not gonna let it feel too complicated because when it comes down to it if you ask me it's nothing more than just a function all right with with a lot more steps okay so with that basic explanation out of the way let me stop yappin your ear off and let's actually start implementing it into an application all right all right so let's get started and let me quick let me not lie to you guys I don't have all these steps memorized I got my boilerplate application over here on the side that I'm referring to for notes it's a lot of steps alright so don't feel like you need to memorize this and like I said it's a lot of steps it's a lot of boilerplate initially but after you have that boilerplate set up it's really simple to to implement this and get it to work in your application the past stayed around really easily okay so let's get started let's make a new react app so I'm gonna say MPX create - react - app okay oh I got to give it a name obviously Redux util real alright so yeah I'm gonna pause the video while this is loading up and that'll be back whenever this create react app template is done downloading its dependencies alright so we got our happy hacking screen so I'm just gonna say NPM start I'm gonna have to actually go into the folder that I made actually I can't run NPM start in my desktop because that's not the react application okay so NPM start in the folder that we created right and that's gonna have create react app get to work creating our new app right here alright so let me open a new vs code window while we wait on that all right let me drag this folder on this screen alright and let's get cracking alright so I'm just going to do some cleanup here let me get rid of tests I'm gonna get read a service worker and I'm gonna get rid of setup tests okay and then I'm gonna go into in ducts get rid of the set up test lines or the service working lines I should say and then I'm gonna come into this header component and I'm gonna get rid of all this stuff you just have an h1 that says Redux tutorial okay so what we're gonna do is we're gonna make a simple like counter app that Redux is in charge of managing the application level State and just so you know you wouldn't really want to implement Redux for a very simple application that doesn't use like an insane amount of state you know a good example is if you have like a full stack application and you have a good amount of data moving throughout your application when things get bigger it makes Redux a good idea but when you're on a small scale it's it's definitely overkill okay but in this situation we're going to overkill this counter app we're creating just for the sake of simplicity and learning Redux okay so yeah we got our app.js file right here and the first thing that we're gonna need to do is we're actually gonna have to install some packages okay so let's go ahead and type NPM I alright NPM install let's see what do we need here we're gonna need redux okay space we're going to install multiple packages in one line redux - thunk alright and I'll explain what that is later and then we're gonna need it react - redux okay she'll be those three redux reactor ducts and redux thunk alright so those are going to start downloading I'm gonna pause and turn the view back on when it's done alright it's done downloading so let's start our server up again npm start let's go ahead and let's uh let's go into our app j/s file right here and let's get started implementing Redux okay so Redux needs to be the top level component of your application alright and if you are including react router in this as well because you know react router also has to be top level redux would actually go above react router so yeah with the redux pretty much the reason has to be the the top level component is because everybody needs to be able to get their state from the sky alright so if somebody is outside of outside of that you know they're not going to be able to get any state all right so we always just put Redux at the top when we were implementing it alright so what we're gonna do so we're gonna get rid of this right here because we're gonna bring in some react Redux components to get started creating this boilerplate okay so just hang on with me there's a lot of boilerplate to get through but the good news is is that the boilerplate is exactly what it sounds like it's boilerplate all right it never really changes too much so you know every time you implement this you just kind of have to go through the motions all right and then when we get to the part we're actually customizing stuff you know that's that's like the meat and potatoes alright but right now we're just doing the basic setup alright so what we're gonna do you guys is we're going to import the Redux packages that we that we just downloaded all right so we're not going to need too much right here but what we are gonna do is we're going to import something from react - Redux all right and that something is going to be provider my my autocomplete err is not working I don't like when it doesn't work it scares me let me try again um yeah it's this weird provider up there goes our coolest so we're going to import provider and some curly braces from react redux okay and then what we're going to do after that is we're going to use this provider component alright so the provider component essentially connects the redux store to our react application okay so what we're about to do right now is we're going to create a Redux store file which is where all our data is going to live and then we're going to create the reducer which is where the logic happens and then we're going to create the actions which is how the data gets to the reducer for the logic to run and then for it to ultimately live in the store okay these files are separate from react so what this provider component is doing is its allowing us to connect our application to the store all right and there's going to be a few more react components that we have to do in order to finish the process of connecting but yeah this is the this is the boilerplate the early steps for it all right so this provider component is going to take a store prop all right and we're gonna give it a variable name of store all right so what is this what is this store right here well this is a file that we have yet to create all right so we're gonna be kind of doing things backwards we're going to be setting things up and then creating them all right so just stay along with me alright so what we're going to do is we're going to import store which we haven't created yet from dot slash store okay we're just going to make it all in this directory right here okay and then inside of here you know let me just put like h1 so we can actually see something on our page oops oh my goodness we just have an h1 here hello alright so our applications gonna say I can't find this store that you're talking about for this import so let's go create that alright so we're going to say new file store dot jss actually stored is alright because this is not a react component but it is a JavaScript file so it's gonna be a lowercase s ok so what we're gonna do in here is we're gonna set up our store right now okay so what we got to do is we have to import some stuff from redux alright and that stuff that we're gonna import is going to be create store apply middleware and compose alright we're going to see what those do in a second we have a few more things to import though we're gonna have to import thunk from redux - thunk alright and then we're going to import route reducer from dot slash reducers okay so we're importing some functionality from the Redux packages on these two lines and then right here we're importing this route reducer file which we have yet to create alright this is going to be the file that pretty much does all of our logic all of our reducer logic right so the first two lines are going to be packages this is a file that we haven't created yet okay so it's going to break right now but don't worry we will create it in a moment alright so the first thing we're gonna have to do is we're gonna have to create some initial initial state alright and this is just because we have to give some initial state to the store right so what we're gonna do is just give it an empty object right here alright and then we're gonna say Const middleware equals phone all right so a redux thunk is a function that returns another function and we're gonna use this as a middleware option for our create store configuration alright so you don't need to worry too much about what this is doing right now because we're not gonna we're not going to see it in action until we finish setting up this boilerplate so right now what we're going to do after all this is we're actually going to create the store all right so we're gonna make a variable called store we're gonna say Const store equals create store alright that's this function we got from redux right here right here okay and in here we need to give it a few things we need to give it a route reducer all right which is essentially a file that all the logic goes through all right so we'll give it this route reducer that we imported but we haven't created yet but we will in a second we need to give it some initial State all right and then after that we need to give it any middleware that we want it to have all right and the only important one that we're gonna have is a really this right here alright so let me show you what it's going to look like so we're going to say compose alright and we're gonna say apply middleware which we imported from redux up here we're going to say the middleware that we want to apply is this middleware function which has this redux thunk right here if you add other forms of middleware you would put them in here you know like other packages you downloaded like 3 her sis something else but we're just gonna use the redux thunk okay that's all we need for now so apply middleware and then we're gonna say dot dot dot middleware all right that pretty much spreads everything out in this array we really only have one thing but if you had multiple you need to use the spread syntax all right there's also something we can add here right now I'm going to copy this line and I'm going to come back to it later so this line right here allows us to use redux dev tools okay which is a fancy little thing oh man he opened up all the way over here it's essentially a little window that will track all the functions and all the variables that are going on in redux from our Chrome browser okay but I'm gonna show you that after we finished everything and if you were to add this in there right now without the Chrome extension being installed it would it would break your application and it would be kind of hard to debug because I don't think the error message is that that friendly all right but we created our store all right that's the first big part of boilerplate that we had to get through all right so now what we're gonna do after this is we're going to create the route reducer and then after that we're going to create our individual reducer file all right this is where all the logic happens for our very complex function all right so that's coming up next all right so we got our store created that's where our state is gonna live this is gonna be its home right but in order for it to get here it's got to go through a few more steps it has to be sent in the form of an action all right a payload of data and that action has to get sent to a reducer which is where the logic happens which then gets fed into the store and we can see that's happening with this line right here we're going to create a route reducer file and this store is going to use this route reducer file to get all of its data all right so it kind of gets funneled in here right so let's go ahead and let's create the reducer files okay so what I'm gonna do is I'm gonna create a new folder inside of the source directory and I'm gonna call this the reducers okay and inside of this reducers file what I'm gonna do is I'm gonna create an index kotti is and this is going to be our route reducer all right so if you take a look here we're saying import route reducer from dot slash reducers which is this folder and if you notice we don't actually type slash index dot JSON [Music] I don't know if it's note or JavaScript but basically when you give something in index.js file that's a special file name saying basically saying hey I'm the main file of this directory all right so when we just say import this folder all right what happens is it sees that there is an index j/s file in here and this is automatically going to get imported as like the default file all right so yeah okay so let's go ahead and let's set up our route reducer all right so there really isn't too much to put into here but what we're gonna do is we're gonna import something from redux all right and that something is going to be combined reducers okay I'll explain what this is in a second and then I said we're making a counter app so we're gonna need a counter reducer okay so let me write this out and then explain myself okay so import Kontor reducer from dot slash counter reducer okay and we haven't created that file yet but we will all right and then what we're going to do is we're just gonna export default combined reducers all right and let's just say count is going to be whatever is returned from this counter reducers okay so let me explain what this is okay so with Redux okay you don't have to do it this way but this is the way that people do it okay so if you have many different types of data it would get really clunky to have all of the logic for all these random different data types in one file right so typically what people do is for each type of state or each type of you know data that you have let me just let me just type our columns here right so if we have like count and we had like a user array and then we had like a true like is loading thing you know all these things right what you would do with Redux is you would have a reducer file for each of them right because you could potentially have like you know 5 maybe 10 or more functions that could modify the state in a different way right so having one big-ass file of all of that logic and all of those functions can get pretty clunky alright so what people do is they break up these data types into their own files their own reducer files okay and what they end up doing is they say okay in this route reducer we're gonna import all of the different reducer files for all of my data types and we're going to combine them into one file and the this one file right here is fed to the redux store okay so it's kind of like a tedious step right now because we only have one data type so there's probably not much of a point in combining any reducers when it's just one thing but say we had like you know a user reducer which is like an array of users or something like that you know use a reducer from dot slash user reducer right if we add it like this then we would for sure have to feed them into the store like this you know user reducer all right but since we just got one data type for this tutorial we're just doing it like this okay so we're combining the reducers and this part right here is going to be important okay we're saying count : counter reducer all right so what this what this is doing right here all right is it's taking whatever gets returned from this reducer file okay so we're gonna have some data being returned from this reducer file all right and we're saying whatever this file returns we're gonna call it count in our store okay and the names of these variables are going to be important later on when we are getting them from redux right so if you have the wrong variable names it's gonna be hard for your application to work because stuff is going to be coming up as undefined okay and that's why the Redux dev tools are so helpful because they help you out with that but we'll talk a little bit more about that later all right so we're going to come back to this right here when we're actually displaying stuff on the screen okay so we got our route reducer file done not too much to look at here so that's good all right and now what we're gonna do is we're gonna set up our our counter reducer right because we've created one but we didn't actually do anything with it okay so let's go ahead and let's make a file inside of our reducer folder and this is gonna be called counter reducer JX okay the lowercase e it's not a react component okay so what we got to do here all right let me explain to you the way the individual reducer files work for our different data types okay so as I mentioned earlier actions can get sent to the reducer and actions are just payloads of data right with a name and then the data that they need in order for logic to run in the reducer file well the reducer file is just a big switch statement or a big if-else if-else statement right because we could have like a whole bunch of different functions in here we're gonna have like increment counter and we're gonna have decrement counter and we could have like a reset counter function right so what we're gonna have in here is a big switch statement saying hey evaluate what function we're supposed to run right now all right so I said we could have like three functions increment decrement and reset well the switch statement first starts out by evaluating what function got sent to it all right and then after it figures out which code block to execute at that point it will do some logic with the other data that was passed into the function okay so what we're gonna have to do here is a few things what we can do right now is we can start by setting up that switch statement that I just talked about all right so let's export default it's gonna be a function all right and we're gonna need you know what I forgot a step here we're gonna need some initial State similar to how we did in our of redux tour okay we're gonna need some initial state so let's just say Const initial State all right and let's actually give it some state this time let's say count is going to be 0 okay I know you're probably thinking we have count here and we have count here what gives we'll talk about it later okay when we're actually implementing this in our in our react application okay so we're going to make some initial state it's just going to be an object that has a count of 0 right and in this function we're going to use we're going to use es7 syntax es 60s seven we're going to say state equals initial state alright so we have a prop right here which we are setting to this object we just created by default okay so we give it some initial state and then it's also going to take an action okay all right so we got a little switch statement set up right and you're probably thinking well we need some cases right because the way a switch statement works is you know it has a whole bunch of different things that it could run based off of which thing gets sent to it that's true right well as I mentioned before we need to have actions that have the name and the data that they need to do their function so in order to get this to we're gonna have to kind of derail from creating this reducer file right here and we're gonna have to create some actions all right because this reducer file is going to evaluate the action types or the names of the actions which is basically like the name of a function you remember when I said like function do something right the name of the function right that's pretty much like the action type and then whatever we pass into the parameters right here that's going to be the payload of the action and together these things combine to create an action but yeah the switch statement here that we're about to create he's going to need an action type to evaluate all right which is the name of the function alright so let's just set this up right here let's say switch on action dot pipe and then let's end it there and let's go ahead and let's get ready to set up some of our actions okay so actions are gonna be payloads of data and the way that we're gonna set it up right now is that they're gonna be like a template right we're gonna say hey you're gonna have this name and you're gonna have some data passed in to you okay so what we're gonna have to do is we're gonna have to import something that we haven't created yet but we will create it so we're going to say import from let's let's say import increment okay we're going to make our increment function first so increment from we're gonna come out one folder and we're going to create an actions folder and then when we create an action types folder okay so what we're gonna do is we're going to come into the source folder and we're gonna create a new folder called actions okay so I'm saying hey I'm in the counter reducer file inside the reducers folder I want to come out of here with dot slash going to this actions folder and get this action types file okay so let me create that action types file action types KS okay and cool okay so we're going to come back to this switch statement in a second and our counter reducer and what we're going to do right now is we're going to create our actions right here or we're gonna create our action types rather alright so that's coming up next I just noticed I got an error right here okay and saying store does not contain an export default so let's fix that so I kind of spaced here we created the store variable but we never we're never exported it rikes the app is saying hey I want this store variable from your store file but we never said export default store all right because we don't have this line right here this guy ain't going to be able to get out of the file and become available to the app jas right there okay so now it's going to give me another error produced or count return undefined during initialization I'm pretty sure that's just because our our switch statement isn't finished yet so let's go ahead and let's just fix this all we need right here in the switch statement is like a default return statement all right so what we're going to just do is say default return state okay now if we save that okay yeah it's it's not yelling at us anymore okay so I'll make mistakes - my bad all right I'm human so we left off we we created this switch statement right here which is just returning some state which is this initial state right here and what we need to do is we need to start by creating our actions okay so these actions you guys are going to be broken up into a couple of files okay there's going to be the action types which is a file of constant string values all right just a follow up string variables that have the name of the actions or the name of the functions that are going to get sent to this reducer file right here okay and we're also going to create an action creators file which is in charge of building out these I wish with the with the action types right with the names so the reason we have to create an action types file where we just have a bunch of string variables is because we're going to use it in two places we're going to use it in this counter reducer file right inside of the switch statement and then we're also going to use it in the action creator file when we are creating these objects which are just the payloads of data right so this is just to prevent from having a typo and then if you change the name of one of your actions you're only going to have to change it in one place the place where the variables exist the variable file alright as opposed to coming in and changing it for every switch statement and every action creator you had alright so let's go to this action types file we created and in here all we're gonna do is make some string variables super simple so we're gonna say Const Const increment alright and it's just convention to have this in all caps right so increment is going to be increment okay so this string value is going to be the name of our function right it's going to be the action type okay so the action is going to be an object it's going to have an action type which is going to be this string value right here and then he's also going to have some data most likely okay so what we're gonna do is we are going to come into our counter reducer okay and we're gonna make a we're gonna make a case okay for the switch statement alright so we're going to say case I don't actually want that come in their case increment alright so we're saying if the increment action type was sent to us then we're gonna want to do something alright so how about we just console dot log action okay and we'll see what this action is in a bit okay all right so now this route reducer or this counter reducer it has some initial State and then it has something to look for all right so it's basically saying if increment was sent in which is this string right here if this string gets sent in right here okay then we're just going to console dot log the action which if you remember is like the object that has the data in it right so we haven't actually created any actions yet so let's do that right now okay and so this console dot log action might not make any sense right now but after we create the actions and get something sent to the store we're gonna look at this console dot log and it should solidify a little bit more in your head what this action is okay the name is a little misleading it's called an action but it's actually a bunch of data it doesn't actually do anything I don't know who named these things all right so let's go ahead and let's go into our actions folder all right and let's create um let's create a new file and let's call this count actions okay all right so in here what the first thing we're gonna have to do is we're gonna have to import this string right here okay because it's going to be part of the object so as we can see it's getting used by the reducer file and it's going to get used in this action creator file okay so it's good to just import it so that we avoid any typos and double work and stuff like that so let's go ahead and import that guy we want to import add to do not add to do sorry I'm looking at my notes we're gonna want to import increment from action types what's up with my autocomplete I don't like when it does not a complete formula oh well it's been bugging out lately I'm sure it's fine I hope all right so what we're gonna do right now is we are going to create a Redux thunk okay so a Redux thunk is a function that returns another function okay and I may have my terminology up here but this what we're about to type right now is also an action creator okay because we're gonna create a function that is essentially going to create our action which is an object with some data in it and it's also going to be a Redux thunk and the whole part of it being a Redux thunk is it allows it to get to the reducer okay so that probably doesn't make any sense at all so it's just coated out and let's see how it works all right so we're gonna make a function here all right we're gonna say export function let's call this increment with lowercase letters all right and I don't think this guy is going to need to take any data at all okay so what we're going to do is after this we're going to return another function all right this is the Redux the redux thunk part of a function that returns a function all right so what we're gonna do here is we're gonna return a function that has this prop of dispatch okay I didn't say what this was before okay but the dispatch is essentially what sends the action to the reducer file okay all right so The Dispatch is in charge of sending this this object that's going to get to the reducer okay so inside of this second function right here what we're going to do is we're going to call dispatch and we're going to pass to it an object alright and this object right here is going to be our action okay so before you know there's a different way of doing it like you would write a function that creates like this out this object right here and then you would write another function that calls dispatch with the object that you just created I personally think it's easier to just sit just to just do it in one function alright it may be a little bit less readable but it's gonna work right you're essentially just creating a function that returns an object and then calls dispatch on that object to send that object aka the action to the reducer which is where the logic happens which is where which is what sorry brainfart which is where the modified state or data then gets sent to the store and then the process is complete okay so we're getting there so as I mentioned these actions are gonna have two things okay usually the first thing that they're gonna need is an action type right that's the name that's that string constant that we created earlier okay so they're gonna need a type and the type is going to be increment that's that string value that is just called increment that we saw and then after this you would send along with it any payload of data that you wanted but I'm trying to think if we need any data to increment to counter or decrement it I don't think we do well we need to know what state currently is but in terms of sending anything along with it I don't actually think we'd need anything all right so this action is gonna be fairly simple okay all it's gonna have as an action type all right that's pretty easy so so the workflow of this right now right we have created all this stuff and you're probably thinking well what the heck are we going to do with it where is this going well this function right here this increment function all right it's going to create an action ok and it's going to essentially send this action type to the reducer and then in the reducer we're going to do some some type of logic to modify this count and then send it to the store okay so in order to call this function what we have to do is we have to make this function available to one of our react components okay and you might be thinking hey didn't we do that with the provider already well this was connecting it to the store and now we have some functions available in redux that we want to use to modify the state so there's just going to be a few more lines that's gonna allow us to connect to the store okay and give these functions and get the state that exists in the store okay so we created our action ok now all we have to do is make this action available to one of our components so that we can pass it as an on-click prop all right so what's going to happen is when we click on a button this function is going to run it's going to call dispatch and it's going to dispatch this action that we just created right here and whenever you dispatch something in redux it goes to the reducer file okay so this reducer file sees that it got an action dot type of increment what it's gonna do is it's just gonna console dot log action which is this object that we created okay so we're gonna do that next and you're gonna you're gonna kind of see how these things are coming together all right definitely a lot of boilerplate so far but the good news is now that we're in a place to where all we really need to do is create one of these functions and write some logic if we want to be able to modify our state in a different way all right so we're going to see how we can do that in the next part okay all right so we did oh man so we did a whole bunch of stuff already and now we're finally ready to start start using these functions on redux to modify our state all right so let's uh here's what I want to do let's just make a quick little page right here I don't really feel like putting it in the app.js file so let's make a page it's called this um jf okay and you know let's just make a class based component here and then we just kind of have an h1 that says hello then a little P tag hi okay what is what are you complaining about Oh duh they need a parent element so let me give it a react fragment here okay all right so let me import this into my app jas file so I'm just an import home from dot slash home and then I'll just display it right here all right whoo all right so let's go into the home file and in here we are going to connect this component to redux all right and we're gonna be able to get its functions and any state that it has okay we're gonna see how we can do that so what we need to do is we need to import something from react redux all right and that something is going to be the connect component okay so let me let me get rid of this export default up here because the syntax for this is gonna be a little different okay all right so what we're gonna do is we're gonna say export default home um home all right and what we need to do you guys is we need to come right before the home and we need to use that connect that we just got from react redux okay so we're gonna say connect okay and then what we're gonna do is we're going to pass to it I set a parenthesis and then after that set of parenthesis we're gonna put another set of parenthesis around our component name okay so in this first in this first set of parentheses right here we can pass a couple of things all right so what we can put in here is the ability to get the current state from redux and also any any actions that we created in redox and as we saw we have this function this action creator function right here okay so let's just start off by getting some state right here okay so there's two things there's map state two props and there's map dispatch two props okay and it sounds it sounds a little weird but map state two props what what it pretty much does it gets the redux state and it makes it available to this component as a prop right so as we saw before we have this count state right here well after after everything is said and done we'll be able to access it by saying props count okay pretty simple and then uh that thing that I mentioned earlier about these names right here where this says count and then in the store file if I can find it not in the store file and the route reducer file it says counts right here as well I'm gonna I'm gonna get to how how this part works right so what we're gonna need to do to connect our home component to the store and get some state all right that's going to be the first part is we're gonna write a function right and this function is typically written like this map state to crops and it's going to be an arrow function which takes state as a prop alright and then in here we are returning an object alright so print the C and then curly braces all right and then right here we're going to say what we want the name of this prop to be so if I wanted it to be called dingus I would write dingus right here okay and then in order to get that state I'm gonna have to do a couple of things I'm gonna have to drill down okay so I'm to get it I'm gonna have to say state and then the first place I have to look is in my route reducer file okay I called this state count right so this is the first thing I need all right count alright so state count okay and then this count variable is pointing to this counter reducer file okay so let's go ahead and let's take a look at that come on move over and then in here I called this state count okay so in order to get this state in my home component I would have to say state dot count dot count and that might look a little confusing but I will change these variable names around so you can see what I'm talking about okay so in order to get this we need to pass this function into this curly braces right here okay so the way it works is it takes two parameters the first one is any state that you want to get from redux and the second one is going to be any dispatches that you want to get from Redux which is this function right here right we're going to be able to send this function okay so right now all we want is the state all right just so we can display it on the screen and for the second parameter to give it a property of null right here saying we don't want nothing okay so now this home component should have a prop of Dinges all right so let's take a look right here let's go ahead and inspect let's go to our components we have this home component and we have a prop of Dinges which is set to 0 okay the reason it's 0 is because in our count to reducer that's what we that's what we initialized it to 0 and cool so now if I just want to display this right here I'll say current count is this dot props dot dingus okay cool and let's go back and look at our application current count is zero okay cool not the fanciest thing in the world but we're getting somewhere okay we're finally getting somewhere all right so I want to show you how these variables work right here so if I came into my route reducer and I called this count lol it would now say can't read property of count undefined because state is right here it's pretty much referring to the Redux tour and then it goes into the route reducer all right and when it goes into the route reducer when it goes into the route reducer it sees okay the first thing I have is count lol okay so what it's doing right now is it's looking for count which doesn't actually exist okay but if I change this to count lol and I save it now it works again okay similarly with the count to reducer if I type this if I made this like count sleeve I don't know now okay so I change the state in the count to reducer from count to count liebe and then in my home component I'm saying okay this Dinges prop is going to be a state count LOL which is coming from the the variable name we gave in the route reducer file okay and then we want the count property from that route reducer file okay so the route reducer points to this count to reducer okay so we go into that count to reducer and we can see that we don't actually have count we have count lead right here so this is still going to show up but it's just going to show up as undefined all right so if I go into my home component and I name this count flee all right we can see that the zero comes back so okay that's how we can get some state from redux okay now the next step is going to be to send this action creator that we made earlier in order to modify the state of our application all right so done the next thing we're gonna have to do is we're gonna have to set up the dispatch all right so what we had done was we created an action creator alright which is just a payload of data right we didn't actually need to send any data along with it so the action creator just creates an object with this string value in here right and then when this gets sent to the reducer from dispatch the ROO producer will just console dot log the action itself alright and what we're gonna end up doing is like writing some logic in here okay but for now we're just going to console dot log in for testing purposes so let's get this let's get this hooked up okay so what we're gonna do right here is we're gonna create a button okay and this button is going to say increment okay and he needs to have an onclick prop well this on click prop is going to run that action creator that we made right here all right so it's going to make this object it's going to call dispatch and then it's going to get sent to the reducer all right so what we're gonna have to do is we're going to have to import this action creator and then we're going to have to map it to the prop right here okay so what we have to do is say import all right and then we're importing from where is this file we're in the home page so we have to go into actions slash slash count actions okay and in this count actions file we have this increment function okay so right here we're going to say increment we want this function okay the one one bug I saw somebody have before is they didn't know the difference between uh exporting and export default okay so since we're saying port right here all right we have to have some curly braces and say exactly what we want but for example this home component right here it has an export default right whereas the other one didn't have a default it just said export all right when we have an export default we can just simply say import the name from that file okay so you're going to want to make sure that you have the the correct syntax for this right here okay so we imported this function and the way we're going to connect it to our components props is by coming into this second per am okay and what we need to do is give some curly braces all right and then all we're gonna have to do is just say the name of that function that we imported so we're going to say increment okay sorry so if we saved this right here and then we take a look at our chrome tools all right we can see we have this increment function as a prop in our home component all right awesome so all we need to do is we need to use this increment function all right so let's go ahead and let's come to this button here let's give them an on-click property of increment all right and then we can't just say increment because it's available as a prop so since we're in a class component we need to this keyword and we need the props keyword and then we can say increment okay so we have our increment function all right so now when we click on increment something breaks all right so let me let me pause the video and see what I did Berlin guys allege wrong it said actions may not have an undefined type property so I was thinking I was thinking what are you talking about I got the type right here that's increment I'm importing it right and then I'm also using it in the count to reducer file right then if you remember I was like what the heck my autocomplete isn't working well when I went to this action types file I noticed that I do not have an export here all right so this guy would never be able to leave this file and that's why my my autocomplete wasn't working all right and as a result everything was showing up as undefined okay so a big oops on my part but hey it happened to me it could happen to you and now you got an example of a bug all right I ain't gonna sugarcoat this thing so I've been using Redux for a while and even though I make mistakes do all right because there's a lot going on all right so now it should work okay so if we hit increment all right and we go to the console we can see that a console dot logs are action okay with the type of increment okay cool so we know that by doing this okay we're able to get our action creator from the file and map it to the components props okay and then when we click it we know that our action creator was created correctly because dispatch is getting called and it's making its way to the reducer right here okay and the reason that this is constant logging that action which is the object it's because it goes into the switch statement of the reducer which it just made it to from dispatch all right and we have this switch statement right here it says okay take a look at what action was sent right if it was increment which is what we sent you know that was a part of the that was the action type okay so it's saying hey take a look at the action type if it's increment then just console dot log the action and it showed up in our console okay a lot of stuffs a lot of steps alright now the last thing we need to do is we need to write a function or some logic in this reducer file that's going to increment this count okay so how can we do that well it's going to be very similar to how we would do do this with react okay so we're gonna have to create a new state object we're not going to call this got set state though what we're going to do is we're going to return a new object okay what we're going to do is we're going to say return what I called it count liebe okay kind of weird but okay so count leave is going to be a state dot what did I call it counts liebe plus 1 okay so you know how before if we were doing a counter app we would say hey we want to call set state and overwrite this value with this dot state dot whatever state currently is plus 1 well now we don't need to this keyword so we're just saying hey take a look at state state is like okay I am this initial state object right here okay and then we're saying hey add 1 to it okay so now if we save this right and you guys you got to remember to maintain the rules that you do when you're modifying react state you always have to provide a brand new object and you never want to modify anything directly alright because that can lead to some data and balances ok so let's take a look so now if we hit increment it goes up to 1 it goes up to 2 blah blah blah okay awesome so we did it we implemented redux okay so tons of boilerplate it's hard to learn just because there's so much stuff to remember but if you code along with this and you create a github repository for it you're gonna have an example all right so what we did was we created a provider that has access to a store prop which points to this store file right here okay and this provider component makes it so that everything inside of our application has access to the store if we use the connect component okay so after that we created our store file this is all boilerplate okay and then later on we're going to talk about this this extension right here that's gonna give us the redux dev tools okay but this is all boilerplate you know just for setting up our store and basically what you need to know is we said hey we're going to use this route reducer file okay well the route reduce your file is index.jsp all right and then in in and here you would combine all of your different types of data all right since we only have one we just did one all right and then after that we created a count to reducer which is a switch statement okay this counter reducer is going to evaluate some action types right here which is just a string constant all right and then it basically sets some default state all right and then it just waits for an action to get sent to it all right and if an action was sent to it that it recognizes then it runs a specific code block okay then we actually had to go and create those actions okay so we created an action account actions file all right we called it count actions because it's for the counts data type all right so we have account to reducer and a counter actions file okay and then what we did was we created this Redux thunk which is a function that returns another function okay so what this function does it is is it essentially calls dispatch which is the way of sending an action to a store the way of sending a payload of data to the reducer I should say not the store okay so this calls dispatch it sends the object that has the action type and if we need any data which we're going to do later we'll see that as well that's going to get sent as an object to the reducer all right and then when it's in the reducer we've run some logic and the state updates all right and the way we get this all we get access to this functionality is with the connect statement right here okay so we say export default connect the first part in here is going to be map state to props all right that's this function that we write so the first part of it is the name of the prop and then we have to say state da whatever we had in our reducer file dot whatever we had in our specific reducer file okay so I called in my route reducer I said count lol that's where that variable comes from and then this points at the account to reducer and I called it count fleed okay there's just some weird names I wouldn't expect you to name at that okay that is just a demonstration okay so then we put that as the first prop to the or the first parameter the first set of parentheses after connect all right and then we have access to this state as a prop alright so we've called a dingus wouldn't say this not prompting is in order to get that count variable okay after that we would put any functions right here in order to modify the state all right so we imported our count actions function where is that right here all right remember so this is what calls dispatch and creates the object okay so we use that right here we said hey the second parameter is going to be that function that we imported and now we have access to this function as a prop and we pass it to the onclick to modify our state okay ah so that's pretty much it I know it's it's a lot but the good news is that after you get something simple like this it's very easy to add more things okay so what I'm gonna do with the rest of the tutorial is I'm going to make another function a decrement function just so you can see how easy it is to create something new and add it to the functionality after all this boilerplate is in place okay and then we're also going to make another function called a reset count okay and we will actually pass some data into that okay so it's just a very simple Redux application but hopefully it's helping you get your mind around all the different components and how they all look together okay so if you want to see the rest of it stay tuned if not see all right so with all that crazy boilerplate out of the way okay let's let's see how easy it is to just add a new function and get it to work right so we don't have to set up an e in this crazy boilerplate all we would have to do now is just create a new function that we can use okay so what are we going to need here well we're going to need a new action creator we're gonna need a new case in our reducer file we're gonna need a new action type and then we're gonna have to get this action creator in our component that's going to use it okay so so let's see the steps for that okay so the place that I I like to start is just in the reducer file right here okay so what I'm gonna do is I'm gonna make a new case okay and I'm gonna say this case is gonna be DIC rement all right and then what we're gonna do here is we're just gonna console dot log the action that was sent to it okay so I'm pretty much just setting up a case here you know for our reducer file and I'm gonna go through the steps of getting everything to work and then once it works I'm going to simply just have this console dot log test right here all right and then the way I like to do it is that after I know everything's working after I see this combat log statement after that then I would write the logic for the reducer case right here okay so for the for the time being just to test out I'm just gonna have console dot log action okay so I'm also going to need a new action type okay so we're gonna come into our constants file action types and we're gonna make a decrement one so export comps I'm going to remember to export at this time okay so we're gonna say decrement equals decrement okay this is going to make our counter go down okay instead of going up yeah so we got our action type the next thing would be to make a new action creator for this okay so this is what the this is what's going to is going to be the payload of data that when we click on something it's going to get sent to the reducer this is the data that we're sending to our reducer file or logic bottle if you will okay so let's get started okay what we're gonna need is that action type again so we're gonna need decrement all right and we're gonna say export function decrement okay and this is going to be a redux thunk and an action creator at the same time I guess so we're gonna say export function alright and what we're going to do is we're going to dispatch this object that we are creating at the same time okay so the type is just gonna be Dickerman okay and we're not gonna need any data here but we're gonna make one that does need some data you know so I'll show you what what that looks like after this function okay so we got our case set up in the reducer we got our action type created and we got our action creator okay now the only thing we need to do is we need to make this available to a component that's gonna use it all right and we're pretty much just putting everything in this home J's file okay so we're gonna have another button here that's going to say decrement okay and his on click is going to use decrement so what we're gonna have to do is import that function we just created in this count actions file this guy right here okay and then we're also going to have to make that available as a prop right so if we take a look right now in our chrome tools we can see that this home component has increment it has Dinges which is not very descriptive okay let's actually change this list account I'd make more sense and you know we're gonna have to change this right here from dingus to account okay so we have count and increment ok dingus is gone so what we're gonna want to do is we're gonna want to make this function available to us as a prop okay so we're going to do that right here by saying decrement okay now that function is available as a prop okay so in order for this button music he's gonna need an onclick property all right and that onclick property is gonna be that new prop that we just that we just passed and decrement so everything should work when I when I click this decrement button it's not going to do any logic to our state but it should just console dot log something all right so if I click it it's not console dot logging okay that means something is going wrong okay so let me let me make sure I saved everything okay deeper meant okay and then where is my account to reduce her decrement is not defined in the counter reducer oh oh man I was gonna do this and then I I remember when I was writing this case right here I made a mental note I was like okay I'm gonna import it too but looks like I didn't do that silly me okay so let's import this action type it was saying it was undefined and that's because we never brought it in right so when we were saying hey we have a case for this decrement right here we never actually imported this variable name that we're checking for right here okay from the from the action types file all right but we did it now so now I should see a console dot log type Dickerman cool now all we got to do is write the logic okay and since it's a counter app it should be fairly straightforward so yeah it should pretty much look like exactly the same one we did above all right so we're gonna return a new object all right and count liebe it was a very weird name to call it that's what calling it I guess should be whatever counts liebe currently is so we're gonna say state counts lead alright which points at the switch statements state alright sorry I had to pause the video there alright so original state dot counts liebe to get whatever state currently is and then we're gonna subtract one from it okay so now if we take a look increment and decrement it's working just fine okay so I think this would be a good chance to implement the chrome dev tools now the Redux dev tools okay so what I'm gonna do is I'm gonna go back to my store right here and I'm going to uncomment this line right here okay so let me quickly show you what we're gonna do is look up redux dev tools okay it's a Chrome extension that we can install all right then it allows us to pretty much use this debugger they have for us okay so you're gonna want to go to their github right here I can copy it after you install this extension I already have it so right here it says remove but you would just click install alright and they have instructions for how to get it set up okay but I'll pretty much the squawk you through it you know they have usage right here what we got to do is we're gonna get this line right here which they have on their github page right here we're going to take this line right here and we're going to put it right after the middleware statement so right here we're gonna paste this in okay now if we save go back to our application we should have this little icon up here alright and if we click it we can pretty much see everything that's going on in our application so if we click that state we can see we just have a little count fleep right here it has this count lol variable that's coming from the reducer and this count FLE is coming from the the counter reducer okay so those are the two variable names you know so if you needed to get it in your component the home component you would say state dot whatever these two variables are okay and then we can see all of the functions that are run over here on the left alright so as I increment decrement we can look right here it shows everything that happens all right and we can see how state changes in the diff we can see the actions that are done the state all right so it's gonna be a really good debugging tool for you alright so I highly recommend installing that okay and you can do some more research on you know pretty much what it does but I think it's pretty straightforward just make sure that you only you only add this line after you have that Chrome extension installed because if you don't have the Chrome extension installed it will break your application all right so yeah let's just do one more thing and then this tutorial is done let's create a new action that it's gonna have some data all right so it's going to be an action with an action type and a payload okay so let's see what that would look like alright so the last thing I want to do is I want to have like a little input box down here then it's going to be a controlled input right and we can pretty much put the value the number value that we want to change count - and when we hit enter it will change count to whatever we pass him okay so that's gonna require all the new Redux stuff that we just saw for the button and then we're going to have some react controlled for him all right so let's start with the react controlled form really fast all right I'm gonna put a little break right here alright and in here I'm gonna put inputs type of number and then I'm just gonna have like a little button down here okay change counts change counts okay so yeah not the prettiest thing in the world but we'll see how that works so the first thing we want to do is we want to make this controlled by react the controlled input so we're going to use the snippet archons to get some estate and I'm gonna go kind of fast here it's I don't want to be here all night I'm sure you don't either alright so we're gonna say let's call this like number input okay and let's just set it to zero okay so what we're gonna do is we're going to set the value of this input to be this dot state dot number input okay now if we go in here we can't type anything all right and we're gonna that means because we have to give it a non change handler okay but we can see that we have some state here we should have some state here oh here it is a number input is zero okay so the next thing we have to do is we're gonna have to make an on and on change function alright so let's call this just call it handle change alright it's going to be an arrow function which means we don't have to bind it to this component and what we're gonna do is we're gonna say this dot set state all right and we're gonna need this event prop right here alright so what we're going to do is we're gonna say number input is going to be equal to event target dot value okay so by passing this function to this inputs on click this on change right here unchanged equals this dot handle change all right by giving this input this on change which runs this function right here every time we update this input box it's going to update our state all right so if I type one two three four five my component thing is sleeping on me but I'd a whole bunch of numbers here we can see that our state gets updated okay cool so that's good we got a controlled form all right that's as far as we're gonna go for this for the time being the next part is going to be to make the redux functionality okay so let's do it the same way we did before so let's call this one case let's call this change count i guess alright and all we're gonna do is console dot log something as a test alright for whenever we run it the console dot log the action alright so what we're gonna have to do is create a new action type so let me quickly import that before i forget I'll save change account and then I'm gonna go into the action types and create a new constant so whoa export aunts change count equals change count okay change count cool alright now what we're gonna have to do is we're gonna have to create a new action a new action creator okay so we're gonna have to import that new constant that we just made because he's going to be the action type alright so import change account and then we're going to say export function change count all right and then we're going to return a function it's just going to call dispatch right here so we're going to say dispatch all right so we've seen this before the type is going to be that constant change count but it's also going to take a payload of data all right so we're going to say the payload is going to be well we need to pass something into this function so let's think about what we're going to do okay so what we're going to do is whenever we click this submit button we're going to take this input right here this number we put in the input box and we're gonna let that be the payload of data to send along with the action so if I change this to 500 and I click Submit I want to update count to be 500 okay so that's gonna get passed in in here all right so when we're creating our action creator we need to kind of think a little bit in the future and you know figure out what is gonna get passed into here as a parameter all right but we know just from thinking about it that we're gonna need to pass in some sort of data some number so it's called this number - change - alright just to be super descriptive alright so you can call this whatever you want but typically it's just easy to call it payload for all of your actions that have data just so you can always be like action dot payload and you're gonna get the data that you need in your reducer all right it's just gonna make things easy for you it makes it easy for me at least alright so when you run this function we're going to pass in a parameter which is going to be the number that we want to change count - alright and then we're gonna dispatch this action which is just an object with some data in it okay it's going to have an action type which is the name of the function that's going to get R and in the reducer and it's got a payload of day which is the parameter that we pass in okay and if that doesn't make sense don't worry because you're gonna see how useful this console dot log statement is and the reducer all right so we already have this right here this change count okay so it looks like we've got everything in place all we got to do now is get this function in here make it available as a prop and then use it right here all right so let's bring that new function in we got change count and then we're also gonna have to pass it as a prop down here okay so now we have change count as a prop all right so as soon as we pass it in right here you can see it doesn't exist whoa I can't go forward change count all right doesn't exist and now it does okay so we're gonna give that to this button right here okay so on click is going to be this dot props dot change count okay and this guy needs a parameter alright and that parameter is going to be whatever this state currently is okay so how do we get this variable from state alright and just to be explicit we're passing in whatever has been typed in this input box right here all right so how do we access state well this dot state and then we say whatever variable we want number input okay so this time state dot number input okay so yeah that's pretty much the function so let's let's see if it's working the way we want so if I type five five five and I run this action right here I should be able to check my console and it looked like it ran over and over again did I what did I do here this button has an on click oh you know what I did wrong okay I've mentioned this before but when you're using on click okay and you have a function that takes some parameters it's going to call itself over and over again so what you got to do is you got to preface that with an arrow function right so now you should be able to just say whatever we want and then BOOM alright so I'm running this action just getting dispatched and it's making it to the counter reducer file and when we see this change count that comes in this type of change account all right the case we have is to just console dot log the action that was sent which is this entire object right here okay and we also have a payload of 555 all right so all I want to do is just update state this count right here to be whatever we passed in all right so what we're gonna do is we're gonna say we're gonna say hey I want to return a new object and the counts leave property is now going to be whatever we just passed in so how do we get that payload well we got to get it through through action all right which if you remember our console dot log action is referring to this entire object right here and the value is right here so if we say action dot payload we're gonna get five five five or whatever we send to it okay and just to prove to you if I console dot log action dot payload and I saved that so I submit this it'll say zero I change it to five it'll say five that's the action payload okay that's the data that's coming in right because we're passing it in right here okay when we call our function change count all right so yeah let's go ahead and uncomment this out we don't need this console.log here anymore and now we can see that when we hit five five five and we submit this five five five gets update cool so I got a couple more minutes so one last optimization we could do is whenever we submit this we can empty this form out so in order to do that I think I would need to set up a new function all right so let's call this a handle submit alright and this is going to be an arrow function all right so what I'm gonna do is I'm going to copy and paste what we have right here okay let's get rid of this guy as well all right so I'm gonna copy and paste this right here and then after this runs what we want to do is empty out whatever is in state set it to its default value right so in order to do that all I got to do is say this dot set state and I'm gonna pass to it a new object and this a number input is now going to be zero okay and then I'm willing to say hey your uncle your onclick is now gonna be this dot handle submit okay so I knew I know what kind of flew through that but uh this tutorial is insanely long anyways so I don't think anyone's gonna complain alright cool and then we can increment whoa what's going on here was that right hold up 777 increment what the media bub hey I found my goof so for some reason this state right here is showing up as a string value so what I did was I casted it right and casting is basically making one data type a different data type all right so what I did right was I just came in here where it said this dot state dot input I basically came to the handle submit I said hey just so you know you're gonna be a number all right so I said number and then I wrapped this guy in some parentheses okay so that was just a little little logic error on my part and if you don't know how this works don't worry because I probably I probably did the function wrong somewhere to where it was showing up that way but you know don't stress about it too much because the point of this was to show you just how the Redux architecture works all right I suck at algorithms I'm not gonna lie to you and I think I just proved it to you so yeah that's pretty much Redux we got actions reducers and the store and pretty much all you need to know is that it's just a very complex way of writing a function all right and kind of just having a switch statement to figure out what function we want to run all right so that's my Redux tutorial in a very simple way I hope it didn't confuse the crap out of you and if it did let me know and I'll do my best to help out all right

Channel: Creative Bob

Views: 816

Rating: 5 out of 5

Keywords:

Id: KBgtW4qCnLw

Length: 102min 1sec (6121 seconds)

Published: Wed Jul 15 2020