🔴 Building a Todo List App with Redux | Redux Tutorial with React JS for Beginners

what's up you guys it's david here from from coverprogrammer.com and today we are going to be talking about how you can get started with the redux and state management and all that kind of stuff using the redux toolkit now this is actually going to be the simple easiest way that you can get uh get your head into state management redux and all these kind of stuff so let's just talk about what redux is so this is probably the most important skill that a react developer can learn above react obviously redux basically is a bubble around your application it's kind of like a data layer speaking of data i got you a little something that can potentially up your programming game to the next level and you can actually monetize it at any given industry that's right one of the most important skills you can learn as a developer and you can actually charge more by just implementing some sort of analytical stuff is basically data science now your one-stop shop to learn data science is actually data camp is they give you a wide range of 300 plus courses that you can choose from say sql python or whatever they got you covered all that courses are bite-sized so no matter how tight your schedule is it does fit in and the best part it is actually accessible on mobile so even if you're on a toilet walking your dog getting groceries you can actually watch data camp all their courses are focused on practicality giving you the head start you deserve subscribe today for 25 bucks a month and let the skills you acquire pay for it still on the fence check out all their courses first chapter for completely free check out datacamp in the description down below let's get straight back into the video that is accessible for all the components that you have inside of your application basically you use it when the normal states are just not good enough and the whole idea around it is that you have a data layer around your application that is accessible for all your components so basically you can have some sort of global states that way creating an app with redux is as simple as typing in npx create react app space dot space template redux and it's just going to spin up a full working application that you can go ahead and get started after smashing that like button for the youtube algorithm i've made a quick to-do app just to demonstrate how this whole thing actually works and how you should be thinking about it and i actually link it down below so you can go ahead and clone that repository from github and you can just go ahead and take it away play with it and do whatever you want and speaking of stuff in the description we actually just released a new module to our course profit with javascript so i actually highly highly recommend checking it out because it's pretty awesome and i'm not gonna talk too much more about it and we actually gonna have some exclusive stuff just in there so make sure to go ahead and check it out we also have a one hour free training down below in the description you can go ahead and check out how nas made 300 grand in three years as a javascript developer so if you like money go ahead check it out because it is like literally a step-by-step tutorial how you can do the same so if you like money make sure to check it out and actually watch the whole thing it's super awesome with that said comment down below what you want me to build next for you guys and smash that like button subscribe for more awesomeness and let's roll that [Music] intro [Applause] all right step number one into understanding how this redux thing works is we're going to build a to-do app so we're just going to call it uh redux it's good and over here let's open up a new terminal and we're going to type in here npx create react app space dot dash dash template redux template redux so this is pretty much going to go ahead and do us all the hard work do all the hard work for us i will speed this up because this actually does take quite a while and this will basically do uh create us a react app that will be completely usable by us and will have a redux in it so we can pretty much go ahead and start building just like that all right all right so once the process is done we can you pretty much do the usual code space dot that will fire up a vs code with the project in it and i remember asking for more zoom so i will zoom in even further let me know guys in the comments down below if it's good enough zoom or not and but anyways this is pretty much the app we got we have a few different uh other folders than before but let's just go ahead and fire up the application so i'm just gonna hit yarn start in here and this is the template application that we get with redux and you can see a counter over here we can add like different amount of numbers to it and this will this is basically getting stored in uh redux and this is pretty much what we will understand and go ahead and make as a to-do list all right so in here we have a few different things uh we will pretty much not use any of these just like uh with the normal react app we can pretty much go ahead and delete everything inside of app.js so everything in between the header is going to be deleted as well as app.css is going to be completely emptied uh all these test files are not gonna be used at all neither is going to be the logo and we can go into uh index.css and add a margin of complete zero and that will pretty much just snap everything to the side and inside of the features folder we have this counter folder which we can go ahead and delete and in the store.js file we can delete all the import and all these reducers so we can let's take a look at how the application is looking like so super white that's good and going back to the app.js file let's just add a new uh h1 which is going to be i don't know say clever programmer in here and if it shows up at the corner we are good to go so right now let's go ahead and continue uh with the to-do app all right so let's take a look at how we will build this whole thing so obviously on top we will have the to-do list so that's pretty good and below that we want to have some sort of input box so that way we can add new and new items now i also want to add a done or some sort of check check mark thing and that way we can keep track of what kind of to do do we have for the rest of the day all right so let's go ahead and build first the input part because afterwards then we will be uh able to work easier with the to-do list so let's go ahead and open up a new folder in here which we will call components all right so in here you want to go ahead and create an input.js as well as a input.css file so that will be our full input screen so i'm just gonna make this uh window look nice and if i type in here rafce that will go ahead and create a full working react component so if you don't know what this magic is go to the extensions of your vs code type in es7 and then this will this is the one extension that you want to actually go ahead and download all right so with that uh we can now go ahead and add a class name over here which is going to be input right and now we're going to make it uh so it looks capital because somebody because for some reason uh because for some reason it didn't uh make it didn't capitalize it but all good and before we actually forget let's import the input.css file like i said in put css moving on uh let's just create the full uh html structure of this file so we're gonna have obviously an input for uh in here simple input box and below that we want to obviously have a button so the button is what we're going to press once we are finished once we're done typing and that will actually fire off a function that will add the actual to do to the list okay so that's that's function so we're just going to add a [Music] let's actually call it add and it will a it will fire off the function of so on click so this is when we want to fire up that very function so we're just going to call it add to do and going up here let's go ahead and define that so and you do okay and right now the application is going to freak out because it doesn't know what to do when we do this so we pretty much want to keep a track of what's happening in the input box right so we will need to have a piece of state for that so for that we are going to use the use state library of react so what that does is it's pretty much the variable variables of react all right so let's just type in const and we're going to say input input and set input and that will be a used state with an initial value of nothing now you might be confused what's going on here if you are it's completely fine just know that we have a few other videos where we explain what is going on here but this is not uh this is this video is about redux so i'm not gonna dive deep into it make sure to check out profit with javascript down below in the description we go in depth in all these kind of stuff so with that said let's move on and just to actually connect that piece of state with the input box we want to say a value is going to equal to input and once we start typing that will fire off an unchanged function so then what we want to do is say that's going to be that's going to have an event okay and we want to set the input that uh inside the input whatever that to whatever that event is okay so that even actually has a target value which is pretty much the actual button that we pressed the value of that that wasn't so if i press this button over here this will go ahead and mean g all right so that's pretty much it now we actually saved it a piece of state all right next up what we will do actually let's go ahead and check it out first like how it actually looks like okay it doesn't look like nothing because we haven't imported it so we will go ahead and import input and there we have it so i actually used auto import which is a built-in feature of vs code but if it for some reason doesn't work for you you want to go ahead and type in this line of code so that will import this here we have this functional working add button and the input box i'm just zooming in for a little yeah pretty crappy but we're going to make it look beautiful all right next up uh let's do a little bit of styling because right now this application kind of lacks of styling so what you want to do is open up that css and target app right away which will have a height of 100 view height as well as a width of i said as well as a width of 100 view width with the background color it's going to be some sort of grayish i'm i tried to make it as minimal as possible so it's not going to be the most designed application but what you want is a 168 173 and a 182 that will pretty much go ahead and give us this grayish something that's pretty much it for now all right going back to the css file we've got a few different other stuff to do okay so what you want is because we want the whole thing to be in the center we're going to use display grid this time and we want to go display grid and we're going to place the items so we're going to place items to the center and that will center the whole application we have this input box in here which is good but but we also want to make the input box look nice all right so in here in the input.css file okay you want to go ahead target input right away that will go and grab this like pretty much everything in here and you want to give it a height of a 50 pixels width of 80 percent which will actually make sense later on but just go with the flow for now and we're gonna give it a border radius of 12 pixels and the background color of white all right so background color white yeah that's it and we're going to go with display flex and we are going to justify all the content to the center and uh align everything to the center that basically centers all the items all the child items in the center both vertically and horizontally so that's good once we're good with that now notice i'm going to type in input once again but this time around it's actually more of a pinkish color instead of the purple one so in here we actually target this class but this time we target the html tag input okay so that's a huge difference and what we want to say is going to be background so background is going to be none we want to remove everything because it looks ugly actually let's take a look at how it looks like so right now it looks like this now i order i've already removed the background but we have a few different stuff else to remove we have a border which we want to get rid of so that's going to be none again and we're going to give it a margin of left and that's going to be 12 pixels once again and we want this to be like stretch out as fast as far as it can and then just go ahead and take up all the space it can so we will say flex one and that will pretty much snap the button to the right hand side yeah just like that bank so now it's pretty crazy how it looks like but it will all come together now obviously this ugly blue thing when i uh go in here is ridiculous and we want to get rid of that and we can do that by targeting it and then adding a focus so that actually means once it is focused so once you actually click in there that this uh type this line of code is going to only apply at that time so we want to say outline and it's going to be none so now it's so much more batten better so much nicer we can still type in here if i actually select it and it doesn't look that ugly all right last but not least is going to be the button and that will have a margin right of 8 pixels a background color of rgb 214 to 13. and another 213 so that will be some sort of a more more of a light lighter gray and there is a typo so it doesn't work but we also we are also going to remove all the borders it had before and at a border radius of 8 10 pixels a height of 30 pixels and the width of 50 pixels so that's pretty much how it will look like it looks so much nicer and you can actually tell the bar that it's not the same color as the background not the same color as the input box so this is getting together all right so that was it for the input uh let's go ahead and continue by actually saving um all this stuff all the to do to to redux and that way we will have global variables and this is where things are going to get crazy all right time to actually save all the to-do's that we type in so for that that's where we're going to use redux now when we actually fire this project up inside of features we had something called the founder the counter and that was pretty much the whole redux slice that we had in here but we deleted that so we're just going to go ahead and create a to do slice in here and that will contain everything uh in connection with the redux now if you haven't already i'm showing you once again go to extensions open uh search for es7 search for this very specific snippet snippet tool because this is going to save your life plus it is going to be a lot so if so if you haven't done that uh pause this video right now i don't usually say it so right now do pause it otherwise don't pause it ever at all also smash that like button and pause this install that and then come back all right so uh right now you should have that extensions otherwise you're going to get lost so uh going in here you just want to type in rx slice and that will pretty much create a redux slice for you inside of the redux toolkit now what you want here to do is because we named it two slides that's amazing now we want to give it a name and that's going to be uh to do's yeah over here now notice that we need to define the initial state out uh over here we can actually place it inside of here too but it doesn't make any sense like it's so much easier to handle them outside and what we can do is uh you want to go ahead and like this is where you actually started defining all those global states so you want to go and type in to-do list and that the initial state is going to be like it is a complete empty array we're just not gonna uh mess around with that now as for adding a to-do uh you will need to define something called something called a reducer this is where this is kind of like a symbol function that will just make sure that everything is saved and locked all in place so you just want to have a save to do function in here which will have state and action as their inputs and this is going to be the uh safe to do function now what is happening here so state is actually the current state of the safe to do action is uh something that when you shoot in redux that's what uh that's this is the function that is actually getting uh executed and this will have a payload uh which is going to be carried in here so i will actually uh make sure that you guys understand it just let's first create this so what we want to do is say say state dot to-do list the push oh that push and we want to throw in the action dot payload all right what's happening here okay so i will create a i will just comment here a normal state okay so say we got the to-do list all right so you do list and set to do list and this is going to be a used state and it will have an initial value of an empty array okay so this part right if you already understand uh states this will not be hard so this part over here is going to be this part exactly we just outsource it to a different kind of function over here okay it's pattern recognition uh this is how it looks like so to-do list is actually the state the current state of this specific uh this specific state okay now because redux is able to manage several states we actually need to like that has a current state of all those states that it actually manages inside of it so we will need to go into state and go into to-do list right so i will go slate go to-do list and then you want to push in the action.payload so what is this thing actually this whole thing this is the set to-do list all right so how to use a set to-do list it's basically set a new uh list and then you throw something in there now this is going to be the action payload okay all right now that we covered this uh make sure to actually play it back a few times and just try to understand what's happening here because this is going to be a lifesaver and with that you want to go ahead and export it because this is going to be a an action and you just want to uh add the save to do in here and that will that is it so far all right going back to input.js we need to import a few different things so first thing first we want to import uh use dispatch uh from the react redux uh library that's going to be the tool that we use to interact with redux so remember redux is actually layer around the application that is accessible for all the components so that but it actually needs a tool which which is use dispatch to actually interact with it so right after defining this piece of state you want to go ahead and i think if you just type and use dispatch and go with this one and then delete function this is what we need now we define it it's good and after that uh in here we exported a safe to do but now we want to import that so save to do and we want to import it from uh it's actually going to be in the features oops in the v come on so it's actually going to be in the features folder and inside of the to-do slides all right and to actually make sure that it actually it works and everything is working i'm just going to fire up a chrome real quick and we'll show you how it works but first we need to define the function that is actually going to shoot into redux so in here i'm just going to type in console.log and i just wanna i just wanna say adding to do we're adding actually the input so just make sure that we know what is happening and what we are actually uh throwing in redux so once that's done uh we went and that's when we want to save a uh full that's what we wanted to save that to do so we want to use the dispatch to actually interact with the redux and then i'm going to go ahead and save the to do but we're actually going to throw in a full uh object so what we want is we want to have an item that is going to be the input that we just typed in in the form and it will have a done indicator uh which is going to be false obviously because we haven't checked it as done and we want to give it an id so once we uh interact with the done check mark we actually know which one to actually mark uh done so it will say we're just going to give it an id and i think the easiest one is to say date dot now that is going to be unique time always passes so that's pretty much it and one more thing we need to store this whole uh we need to store this specific state in the store.js file so that way actually redux keeps track of what is going on and that will have another reducer okay so what we do here is we're gonna say import and we're gonna go ahead and say to do reducer and that will be imported from from the features and the 2d slice okay now this time we actually do export default here so it's all good and what we want is we want to say to-do's is going to be the reducer we just imported so that's good and let's take a look at what we have just built and if i go in and type in hey and go ahead add it now you can see the difference is this and we can see the new uh state we can see it is a chart which is pretty crazy but i don't even know what's going on we have to we can see the raw as well as the action and this is the payload we threw in so that's pretty much how you uh through uh shoot into redux and set a new piece of state all right next up it's time to actually go ahead and render out all the stuff that we've just saved into redux so for that we're gonna go into app.js and this is where we're gonna take care of the to-do list part now in here i want to actually create two divs which will wrap up the whole to-do list of so one is going to be app container and this will actually uh include the input as well not unlike the other one which is going to be app to do container and inside of there that is where we will loop through the saved stuff so whatever is in the slice whatever is stored in the slice that's what we're going to be looping through and then that is what will be rendered out all right so uh just for that purpose i i want to actually create just a dummy um dummy to do so i'm just going to do this and it will equal to a few different stuff all right so let's go in here and i'm just going to grab the stuff bang bam and oops actually i forgot that it's an object so we will take care of that now okay and whatever this is like okay it's just going to be to do dope and might even this is going to be some sort of number so i'm just going to pass that in and we want to have a true and a false just for later purposes boom go in here it's going to be true and yep so it's going to be to do two dope and bang whatever so over here what we see this is just a symbol array but if we take a look at what we dispatch into redux this is pretty much the exact same um structure so for this is going to be perfect for development purposes and what i will do is i'm just gonna loop that through with a dot map and in here i'm gonna have an item bank and instead of that kind i'm just gonna go with the normal brackets and in here i will have a component okay so that's going to be to do component dope so let's actually build that let's actually go ahead and build the two item and first thing first uh just to cancel out this error let's just quickly uh build the component so it's going to be due to item dot js yep exactly and we're gonna just say rafce boom and the class name just give it quickly it's going to be to do item that's it and i'm just going to pull it on the side so i can quickly import it real fast so i want to do item all right okay uh with that before we actually forget uh we want to have a to-do item that css file just as well we can leave it over there and let's quickly import it right away so it's going to be to do item.css okay and let's just think about it for a second so what we actually want is that this specific item displays the uh whatever we have to do whatever uh the specific item on our list if it is done or not and then based on uh that's that uh and if and if we go ahead and click that uh that we want to take this off we need to know the specific items id so we need to pass in all the different props that we have inside of redux so we're just going to go ahead and we want to give it a name which is going to be item dot item which is pretty weird but it does work and we also want to throw in i'm just going to do a little bit of line breaking here we also want to throw in uh done which is item dot done okay done right there boom and we also want to throw in the id which is going to be item id this name actually sounds a little bit weird but it is what it is all right uh next up uh here we actually want to catch e everything every single one of those that we actually throw in so we just wanna have a name a done and an id in there and now the fun begins so in here what we actually want to do is obviously have the check box but that's going to be just a little bit later so let's just have the check box over here and we also want to write the name right over here so that is actually going to be ap tag which will contain which will be just simply the name so it's not going to be something crazy that is happening but let's take a look at how it's going there is some sort of error okay and okay so it actually does work there might be some sort of issues with the with the styling but we will take care each and every single one of those so don't worry about that for now um for now let's get the functionality right and then we will figure out everything else so yeah it does work uh everything is in place so yeah let's go back this actually does work so yeah and what we want to do is add a specific class name based on whether it is done or not okay so in here what we want to do is done and if it is done then we want to add a to-do item and in the bam naming convention there is two different ways we can go about it uh so let's go to getpam.com so if you go ahead and go over here uh there is the the uh block so the so our normal block is just simply uh by its name then uh the element has this uh some sort of on the uh so so this is how elements are and with dashes we can add these uh sort of modifiers okay so that's pretty much what we will do uh over here as well so we want to have the to-do item and then we're just gonna say done over here so that we'll modify it and that will uh just do a strikethrough of the name okay we will set that up later on in the css part okay so we actually have the name done and now it's actually time to go ahead and install material ui and take a look at the checkbox stuff so let's go in here go back to the terminal and just type in yarn add and at material dash ui core boom and while that does its thing uh we can just take a look at material ui and we want to have a checkbox thing so let's just search for that buying react checkbox and this is exactly what we are looking for so this is all the documentation and all that kind of stuff i'm not gonna spend too much time on it um what you actually want here is this uh so i'm just gonna add a few space over spaces over here so you obviously want to import it from the material ui core and then for a checked right so that is going to be responsible to know whether it the item is checked or not the color you want to set it to primary because that's going to be this bluish thing and you want to fire off a function right so once you click on it you want to fire off a function which which i called handle check and this is just for seo purposes and for material ui to work so let's just create that function that we will fire off but let's not do anything in there so we will have handle check boom i actually messed something up in there yeah right okay now it's better so that's uh so we got the function already so that's good let's take a look at what we have over here and yeah just like that nothing is happening but we know that this one was actually marked as true this one was actually marked as false so we're we're getting there so let's fix that styling and then let's go ahead uh style the studio item and then we will hook up redux and do all the rest of the stuff so i'll catch you guys soon all right let's go ahead and do the styling part real quick so first thing first what we will do is let's just go into app.css and fix this weird looking stuff over here so in here uh we have two more stuff to do so we have the app we have the app uh cont oh we have the app container container boom and then we like it has a height of 700 pixels a width of 500 pixels with the semicolon we obviously have a display display of flux display flux and we will set the flex direction to column and align all the items to center and we will have a weird uh background color i was just moving around on the rgb scale so we'll have a two three two then a two three four ouch not that much yeah and the two three seven so that's that's kind of like a white-ish gray-ish something it's between white and light gray it's just so we have like this stuff all right and to actually make it look not that weird we want to add a border radius of 12 pixels and a padding 32 pixels and zero so what this will do is it will push stuff from above and below 30 pixels but will not mess on the sides okay exactly that even if we go into inspect element and we just put it on the side we can see that uh on the top and the bottom there is that green uh green line that indicates the whole um padding all right so next up we have the to-do container [Music] to do container which is yeah this thing you can go and copy-paste boom so much faster and this will actually have a flux of one so we want the input to be all the way down and have the to-do list take up as much space as possible okay and we also want to have uh give it a width of a hundred percent and then display flux give it a semicolon flex direction of column and align items to center all right time to design time to give some style to the to-do item all right it's time to desi uh give the to-do item some sort of nice looking style because we have almost the whole thing ready we're not going to go too much into detail with this one but the way it looks it's just super unpleasant so what we want to do is go into to do item that css and then just target the whole thing remember this is not about creating the ultimate video app it's about understanding how to interact with redux so to the item we're going to have a display of flux and we are going to align the items to the center with a width of an 80 per percent and the background color of white we're also going to give it a margin 6 on the vertical axis six pixels on the vertical axis and four pixels on the horizontal axis okay so it's going to be six and six uh above and below and then four uh right and on the left but it's super easy to do things like that okay it's going to have a height i said height of 40 pixels and then a border radius of 12 pixels so that way it actually matches the form factor of this app right so that's pretty much all the design we will have just to give it just to make sure that the checkbox doesn't go wrong let's just set the uh p tag to ha use all the space it actually can so give it a flex of one and then we want to set this track through up so to do item and remember the modifier so then it's good so if that flag is active we want to add a text decoration of line through and that will just yeah that will pretty much go ahead and just drag through the done to do so that's pretty much the design and the styling on the to-do application so now it is time we actually connect uh it with redux over here and then we had the to-do function and we are pretty much done all right so let's talk a little bit about um what is actually going to happen when we shoot again into redux into the data layer and we actually want to grab something out of it so for that we actually need to go into the 2d slice once again and we will need to export the current state of that specific state okay so uh for that we're just going to say export const const select to do list this is how we will call it and then it will equal to state and it will fire up a function right so it's gonna be the state to do's and we want to uh grab this specific one okay so what is happening here at that point uh we will reach into all the states grab the two use one so this one right so this slice and then pick out this specific uh state and then just return that okay i hope this kind of makes sense it's all pattern recognition watch this video a few times try to make it try to understand it uh we i will be using this a lot uh in the near future i will actually build a few clones with this just just like adding redux onto it just so you guys are exposed to it and yep that's pretty much what we do in here and then we go back to app.js remove all this stuff and then we will import two things one is going to be so let's import the use selector which is um use selector from uh and this is going to be the tool uh it's like this patch but this patch is actually pushing something and it's executing something over there on redux but this one use selector is actually grabbing it data okay so that's what is happening over there and then we obviously want to uh get the select uh select to do a list from the user slice so fro from the uh to do slice okay so what we want to do is uh not even that up so we want to go into features and then to the slides that's pretty much what we need to import and over here we definitely need to make this specific variable so it's just going to be const boom and then equals use selector and we're just going to select the to-do list notice how i gave the names what what kind of naming convention did i use um so obviously this should be just how you would name the variable but then over here it has to like it is highly advised that you give either a set or a save or something that is actually referring to what is happening over there okay so you nee you might want to just go with some sort of descriptive uh descriptive naming but make sure that it's actually an action and when you export you always want to go with select because that way you know that okay you select so you need to use selector and it's just connect all right so let's take a look at what's happening over here okay so to-do list not defined bug we don't care about it just yet all right so do-do bomb i don't even uh let's say take the dog for a walk add boom there it is bye grow serious bam there we go now right now checking it off doesn't work just yet but this is what we are going to be doing next up all right last but not least um we want to actually create a handle check function that will take care of all the checking and all that stuff so if we actually go ahead and do check the button or do check to do if you actually do check the to do then it actually goes ahead and changes from unchecked to checked right because over here nothing happens and if we actually decide that okay it's actually not done and we want to uncheck it right so let's do it let's go ahead and do that so over here uh this is going to be the function that we will dispatch into redux okay so that's going to to do slice okay and we're going to actually have a another uh reducer okay so reducer is essentially a function that we run that we run through redux okay so what we want to do is it's going to be set check and again it's something super descriptive um it is super descriptive so i know that it is setting the item either checked or unchecked but it definitely sets the check okay and in here and here we are just going to map through on the to-do list and we actually first want to identify like which one which item are we actually talking about okay so we're just going to say state dot to-do list map right and that will actually give back an item and we will decide if it is ours or not so you're just going to go if and then action dot payload we're just going to go ahead and say action the payload and if it actually equals to item the id then we actually want to check if it is then we actually want to go ahead and do the checking or the unchecking right so in here we're going to have another if statement and we're going to check if and we're going to see if the item dot done is equal to true so if the if that to do is done or not so if it is then we want to uh set that to false right because then because then that item is done but we actually decided that it's not done yet so we want to uncheck it okay so i uh item that done and that's going to equal to false on the other hand if it is actually not done then we actually want to mark it as done and it's going to be true bum and we should be good to go all right let's take a look at if it works or not let's go ahead and refresh okay take the dog for a walk boom okay so the reason it doesn't work is because i made the reducer but i haven't exported it okay so i want to go ahead and say set check and then go back to judo item and then import all the important stuff i forgot have the stuff okay so we want to have a use dispatch over here this patch oh come on dispatch and we want to import it from react redux i said react reader import use this patch from react redux yes that's it i don't know what didn't work last time but okay and then we also want to import uh set check and we want to import it from actually a level above and it's going to be in features to do slice okay so once we handle the check so once we click that we actually want to dispatch in there but we actually need to this uh okay so let's quickly go ahead and define this uh dispatch function and leave that empty so once we actually go ahead and click that uh check button then that's when we want to go ahead and just dispatch oh dispatch and then set check and then we just want to give the id in as a uh as the payload of that specific action so this now should be able to take care of checking or unchecking items so let's go ahead and take the dog for a walk add and that my friends this is how it is done we can go ahead and actually add a new one uh by grow rosaria's boom we can uh we need to do the laundry do the long tree yeah add that too and then i just want to check that off or maybe all of them or then i decide i need to get another stuff or i haven't done the laundry or i might as well just go with the dog for another walk okay let's take a look at what actually happens over here so take the dog for a walk in google chrome as well all right so over here we save the to do bom it actually happens in there boom we throw it in okay we check it okay set check payload we just throw in the uh the uh that date okay the id look it look at here boom and it's set set true boom that's it simple as that all right that was it for today's video i hope you guys liked it if so make sure to smash that like button down below literally give that a punch and if you want to dive deeper in these sort of stuff make sure to go ahead and check out profit with javascript down below in the description this is your go-to one-stop shop course to landing jobs as a developer and making a ton of money so if you like cash literally go ahead and check it out also let me know if there is something else that you want me to build for you guys um i actually got a few different requests so it might take quite a while but i will personally reply to each and every single one of you for the next few hours after this video is being dropped and just message me over here this is going to be my instagram handle uh message me whatever you want or just comment down below what you think how you like this one and with that said if you guys actually watch the whole thing drop a snail emoji in the comments just for fun just so i know like who actually watches the whole stuff and then yep that was it for today checking out peace

Channel: Clever Programmer

Views: 40,448

Rating: 4.7960339 out of 5

Keywords: cleverprogrammer, programming, developer, javascript, web development, coding, programmer, software developer, software development, react js, tutorial, redux, redux tutorial, redux tutorial for beginners, todo list, software engineering, Software engineer, javascript tutorial, web development tutorial, web development course, redux course, redux react

Id: tBigGpLRMtU

Length: 56min 45sec (3405 seconds)

Published: Tue Feb 02 2021