Full Stack React & Django [3] - Redux & HTTP

alright guys so in the last video we implemented react we installed web pack and Babel react react Dom all that stuff and we got it all working so that we're actually displaying our react application within the Django front-end app so now what I want to do is implement redux because we need a single source of truth we basically need application level state because we're going to have for instance leads we're going to have authentication which is the main reason I'm using redux so that we have a state where it can tell us if we're off entik ated or not can tell us what user is is logged in things like that give us the user data so I'm not going to get too in-depth with the inner workings of redux I would suggest watching either in my redux crash course or you know maybe my react front-to-back course on udemy or someone else's redux course if you if you know nothing about it at least maybe look at the documentation but I'll try to explain things as best I can without really getting hung up on it so one thing that I would highly recommend is installing the redux dev tools for Chrome so if you go here just go ahead and install it and then when you open your chrome tools you should have a tab for redux okay and you'll see no store found right now because I'm obviously I haven't installed it yet I haven't set up my store but once you do that you'll see a clear image of what your Redux store looks like in all your state alright so definitely I would definitely suggest installing that all right so let's head over to our terminal I stopped my web pack from running here and I'm just going to do an NPM install and we want redux we want react - redux because redux is completely separate from react it's just very popular to use with react and this react Redux package is what basically binds them together all right so we're going to want that let's see we're also going to want redux thunk so redux thunk is a piece of middleware that we're going to use so that we can make asynchronous requests from our actions and then we're also going to install the redux - dev tools - extension which it just makes it a little easier to set the eight the dev tools extension up rather than doing it manually so I think that's all we need for right now so let's go ahead and run that okay so now I'm going to run npm run dev again which it should start up webpack ok good let's just reload this make sure that's still working so first thing that I always do when I'm starting to implement redux I think the first thing most people do is create their store so in the source in the lead manager front-end source folder we're gonna create a file called store Jas ok and inside this store Jas we're gonna bring in a few things from redux actually I'm gonna do iymp tab and bring this in from redux we're gonna bring in a couple things so we want to put in our curly braces we're gonna bring in create store which is responsible for actually creating the store apply middleware since we're using thunk which is a piece of middleware we need to bring this in and I think that should be it alright so let's go ahead and also import actually let's do a MP tab and let's bring in redux - dev tools - extension and from that we want to bring in something called compose with dev tools and then let's see we want to import thunk okay any middleware that we use who want to bring that in and thunk is gonna come from Redux - thunk and we also want to bring in our route reducer okay I'll get into reducers in a minute but we want to bring in route reducer and that's gonna be from dot slash reducers so what this means is it's going to look for a file called index J s inside of a folder called reducers all right now our store is gonna have an initial state so say initial state which is just gonna be an empty object and then let's create another variable for any middleware we're going to use which is gonna be an array and we're just gonna have func okay then we want to create our store our store variable and set that to create store which we just brought in up above okay now this takes in a couple things it takes in your route reducer which will create in a minute it takes in the initial state which we just added up above and then any middleware we want now since we're using the dev tools extension we're going to use compose with dev tools and then inside here we're gonna put the apply middleware okay and the middle of where we want to apply is gonna be anything that's in here so we're gonna use the spread operator and just put in middleware like that all right and then just we just want to export as default store all right so we'll save that so that's our store now the way that we implement this is actually let's create our route reducer first just because it's theirs it's not there so in source I'm gonna create a folder called reducers and we're gonna create a file called index dot JSP file that that that this is pointing to and the route reducer is basically just a meeting place for all of your other reducers so for instance we're going to have a leads reducer that that hands down the state that has to do with leads we're gonna have an author adduce or for authentication we're gonna have an errors reducer for bringing errors down to wherever whatever components we want to bring errors into so it's basically like a meeting place so let's bring in from redux we want to bring in something called combined reducers okay and then we want to export default combined reducers and then we simply pass in an object with any reducers that we have now we're gonna have a leads reducer but I'm not going to create that just yet I'm just gonna save this file as is and I'm gonna go to my main app component so components and then app dot J s and here we want to actually bring in we want to bring in a couple things we want to bring in our store we also want to bring in the provider for from react redux remember react Redux is the package that integrates the two together so let's first bring in let's say imports provider and we want to bring this in from react - Redux and then we also want to import our store from dot dot slash store all right now the way that we connect redux to react is through this provider now this provider we actually need to wrap around everything so we're gonna go right in this return int and we're gonna put in provider like this okay so we want to wrap this around everything all right we'll push that over now the provider actually takes in the store as a prop so we pass in store like that all right so let's save that alright now if I reload I'm just gonna open up my console here store does not have a valid reducer which is understandable we didn't create any reducer so that makes sense if we go to redux okay now you can see that it looks different it's not giving us an error that we don't have a store so this will show us all of our state okay we don't have anything any state right now but it'll show us our state it'll show us the diff so if you if you create an action like submit a form or something like that and you call an action and it changes your state it sends down different state it'll be in this diff okay and any action that you you commit or you create is gonna get shown here as well so this is I don't know I couldn't build with redux without this extension it's very important so let's go back to the reducer the route reducer which is or is it I'm lost so index J s and we're going to import let's see we're gonna have leads reducer we're gonna have an auth reducer stuff like that but we're not going to get into that till later right now we're just going to deal with leads actually we just want to do leads from dot slash leads okay and then any reducer you bring in needs to go in this object okay so we would say leads and then what we brought in is leads now since these are the same we can simply just do this sometimes you might see like lead reducer leads something like that but I just call the file leads so like that all right now let's go into reducers and create a file called lead CAS okay now a reducer is basically if it's a function that takes in an action with you basically evaluate an action and then you send down certain state depending on what that action does alright so for the leads we're gonna have for instance get leads add lead delete lead and the way that we define these is with something called types so I'm actually gonna say import and we're gonna bring in some types okay actually let's let's start let's do one at a time my first goal is to get the leads from the back end and display them here and the leads list component so let's start with get underscore leads and that's going to be from and we're gonna have a folder called actions so we'll go out of the reducers into actions and then a file called type CAS all right now we don't have this file so I'm gonna go ahead and create it so in source we're gonna create a folder called actions and inactions we're gonna create a file called types dot J yes now types are basically just constants okay so it's just a constant that holds a string so we have get leads so we're gonna do export Const get underscore leads and we're just going to set it to a string of get leads okay so it's just a place to hold all of our types so basically for organization so close that up now that we brought that in inside of our leads reducer let's create the initial State okay so we'll say cons initial state which is going to be an object and we're going to have a leads array okay and you can out you can put whatever you want inside of your state but we all we really need is just these leads okay because that's what we're fetching from our back-end and that's what we want to put into this state so down here we want to create a function we need to export it as default and this function is gonna take in two things so the first is the state so state and we're gonna set it set the default to initial state which we just defined and then it also is going to take an action okay because we're gonna have an leads action file where we fire off functions and we can dispatch an action to this to the reducer okay to get leads add a lead to lead and so on now we have to evaluate the type of the action type that's sent so we could use an if statement but common convention is to use a switch so we'll say switch and this action object we're going to check for a type okay and we're gonna create a case for oops case for get leads and then we need to decide what we want to return as state okay now I know we only have leads up here but let's say we had like something else maybe it was I don't know just some text or something we would also want to return that so we don't want to do just leads whatever we want to include anything else that's in the state so we do that by using the spread operator and then state okay so that'll include whatever else is in the state I'm just going to get rid of that now in addition to that we want to fill leads with the leads that are fetched from the server and I'm actually going to send those as a payload in this action okay so I'm going to set this to action dot payload and this might not make sense to you right now but when we create the actions and we dispatch to this file to this reducer it'll make a little more sense so let's do that and then we also need a default let's see we're gonna say default and the default is just going to simply return the state all right so we'll save that now we need an actions folder or we have an actions folder but we need a leads action file so in actions alongside types j/s let's create a file called leads dodge is alright and any actions that we want to fire off are going to go in here and this is actually where we make we're gonna make all of our HTTP requests I'm going to be using Axios but if you want to use the fetch API that's fine if you want to use something something else that's fine as well but in here let's let's install Axios first of all so I'm just going to stop this and do an NPM install Axios all right so let's see we're gonna import Axios from Axios and then I'm also going to import the import the get leads action or I should say type get leads and that's going to be from types which is in the same folder okay now we're gonna have a an action method here called get leads I'm just gonna put comments here this get leads and we want to export this so explorer const get leads and we're going to use an arrow function alright now since we're making we're making a asynchronous requests with Axios we're actually making a request to this right here this localhost:8080 api leads although we don't have to add this because we're on the same server that's another benefit about the way that we did react here but we're using something called dispatch and we could put another function in here and pass in dispatch but an easier way a cleaner way is just to add it right here so dispatch like that and that's what we want to use whenever we want to dispatch an action to our reducer ok such as get leads so within here let's make our request so we'll say Axios and we're gonna make a get request to slash API slash leads slash and then that's going to give us a promise back so we want to do dot then it'll give us a response all right now what we want to do is dispatch the get leads action to the reducer so we take dispatch and we just pass in an object with a type okay remember in our reducer we're evaluating the action type okay so we want to send a type of get lead so it fires this off right here so let's say type get leads and then remember this the payload is gonna be the leads that are returned from the server so I'm going to send a payload with the response data from the server all right and then we'll do a dot catch in case there's an error and eventually I want to have an a-hole errors reducer that sends arrows down to our components but for now I'm just gonna console.log okay so that's it let's save that it's gonna format a little bit just because I'm using prettier but yeah that that is our action now how do we actually call this okay and where do we call this we want to call it from our leads component so let's go into components leads and then leads Jas okay now in order to work with redux from any component you need to use something called connect okay that's part of the react Redux package so I'm gonna import from I'm going to import connect from react - Redux and then we're gonna have some properties whenever you have props in react do you want to use prop types so I'm also going to import prop types from prop types okay now we're also going to need to call that get leads right we need to the the the flow of this is we call get leads when the component mounts and the leads come down from the reducer into the component as a prop okay and actually before we get into that let's just import the get leads action so we want to import get leads from and we want to go up outside of the leads folder outside of the components folder into actions and we want the leads file alright now down here whenever we use connect we actually need to export default connect and then we need to wrap the component name like that alright now not only just trying to trying to think of how to explain this not only do we need to connect to it but we need to get the state and we need to be able to call this get leads method so I'm gonna go right above here and I'm going to create a function an arrow function called map state to props and this takes a parameter of state and then we want to just pass in here leads and set that and go state dot leads da leads now this might look confusing to you if you're new to redux but basically we're taking when we say map state we're saying the state of Redux basically the the state that you know where is it this right here so we want to map that state two props of this component so that we'll be able to say this dot props dot what leads okay now this we could call whatever we want leads make sense because that's what we're getting however this state dot leads this means we want the leads reducer okay and then this is the part of the state that we want which in the leads reducer is also called leads so it might look a little funny that it says state dot leads dot leads but what it means is the reducer okay this right here whatever this is would be that first that first leads if I call this lead reducer then in our component it would be lead reducer dot leads all right so we're mapping it to the props now that means we're gonna have a prop call lead so we need to add prop types so let's go up here and let's say static prop types and it's just an object and we'll say leads which is gonna be a I'm gonna say prop types and it's an array so we'll say array and it is required now this map state two props it's not actually doing anything just yet we need to pass it in to connect so after connect we want to open up a set of curly curly set of parentheses and we want to pass pass in map state two props like that alright so let's actually save this and with what we've done so far let's see what happens so if I reload okay so nothing obviously nothing changes in the UI but let's look at the state in the redux tools and you can see now we have this leads now the leads is it's empty you can see it's an empty array and you might be asking well you know we made the request here why why don't we have leads from Django and the reason for that is we created get leads but we haven't called it yet so let's go back to the leads component and just like we mapped the state that's coming down from the reducer to props we can also call these methods from props but we have to add a second parameter in here with an object with the method name so get leads alright so now we have access to this dot get lead I'm sorry this dot props dot get leads and where we want to call that is when the component loads right when the list loads or before it blows when it mounts we want to make that request or call that action so we're going to use component dead mount and we're gonna call this dot props dot get leads like that so let's save this and let's reload and now if we look down and leads you can see we have two items here we have John Doe and we have Sam Smith all right so we successfully have called an action made the request to our Django back-end got the leads and we put them in our state okay now they're not showing up here we have to do that within our render so let's actually use let's use a react fragment here so we'll bring in fragments and I'll use fragment so I want to have a table that has all of the leads inside so first of all let's put an h2 and we'll just say leads and then we'll have a table and let's give this table a class name of table and also table - stripe so just bootstrap classes and I'm gonna make this smaller I'll just close it for now all right so we have our table now we're gonna have a tea head and inside here we'll have a table row with some table headings so we want our ID ID we're also going to have the name email and message and then this last one here is just gonna be an empty th and that's going to be for the delete button so now let's look let's put the tea body and here's where we want to loop through the leads and we can access them with this dot props dot leads so I'm going to open up some curly braces here and let's go ahead and say this dot props dot leads and then we want to map through so we're going to do dot map for each one we'll call it lead and then we're going to render some JSX which is going to be that the table rows so let's say TR and for the key since this is a list it needs to have a unique key and I'm going to set that to the lead dot ID all right and then let's see inside here we want each column so the first is going to be the ID so again I'll do lead dot ID and we'll copy this down a couple times so have ID we have name email message and then we want a delete button so for now I'm just gonna put in a button and just say delete all right we'll give this a class name whoops give this a class name of BTN BTN - danger and BTN - SM to make it smaller okay we'll add that functionality later but I just want to get the leads on the screen so let's save that and now just make this smaller if I can do it and there we go so now we're actually pulling those leads from the server okay if I were to go to postman since I can't add them through the application yet I can add them through here though if I say like Jane Williams and we go ahead and send so that gets added to the server now if I go back to react and reload there's Jane now I think in this video we can we can add the delete functionality as well so let's do that now in order to do that we need to add a new action so let's see in addition to to get leads we want to do delete lead so same thing I can actually copy this whole thing because it's pretty similar so we'll call this delete lead okay now we're gonna need to know which one to delete so we'll put in an ID here we'll pass in an ID and we're gonna make a request to API slash lead slash and then the ID so I'm actually going to use backticks here so that I can go like this pass in an ID and we want a trailing slash as well all right so then once that happens once the lead gets deleted from the server we want to then dispatch an action called delete lead and we want to send the ID as the payload so I'm just going to pass ID now this delete Lee we haven't created a type for so let's go up here and bring in delete lead and let's go to our types file which is in the actions folder types and I'll just go ahead and copy this down say delete lead okay I'll save that all right and we'll just keep the console.log era for now so we'll save that now this delete lead is gonna getting dispatched to the reducer so let's go back to the leads reducer and let's add a case for that so we'll go right below the case of get leads actually let's bring in delete lead up here okay and then we're gonna do case delete lead and we want to return any current state and then for the leads basically we want to filter through and we want to only return the ones that are not the ID that were deleted so we can do that by saying state leads okay that accesses the leads in the state and then we're going to use filter which is a high order array method and we'll loop through and say for each lead we want to return anything where the lead dot ID are the current iteration the ID is not equal to the action dot payload because remember I sent the ID that we're deleting as a payload okay so that should delete it on the server and then run the reducer and then delete it within the UI so let's save that and we have to call this at some point right we want to call it when we click the button here so let's go back to our component and along with get leads we're going to bring in delete lead and we have to add it down here okay so now we should have access to this dot props dot delete lead now again we want to call this when the when the button gets clicked so let's go right here on this button and let's add let's say on click we want to call this dot props dot delete lead and we need to send the ID so we're gonna do a dot bind and when we do dot bind this is going to be the first / a man'd then we can send whatever we want let's send the lead dot ID alright so we'll save that and let's reload the page and you'll be able to see it here and you can see that the actions that run show right here when the page loads are when this component loads it shows that get leads action because that runs in order to get these leads now let's go ahead and click one of these and you can see that it disappears from the UI it calls the delete lead action and it shows us the diff which is this does this lead has been deleted okay and if we look at the state now it only has one or actually no it's yeah it well as two I'm sorry there were three all right and if we reload the page it's oh that didn't work oh wait a minute why didn't that work it worked on except for actually deleting it from the server and that's because is a get request so basically it got it from the server and then it dispatched delete lead and just deleted it from the UI so we just want to change this to delete Axios delete so hopefully that works let's try it again so we delete and we reload and it's gone good now I know this video is getting kind of long but we still have quite a bit to do and I don't want this to be too many videos I'd rather have less longer videos less videos but longer amounts of time so let's do the add lead form so I'm going to just close up some of this stuff that we don't need and let's see for the add lead let's start off with just creating the the actual form so we're gonna go into the components I'll close all of them up so we're gonna go into the form j/s component and of course we need to create a form so let's add a little bit of state because in react when we have a form we want each input to be part of the state of the component so I'm going to say state and we're gonna have name email and message oh you know what one thing I forgot to do in the leads component is add these methods are these functions as props and prop types so let me just do that real quick so we have get leads which is prop types dot func dot is required all right we'll just copy that down and we also have delete lead it still works without the prop types it's just good practice alright so back to the forum component we have our state now for the actual forum I'm just gonna paste this in because I don't want to waste too much time just writing out markup so let me just grab this real quick alright so I'm gonna just replace this div right here and I'll just go over it so basically we have a containing div with a card card-- body class margin top margin bottom h2 we have a form that has an event a non submit it's going to call this dot on submit and then we have each input that has a name it has an on change which we're going to create up above because when we when we type anything in the form it's gonna fire this on change off and we need to update the state because each input is connected to a piece of State alright and then we have that value which I actually have to pull out of the state so I'm gonna go up here and just say Const want name email and message from this dot state okay so that pulls those values oh we're using those here and then down here we just have a submit button so pretty simple now let's create the on change in the on submit so on change takes an event and let's just say this dot set state and we're gonna put in our state object and just use some brackets here so we can grab the name so e dot target dot name which is going to reflect whatever this is so this name is name this name is email and so on which should match the state and then we're gonna set that to the value so e dot target dot the value all right so that's our on change and then the on submit actually want passing that and we want to e dot prevent default and for now we'll just do a console log submit all right so let's save that see if this renders okay so there's our form good and we should be able to enter stuff in here oops it has to be an email submit and if we look at our console we get submit good ok so we need to call an action when we submit this so we're gonna have an action called add lead that's going to update the server so we're gonna make a post request to the server and then we want to dispatch an action to our reducer that's gonna then send the leads back down to this component so if you're new to redux you can see how this is helpful in sharing state right we update we add a lead here it should automatically reflect down here okay so let's see where should we start let's start with let's do the action so we'll go to our our actions folder and then leads j/s let's have another type called add lead and of course we need to add that to our types okay so bring that in and then let's create add lead I'm gonna copy this okay so we'll paste that in and then change the name to add lead and it's gonna take it's going to take in the lead as well okay then we're gonna dispatch you can call Axios or pass in dispatch call Axios make a post request okay so yeah we'll make a post request to API leads and then we need to pass in lead and let's say make dot then we're gonna dispatch add lead and then the payload again is going to be the data that comes back because when we when we add a lead to the server it gives us it back with the ID and all that stuff so we're gonna send that as the payload and I think that should be good so let's save that let's go to our reducer and let's add down here actually first of all it's bring in the type of add lead and then case and bloops soak a sad lead and we want to return any current state and then for leads we're going to use the spread here we're going to say state dot leads so any leads that are already there in addition we want to add the payload which is going to be the new lead alright so we'll save that now let's go to the add components because we need to call that action we need to call this add lead action right here so in components form J s we need to do all the stuff we did in the leads to to be able to link it to redux we need to bring in connect from react redux and let's also bring in prop types actually another trick you can do i MPT tab or enter and it'll actually just bring in prop types for you so let's see we also need to bring in our action slash leads okay and then down here we need to explore connect oops all right now with the leads component we had to do map state two props because we were taking we were bringing in state we're bringing in leads with this component we're simply calling the action we don't need to bring leads back in so what we can do is put in null for map state two props however we do need to add the method that we're going to call which is add lead all right so let's do that and then where we want to call this is obviously in the on submit now before we call it we need to basically construct the lead which the values are the values are going to be in the state so let's say Const name email message and these are going to be from this state we're gonna pull them out and then let's create a variable called lead and just add these values as as part of this object so email message which is the same as doing like you know message message all right and then we'll call this dot props dot add lead and we'll pass in lead all right and let's add it as a proc type so up here we'll say static prop types brought type start funk is required all right so let's save that we may get an error of something at first but we'll fix it so let's try it out we'll reload and let's say say Matt Johnson Matt at gmail okay let's try it out submit there it is so it gets added here let's reload and it's still there good alright guys so this video is getting kind of long I think that now that we can actually add leads and list them and delete them I think in the next video what I want to do is start to handle errors and messages and this isn't something that we really have to do but I think that it builds an overall better application we're gonna use something called react alert where we can have a little pop-up come down and tell us that you know whatever this email has already taken or something like that because actually let me show you real quick if I try to add let's say John Doe jeido at gmail which remember is already taken if I submit notice how it doesn't get added ok if I open up my console it gives us an error here which doesn't even really Ted just tells us it's a bad request which it is because the email is already there it's already in the in the database so I want to be able to handle these errors better I wanted to say well this email has already been taken so we're gonna create a whole errors reducer for that and then create an alerts component all right so we'll get into that next

Channel: Traversy Media

Views: 112,251

Keywords: react redux, redux, django redux

Id: BmL8iaLMnQ0

Length: 47min 6sec (2826 seconds)

Published: Tue Jan 29 2019