Learn The MERN Stack

Learn The MERN Stack [6] – Finishing Redux

alright guys welcome to the next video of learn the myrn stack so I apologize if the last video was a little confusing if you've never used redux before it

probably was and I take some responsibility for that but a lot of it is just redux is very very difficult to explain to someone that has never used it before not so much the idea of it and

what in in how state management works in moving state from the component to you know a global store or whatever but just this the boilerplate set up how to create like the types and how to send

how to dispatch to the reducer it just gets very friggin confusing at least for me I don't know maybe maybe I explained it fine and you you completely understand it but it was really hard for

me to learn and it's even harder to try to explain but I think as we move along as you see me add more actions and more stuff to the reducer that it's gonna make a little more sense so that's at

least that's what I'm hoping so now the problem is we're listing this stuff it's coming from our global state or our application state but we can't delete because it's still looking for basically

the components state what it's looking for the stuff in the component same thing with add item if we try to add an item that's not going to work either because this dot state dot items is now

null it's no longer there we deleted it and moved it to redux so what we're gonna do now is go back to the shopping list component and by the way we no longer need the UUID here we can delete

that import we were just using that for the state that we had in the component but what we want to do I'm gonna work on the delete first so we're gonna have an action we'll go ahead and bring it in

even though we haven't created it yet but if we call delete item okay so we'll bring that in with get items and any action you bring in you're also going to want to put down here in this objects so

we want to say delete item and then that'll be accessible to us with this dot props dot delete item so before we go ahead and try to use that and anywhere

the component let's create it so we'll go to our item actions I'm gonna just copy this this export Const get items and we're going to change this to delete item okay now this is going to actually

take in an ID because it needs to know which item to delete and then the type is no longer going to be getting zitz going to be delete item now what we're doing here when we return is we're

returning to the reducer okay so we're gonna check for delete item just like we checked for our get items and this also needs to know the ID that we're gonna be deleting it needs to know which one so

what we have to do is send along send a payload along with this dispatch or with this return and it's gonna be that ID okay so it's the ID that gets passed in so we'll save this you can see my

parentheses disappeared because I'm using the prettier extension and when you have an arrow function that only has one parameter prettier why you don't need to have these parentheses if I had

more than one like if I had two like that and I save it's not going to get rid of them but since there's only one I don't need the parentheses and prettier gets rid of it that's all that happened

there so in my reducer what I want to do now is add a case for delete so case delete item and then what we want to do here is pretty much the same thing that we did within the component remember we

did the filter so we want to take we want to return return geez if I can spell no we want to return the state now we want everything that is currently in the state that's where the spread

operator comes in so we want to put our three dots and then the state and then we want to take the items and let's say state dot items and dot filter okay and so this is remember we did this inside

the actual component which I can show you right here so we're gonna do this same thing right except it's not in the component it's in the river and the reducer it's in Redux

so I'm gonna just copy I could just copy this whole line actually and then go to our reducer and just paste in that whole line now instead of all I need a comma here instead of this being just ID we

need to change this because it doesn't know what ID is now remember in our action we passed in a payload so this payload we can access with action dot payload just like we can get action dot

type in our reducer that's what we're checking action dot type so we want to check action if it's equal to action dot payload like that and that'll be the whatever ID is passed in so let's go

ahead and save this and then go back to our component and instead of doing what we've done here we want to we want to change this up so instead of you know what we're going to do is we're going to

create a separate function instead of doing it in here because this is kind of messy we're just going to set this to a function so on-click will equal this dot on delete click now this on delete click

it needs to take in the idea needs to know what ID to delete so the way that we can pass it in is by doing a bind we can say dot bind and the first parameter will be this the second one will be ID

so that way we can actually grab the ID which actually comes from here ok so let's go up here and create that method so on delete click and let's make that in arrow

okay and this andouille click takes in the ID and then all we want to do is call the delete item action this right here okay so remember we access it with this stop props dot delete item and then

we're simply gonna pass in the ID all right so we'll save that and just to reiterate when we click the delete button it's going to call on delete click it's gonna pass the ID in which

comes in right here and then we're gonna call the action delete item pass in the ID which is this here okay pass the ID in it's going to get sent to the reducer along with the payload and then in the

reducer we're going to do the same thing we did before with the filter except we're using action dot payload which should include the ID so let's try everything out hopefully we can delete

an item let me make sure there's no errors down here so you you ideas not defined you ID is not defined and we're probably getting that because when we add an item see how we're using a UID I

actually deleted it from the top what I'm gonna do here is completely get rid of this button this add item button we no longer need this we're gonna create a separate component for that anyways so

let's get rid of that okay so now we don't get that error and we won't see that button but that's fine for now so now let's try and delete milk and there it goes

and you can see over here in our Redux dev tools it called delete item and it deleted the item from the state you can see this diff tab is going to show us the difference once we deleted it this

was the difference it we no longer have this item if I delete candy that will go ahead call delete item again if I reload it's gonna come back because it's just static data inside of the reducer but

later on it'll actually come from our back and okay hopefully this is this is making sense so the next thing I want to do now we have we've handled the delete

is create our item modal component to add an item so under components let's create a new file and we'll call it item modal dot Jas okay so let's go ahead and import react and component and that's

gonna come from react and let's see what else we gonna do here let's let's import all the stuff that we need from react strap since we're building a modal we have quite a few things to bring in I'm

actually gonna grab them paste them in so that's from react strap alright and then since this is gonna be a this is actually called a container when you have and this this is just some more

terminology to confuse you guys that don't know Redux a container is basically a component that that is hooked to redux if you're using redux state inside of a react component it's

actually called a container and sometimes you'll see people put they'll have a folder called containers separate from the regular components and I don't do that if it's if if it's a component I

just put it in the component folder whether it's dealing with redux or not I don't know it's just too much friggin terminology so let's import connect because we're gonna be using

redux and remember connect comes from the react Redux package and does just that connects them together we're also going to have an add item action so we'll

import that even though we haven't created it yet but we will so we'll say add item that's gonna come from the actions so dot dot slash action slash item action

alright now we'll create our class called item modal and it needs to extends components and let's export default now remember we're using connect we're using Redux in this component and

we're using connect so that's what we export and then we put the actual component name here in the second parentheses so modal alright so let's say we want to we could copy from the

react strap website the modal stuff but I don't really want to do that basically it just like the navbar you know how we had the is open state we're gonna have a modal state value as well so let's do

let's see let's say state equals and we want to say modal and that's gonna be false so basically this represents if the modal is open or not so it's false by default and we're also

going to have a form that will have the item name so we also want to put that inside of our state okay just because we have application state and actually I'm sorry this should be

name doesn't mean that we shouldn't have any component state at all some things belong in the components some things belong in the application and the redux state in in the case where you have a

form you're always going to want that form input to have a piece of state in the component okay so we're gonna have a name input so we want that inside the component state alright now this we're

also gonna have a toggle just like we did with the nav bar so for the toggle we're gonna say this set state and it's gonna be we're gonna do the same thing here we're just gonna set the modal

value to whatever it's not so this dot state dot modal and that's it for the toggle now we're going to have a submit function but we'll skip that for now let's do the

render just so we can at least show the modal will show the button and then when we click that button it'll toggle the modal so in the render let's do our return before I forget that again and

we're going to put in a div okay so the why isn't Emmet working so inside this div we want to have a button and this is going to say this is actually going to have which we have this say add item and

this is gonna be the button that will open the modal so it's gonna take in a bunch of properties it can take in a color it'll say dark I'm gonna add a style to it just to move things down a

little bit so we'll just say margin bottom and set that to two REM and then I'm gonna do an on click and the on click is gonna call that toggle it's gonna toggle the modal so this dot

toggle okay and that should do it for the button let's see so under the button is where we want to put the actual modal so let's say oops okay so the modal is gonna take in a

couple things it's gonna take in is open and this is going to be set to whatever the modal state is so this dot state dot modal okay which will either be true or false and then we want toggle to be

equal to this dot toggle and that should do it for those properties now inside the modal we're gonna have a modal header and this is also gonna have a toggle and that'll be equal to this dot

toggle and just to show you real quick if you want to look at the documentation for react strap and you look at components and you look at modal you'll see this looks very familiar this is

basically the same thing you can see modal is open toggle the header also has toggle so this is where I got this code basically except we're not gonna have a footer and we're gonna have a form

inside the body but that's that's you can see this is correct what I'm doing even though it looks a little weird so modal header has this dot toggle and then let's close this up modal header

and then what do we want in the header let's just say add – I'll say add to shopping list okay and under the header we want the modal body now in the modal body we're gonna have a

form so we brought in a bunch of stuff for forms we brought in form form group label and input from react straps so we can use those so we want to first do a form

oops form and this is going to take in an on submit event handler and we're gonna set that to a method called this dot on submit and then inside the form we're gonna have a form group so I mean

if you guys know anything about bootstrap you know you just wrap you have a form group and then inside there you have an input and a label that's that's exactly what we're doing instead

of using divs we're using these tags instead of using divs with classes so form group then we'll have a label label takes in a four attribute will call item label let's say I eat them and then we

want our input so let's say input a slash and this is gonna take in a bunch of properties so this will take in type just like a regular input would which will be text it's gonna take in name

which is going to be name and this name should match whatever is in your state right here this name and then let's do an ID so ID will say item placeholder I'll say add

shopping item and then we also need an on change okay so with react when you have an input you want to set this to a function and it's usually called on change doesn't have to be this does but

that you can call this whatever you want we're going to call it on change and basically what happens is when we type inside this input this will fire off and then we want to then set the state of

name to whatever is typed in this input so let's go up here and add in on change and that's going to take in an event parameter and we're gonna say this dot set state and then what I could do is

just set name into the e target value because you can get whatever is typed in with a dot target dot value like that but what I like to do is I like to put in a set of parentheses and then what we

would do that anyways that's for the state but instead of just saying name I'm gonna say e dot target dot name which will be name because it refers to whatever this is whatever this value is

instead of hard-coding name I'm just getting it from the target that way if we had another input we could still use this we wouldn't have to create multiple on change functions just to deal with

you know another input so what we would want to do is set this to whatever the value is whatever's typed in which like I said we can get from a target dot value okay so that should work and let's

just save that and we haven't done this if they submit yet but I just want to make sure that this actually shows up so what we'll do is go into our app J s and inside our app j s we want to bring in

our item modal component so let's import item modal from components slash item modal and then we want to bring we want to put that in right down here let's see we have the

app nav bar the shopping list and yeah we'll put it right here a modal alright let's see what that looks like alright so that's what I thought would

happen I want to actually put these two components within the container because see how this is pushed up against the side so what I'll do is I'll bring in a container into our app j/s from react

strap and then we can simply wrap let's see let's wrap we don't want the net the navbar we want to wrap these two in the container there we go all right so let's go back

and can't resolve react strap that I spell it wrong yep okay so now that's pushed over now if I click add item there's our moto okay and I forgot the

button but you can see the modal is actually working so let's go back to item moto and let's finish it up with adding an actual button to it so we're gonna go under the input and let's put

in a button let's see I will end this button and let's just have it say add item and we just have to add some properties to this button so we're gonna add a color of dark I'm gonna add a

little margin to the top so I'm going to say style let's do two R M whoops and let's display it as a block so we can just simply say block and let's save alright so if we click add item there we

go now if I put something in here and add it's not it's not going to do anything because our on submit hasn't been created so that's what we want to do

because you can see the form it's going to call this dot on submit but we haven't actually created that function so let's add that now so we'll go right here and we'll say on submit and let's

set that to an arrow function that takes in an event now since it's a form we need to prevent the actual form from submitting how it would naturally so we do that with a dot prevent prevent

default like that okay and then what I'm going to do is I'm going to create a variable called new item now we're not dealing with the back end yet remember when we when we deal with the back end

MongoDB creates an ID on its own so it's not up to us to create it however and right now we're not dealing with Mongo yet or the back end so we have to create the ID so what I'm gonna do for now is

just bring back in or bring in UUID again okay but we won't need this once we implement the back end because the ID will be created automatically but for now we're gonna set the ID of this new

item to UUID like that and then the name is going to come from the state okay I remember the state when we type into the input and that updates this this right here this state name so once we have

this new item we then want to add we'll say add item via add item action ok so the way that we do that is this dot props dot add item and pass in new item okay and then the

last thing we want to do is actually close the modal and we can simply do that we can do that by simply saying this dot toggle okay I really like how the modal works with a react strap it's

really easy to just to open and shut and stuff like that rather than you know you would use jQuery with just regular bootstrap so I think that's good let's save this now it's going to call the add

item action okay we brought it in but we haven't actually created it yet so let's go to item actions and let's create the add item so what I'll do is copy this the delete item and change this to add

item okay now instead of an ID it's gonna take in the whole item okay which has the ID and the name and then the type that we want to dispatch to the reducer

is going to be add item and then the payload is gonna be the entire item this time okay the payload can be whatever you want in this case it's going to be the

item so then we go to our reducer and hopefully you're seeing the pattern here after we're adding all these so in the reducer we want to add a new case for add underscore item and what we want to

do here is return let's say return and we want the current state so we use the spread operator and the state variable and then we just do items just like we did back in the component we're gonna

say instead of you know item or whatever we're doing action dot payload this is the item the new item that comes in and we also want to add our spread operator state items and this will just simply

add it okay and we use a spread operator like this because we can't actually mutate the state we can't we can't directly change it we have to basically make a copy of it and that's what this

is doing it's kind of hard to explain so let's go back now and let's try it out so hopefully it works so we'll say add item and let's say we need some we don't have

water on here so we'll grab water add item this thought props add item is not a function let's see it should be did I save that and let's try let's go here add item from actions and we called this

right here this dot props dot add item did I Oh see down here we didn't we didn't take care of this we did the connect but we didn't add in the parameters that we want so what we're

going to do is we're gonna pass in here map state to props and then let's pass in here add item okay and then I'm gonna just bring in the item I'm going to map the item state to props for this module

as well or for them sorry module for this component so we'll say item state item just like we did in the other one all right so now it should work get water there we go and

you can see it gets added and it gets the little fade effect it also called the add item action over here and it should have got in if you look at the diff it adds that new item here which we

can't really read but you can see it as the ID and it's water if we look at the state it should be in there actually it's the first one water alright so I think that we're just about ready

for our back end okay so everything is in the Redux store and we're able to add to it we're able to get the items that are in the Redux store and we're able to delete them so now we want to start to

deal with the back end we want to be able to get this stuff from our database rather than just you know right here because all we're doing is getting this stuff we're adding to it in the UI but

it's not it's not persisting anywhere so now what we're going to do is in the actions file instead of just doing return and then a type or whatever we're going to make our requests here to the

back end and then dispatch to the to the item reducer all right so we'll start that in the next video

In this video we will get the React/Redux app working with hardcoded state in the Redux store. We will create the ItemModal component to ad an item. After this video we will be ready to connect to the backend routes and make this FULL STACK!