Learn The MERN Stack

Learn The MERN Stack [7] – Connecting The Backend

alright guys so now that Redux is is all set up we have a reducer we have our action functions we're going to now implement the backend by making requests

to it from our front-end and we do that within the actions so there's a there's a few things we need to change one thing is in the reducer in the item reducer we want to completely get rid of this

because this is just static data that we've been dealing with so we want to we want to keep the items array but we want it to be empty okay because it shouldn't we shouldn't have static data inside of

here another thing I want to do is add to our state a loading value which will be a boolean and it'll be false by default now the reason for this is because when we fetch data it could take

us a couple milliseconds to get and this will be set to false but once we start to get the data once we make that request we want this set to true and then when we get the data back we want

it set back to false now we're gonna have one more type called items loading so I'm gonna bring that in here items underscore loading okay and we're gonna have to create that in our type so

let's go to actions types and just go ahead and add that in here so we'll say items underscore loading and right here items loading and save that close it up okay so we have this items loading and

then down here we're gonna add it as a case so we'll go let's see just go right here I'll say case items underscore loading and then all this is gonna do is change the loading from false to true so

let's say return we want the initial state three dots initial state and then change loading to true okay that's all at this this is this case is gonna do so I'm going to

save this and then we're going to go into our actions okay our items actions and I just want to add another function in here called set items loading which is just going to dispatch that items

loading which we have to bring in here as well so items loading and we're gonna say let's see it's do export Const set items loading no parameters and all its gonna do is return the type of items

loading okay which ultimately just sets it from false to true so now we want to do is let's let's work on fetching the item in this case so this get items now the way that we have to set this up is

now different that we're gonna make a request and we're going to use Axios for this so we have to actually install that so I'm gonna just open up another terminal here make sure you're in the

client side very important so you want to see the into client if you're not already in there and then you'll just want to npm install Axios and Axios most you probably know

what it is it's just an HTTP client it's very very easy to use you could use the fetch API if you wanted to but I'm gonna go ahead and import Axios so we can use it so I want to do

from Axios and then what we want to do is in get items we need to add in right here we need to add in dispatch and this is where thunk comes in it allows us to do this so that we can make an

asynchronous request we actually want to add another arrow here and I know this looks a little weird but in order for us to use this dispatcher we have to do this so before actually I'm just going

to completely get rid of this we're still gonna we're going to use dispatch to send the type along with the data that's that we get from our request but I'm gonna delete that for now and we

want to call the set items loading and we can do that by calling dispatch and then we can call any of these actions and we want to call this right here set items loading because we want the

loading to be set to true for now make sure you put some parentheses in there then we want to make our request so we're gonna say Axios we're gonna make a get request so I'm gonna go on to the

next line and do dot get and then we want to make our request to slash API slash items which is our back-end remember we added that proxy in the package jason and react that's made it

so that we can just do this instead of having to do HTTP localhost 5,000 and so on it knows what we're talking about when we do this and then that's gonna return a promise so we'll do dot then

and then that'll give us a response or a result and then we want to set that to we're gonna return dispatch and inside this dispatch I'm actually gonna put that on the next line like that of yeah

let's do that so inside this dispatch we're gonna pass in some curly braces and this is where we want to send our type which will still be get items just like it was

before and then we also want to send the payload which is going to be the response dot data okay so this is going to be the data that comes in from the backend when we hit this endpoint and

just to remind you because it's been a while if we look at our back-end and we go to routes API items we're hitting this whereas it's this endpoint right here this is API items and it's just

gonna grab them from the database and it's going to return them in JSON format okay so that's what we're doing here is we're making that request to that endpoint getting the data sending it as

a payload to the dispatcher so let's save this and then let's go to the district you're saying dispatcher the reducer and we'll go to get items and in

addition to just returning the state the current state we want to also add the new item I'm sorry not add the new item but get the items because right now items is

blank so what we're doing here is we're basically making a copy of the current state and we're adding these new items which come from the action dot payload okay and then we also want to make sure

we set loading back to false because before we made the request we called set items loading which makes a request to the reducer with items loading as the type which sets loading to true so it's

set to true where we make the request after we make the request and we get the items back and we get that payload which I spelled wrong we also we want to set loading back to false okay and you could

use this to actually add a little spinner or something if you wanted to but we're not going to get into that we do do that in the udemy course but this should work so let's save this and let's

go back I think I'm forgetting something oh no I'm not so there we go milk because milk is actually the only the only item in our API and we can check that by going

to localhost 5,000 API items and you can see we just have milk all right so we're able to now get items and it's coming from our API and you can see loading and if we look in the diff once we get the

items loading is set from true back to false all right cool now if I try to delete it will delete but if I reload it comes back because it's not actually deleting it from the server it's just

deleting it from the UI same thing if I were to add a new item you'll see it gets added but if I reload it goes away so we have to have to deal with that so let's go back to our actions and let's

see let's what should we do the add let's – let's do the delete item actually let's do the ad but we'll move it up I actually want this up here instead yeah

okay so for the add item we're gonna do the same thing we're going to add in the dispatcher here so dispatch and we're gonna let's we'll just get rid of this for now and we want to make our request

– it's gonna be a post request this time actually put it on the next line so let's say post and we want to make this to slash API slash items and then we want to pass along some data because

we're adding an item now this item comes in from here right it comes in from our item modal component when we call a the add item action we pass in an item and that's what we want to pass in here now

one issue we have is if we look at the item modal and we look at the submit okay so in the submit we have the new item we're actually setting the ID with UUID now remember what I said with

MongoDB it creates its own ID so we don't actually want to create an ID all we want is the name so we want to get rid of this this ID and just have the name and we can actually get rid of this

import as well since we're not using UUID anymore and that should now just be just the name and that gets passed in here so let's make sure we save that and go back to the actions and now this will

make a post request the item should just be the name it's going to return a promise and then inside here we're going to get a result a response and what we want to do is the same thing we did is

just set it to dispatch let's put this down here and then in the dispatch we just want to pass in some curly braces with the type of add item and then the payload will be the data so

payload will be res dot data now what is this data if we look in our back-end again if we look in our API items look in the post what it returns is that new item that we add ok so that's actually

what we're sending to the reducer is that new item so if we save this and go to our reducer and we look at add item there's really nothing else we need to do here because the payload is the new

item and it's going to get added it's also being added on the server so it'll get added to our database as well but we don't actually have to change anything here this should be able to stay the

same so let's try it out let's go back and let's let's reload just for good luck I don't have to but I'll do it anyway and then let's add an item we'll say eggs and let's click add item so it

gets added now let's refresh and it's still there and if we look at our API let's reload this URL here that look at the backend API items and there it is we are here it

is eggs it has the date and it has its own ID and take note that in MongoDB it's actually underscore ID not just ID so now we want to take care of the delete because just like before now if I

click delete it deletes both and we're having an issue here not only because we haven't made the delete request but if we look inside shopping list Jas we're still using right here where we map

through our items we're using ID but it should actually be underscore ID because now these items are coming from Mongo which has an undescribed e instead of ID so we want to change this to underscore

ID change this key to underscore ID and let's see when we click the delete button we want to change this to underscore ID and then that gets passed in here it's okay if we leave this this

could be anything but this the underscore ID is what's being passed in then we call our props delete item so let's go to our actions and go to delete item and we'll take care of this so from

here we want to make a request to this a this this endpoint API items and then the ID and what it'll do is it'll find it and then it'll remove it and it'll just send a response that says success

true which we could do something with if we wanted but we're not even going to bother with that and if there's an error it'll send a 404 error all right so let's go back to our actions and let's

handle this delete items so we want to add in our dispatch and then I'm just going to replace this with our delete request so we'll say Axios delete and then I'm gonna put some back ticks in

here because the endpoint that we want to hit is API slash items and we also want the ID variable so we need to put this syntax like that okay and then that will give us a promise so we'll say dot

then and the response we're going to map to our dispatch and inside dispatch we're gonna pass in some curly braces we're gonna add the type which is going to be delete item and then the payload

is just going to be the ID it's gonna be the ID that we want to delete so this will take care of deleting it from the server and then we're going to dispatch to the reducer let's make sure we save

this and if we look at our reducer it's we want the same thing to happen except there's one little change we need to make remember that Mongo has underscore ID so the

items are not going to have an ID field they now have an underscore ID so we want to change that to underscore ID and that should be the only thing we need to change so we'll save that and let's go

back and let's go ahead and try to delete one of these so we'll say eggs goes away it calls the delete item action if I reload it's still gone awesome so if we add something here

water its add a couple things eggs candy can't forget candy all right and if we delete eggs that goes away if I reload everything stays if we look at our end point here you can see we have candy

milk water good so everything is working this is now a full stack myrn application that also uses Redux also uses react strap and what's the other thing the react transitions alright so

hopefully you guys learned quite a bit in this little series as I said before this is a very simple application on the surface but a lot is going on under the hood so that I mean that's the point of

the whole series it's not to build this extravagant application because I mean we could build this app with anything and we could do much less work the point is that you know how everything works

together so in the next video what I want to do is just kind of I want to build everything out and I want to deploy to Heroku because right now sure we've built this full stack application

but we still just have it running on our dev server how do we actually get this online so that's what we're going to do in the next video

In this video we will finally connect to our backend routes within the Redux actions using axios and we will send the data down through the reducer into our ShoppingList component. We will also handle the post and delete requests.

Code:
https://github.com/bradtraversy/mern_shopping_list

MERN Stack Front To Back Udemy Course:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers