Learn React #14: Connect React to Express (useEffect and Redux Saga Examples)

hey everyone in today's video we're going to be creating an express server an api and we're going to be hitting that from our react front end using redux sagas and using the use effect hook now the beautiful thing about express is if you've been following our previous videos and you know how we've already set up the use effects to hit an api and the redux saga to hit up an api it's going to be super simple to integrate and even though it's so simple it gives us so much control because now we control the server and we control the data that is coming from the back end it will pave the way for future videos and more complex examples and if you find value in this video please consider leaving a comment liking or subscribing i can't tell you how much it means to me i read every single comment and it really helps get these videos out there for the youtube algorithm so let's jump straight into it if you do not remember our previous videos i've already set up an application here and that application is essentially just a redux saga application and if you don't know how to set that up you can watch my last video which will show you exactly how to set up redux saga and exactly how it works but essentially redux saga is just a framework that we can hook up with react and redux that allows you to hit an api and get data back from it in this case we have a very simple application all we are doing is we are hitting an api that gives us a user object and we are displaying the first name of that user object so and sorry if you can hear my dog in the background but essentially this api all the data that it is returning is the id of the user the first name of the user and the last name of the user now instead of hitting this api i want to hook it up to my own express api so let's go ahead and let's do that so i've made a new directory for my new project called express hello world and i'm just going to go ahead and mpm in it and you can pretty much just blaze through this since we're just making a very simple application and once i open that folder up after i'm done doing npm in it you'll see that it's pretty much just a folder with a package.json in there so the first thing we're going to want to do is open our terminal up and we're actually going to want to install express so we're going to type mpmi express and while that's installing let's go ahead and look through the express starter code now the beautiful thing about this is it's so short and i'm going to go ahead and copy that i'm going to create a new file called index.js because i specified that as the entry point in our mpm init and i'm just going to paste that in here and let me run through what each of these does so first of all we are importing the actual express library and then we're calling the default exports function that will actually create what is known as our app and this app variable is pretty much what we're going to run everything through in express it allows us to pretty much call any express function set up an endpoint or actually set up the listener on the port we want the next thing we do is we um declare a port so express also runs on 3000 by default i think so i'm going to change that to 8081. um now the next thing we have here is an app.get so what this is saying is we're going to allow a get request and that get request is path is just going to be slash which is pretty much just the default so it'll be when we run it localhost it'll be localhost 8081 and when we hit that it will return a response um that says hello world and you'll notice there's two variables here this is called rec and this is called res what they stand for is rec is pretty much the request object so when someone hits your express back end this request object will store anything that they might have hit it with whether it's headers whether it's parameters query parameters um anything like that and then the res object is the response object so that's how you would send data back that's how you would set for example a 200 status or a 400 status et cetera et cetera but this isn't uh exactly an express tutorial so i won't go too in depth in that the next thing we have is our listener so this is what actually starts running it and keeps our express server listening on that port and you can see when it runs all we do is we have a little callback function and we just console log it's listening at that port just so we know that it's running properly so we can go ahead and type npm run start and it will go ahead oh and we don't even have a start script so um we can go ahead and do start and we can just make that start string start script run nodeindex.js there we go and now if we run npm on start it will go ahead and run it so let's see what happens if we actually go to that endpoint so if i go to localhost 8081 and i click that we can see we get hello world popping up and that is because for the regular path we made it return hello world now i can change this to say hi youtube for example and that would work go ahead and refresh that oops oh you have to restart your application um it's not like react where they have hot reloading if you want to avoid that you can install a package called nodemon so i know mon and i'm gonna go ahead so while that's installing instead of doing node index.js i could do nodemon index.js and that'll just make it so that whenever i save it if the express server um if the express server is running whenever i save it it will restart it so if i come over here and refresh it'll say hi to youtube now if i change that to hi anthony you'll see it restarts the server if i come ahead and refresh it'll say hi anthony so just small quality of life things within react so now if i were to for example create a slash user endpoint and save that and let's say hi from the user endpoint if i come over here and in this url i append slash user you'll see i get high from the user endpoint now the data i'm trying to replace from this api is pretty much this blob of json so what i can do here is in the res.send i can go ahead and send all of that data in that map now if i come back here and refresh you'll see here it returns the exact json that i wanted to and this is exactly what i need now in my react application i can come back into that application right here let's uh minimize this for a sec and if you remember in our um sagas in the request saga we specified the url that we want to get the data from over here now instead of having the data at our my json server i can now point it directly to our reacts our express server by typing in the the url of our local host so i can just go ahead and copy this oops i meant we should definitely copy the back end endpoint so i'll go ahead and copy that and we can just go ahead and replace it right in here oops just like that and if we go ahead and restart that and come back to our react application and refresh it you can see we're now getting the data from here and to make sure that's happening what we can do is we can go to the networks tab and in the networks tab you can refresh the page and you can see all the requests that are coming out so we are making one network request and that's to uh the user endpoint of our localhost 81 and we can see the response and we can validate that we're actually getting the data from there and just as another check we can even go ahead and for example change the first name to something like alan and if we come back we refresh the page you'll see that now all of a sudden our request is failing now the reason it's failing and express is sort of finicky when you run it locally for this reason is something known as cores and cores is essentially sort of this web thing that has been around for a while i'm not going to go too in depth into what it is but essentially a very basic and maybe not that good explanation is that whenever you try to access resources or you know an endpoint from one domain to another there's something called cores which will automatically block it unless that domain is whitelisted and this is to prevent you know really weird sites and domains and people from different ips hitting your endpoint that you don't want them to and express has a pretty good um tutorial on how to essentially allow a specific origin to access your endpoints and we're going to go ahead and do that so the first thing we're going to do is mpmi cores and while that's installing let's walk through the code all you really do is you import cores you set up your cores options and then you do an app you um have your entire application use it doing app.use which will make it so that any endpoint in your backend express server will apply these cores rules to it so let's go ahead and try that in our application now that it should be installed first thing we're going to do is go ahead and import cores the second thing is we're going to create some course options now in these course options you can pretty much specify the origins that you want to allow so in our case we're going to allow localhost 3000 to hit it because that's where our react server is running on and that's where we want to hit now the next thing we're going to do is just have our app.use course which will make it so that all the endpoints use it and app.use is normally how you use middlewares in express and cores is um known as a middleware for express and we can go ahead and pass in the course option so now that we've got that ahead and saved let's try making that same request one more time we'll come in here whoops and i'll go ahead and refresh and it allows us to make the request so it's not blocking our domain anymore and that is pretty much it in terms of the redux saga implementation for using it now i know a lot of you guys um enjoy using um instead of redox saga if it's a very simple application you probably want to for example just use a use effect to hit it and this is going to look the same as when we used the use effect to hit an external api before but just to have it all in one place i'll also go ahead and add it here so instead of needing all this dispatch stuff and the use selector to get the user state because that is all connected to redux and redux saga what we can go ahead and do is just have our use effect and our use effect will actually import axios because it's making the api request in line and the url we're going to hit is going to be that same url that we saw before which is just localhost 8081 slash user so we can pop it in there and we're going to need a way to store this so what we can do is we can just have a user state variable so set user equals react.usestate and we're going to set it to undefined at the beginning and once it gets the data back all we're going to do is we're going to say set user with the um response data oops just like that so let's go ahead and see if that worked and if i refresh the page um i don't even have to but you can see that it's still making the apr request and it's still working so this is by far the simplest way to do it if you're making a very small scale application that maybe has one or two api calls you can definitely get away with just using use effect for your api request however if you're building something for a client or something that's very big scale and you're going to be making you know more than 5 10 different api response api requests and you're going to be storing the data in sort of complex ways you're definitely going to want to go and head and set up redux saga so you have something tangible um and a really nice structure to make all those api requests and store the data in a way that all the components have access to it but that is it for today's video if you found valiant of it please consider leaving a comment liking and subscribing it helps a ton with the youtube algorithm and i will see you guys in the next video i hope you're all staying safe take care

Channel: Anthony Sistilli

Views: 5,839

Keywords: React Material UI, React Material UI Tutorial, React MUI, MUI, React, Tutorial, Material UI, react express tutorial, react express app, react express project, react database api, redux saga, how to add redux saga to create react app, redux saga create react app, redux saga express, connect react to express, react hit express, react js expert, react js express mysql, reactjs express example, reactjs express server

Id: CLaYhEbzIMM

Length: 12min 35sec (755 seconds)

Published: Sat Dec 19 2020