Full Stack React & Django [4] - Error Handling & Alerts

hey what's going on guys welcome to video number four of our react redux django app so in this video i want to do some error handling now if the way that this is right now if i try to submit without putting a name in an email it doesn't work and if I open up my console here it's gonna show us that we're getting a 400 response which is an error it's basically it's a bad request it means that the data that we sent is not formatted correctly because the name and the email are required if we put an email that's already in the database we'll get also get a 400 so we're gonna get these these responses back and what I would like to do is store is is have them run through an errors reducer and get put inside of our state that way we can pick them up in other components now I want to have a component that's dedicated to catching these errors and displaying them to us so we'll create a component called alerts and instead of just putting the you know like a bootstrap alert or something like that I'm actually going to use a third-party package called react alert and if show you the demo here let's go ahead and click this button and it'll show us the demo and you can see that it pops up either down here you can put it wherever you want and then it just fades away and they can have success errors info and so on and you can see you can change the like I could put it on the top if I wanted to like that so that's what I want to do is I want to use this and there's a few things we need to do in order to use this okay there's there's a couple dependencies we have react alert itself we have the react alert template and we also need react transition group so we need to install those those three things and then we bring in the provider the alert provider and we wrap it around everything just like we did with the redux provider and then any component we want to use it with we just import with alert and we just wrap the default component the export in with alert and then we can simply do this dot props dot alert show or dot error whatever it is we want to use okay so that's what we'll be doing so jump into my terminal here and let's go ahead and cut this out and let's do NPM install react - alert we also want react - alert - template - basic I think that's it let me just let me double check template basic yep and then we also need react - transition group because it's a dependency of react alert so let's install those things okay then we'll go ahead and we'll run NPM run dev again all right and let's minimize this okay now in our app J s like I said we need to create our alert provider so we're gonna do that we're gonna bring it in right here let's go import provider now we already have a provider from react Redux so I'm going to use an alias I'm gonna say as alert provider and that's gonna be from react - alert okay so we also want to bring in the template so we're going to bring in alert template from react - alert - template - basic so now that we brought those in let's go down here and let's create some options I'm gonna put a comment here we'll say alerts options say Const alert options which is just going to be a an object and we're gonna set a timeout of 3,000 milliseconds so 3 seconds and then the position I would like to have it top center and if you want if you want it to be different that's fine so down here we want to keep the Redux provider as the outermost provider and in here we'll put alert provider okay and we want to just wrap this wrap the whole fragment here now this alert provider is going to take in the template okay so we want to pass in alert template we also want to pass in the options so we're just going to go like this and we're gonna use the spread operator and say alert whoops alert options like that okay so we'll save and now we should be able to use this within any component however I'm gonna dedicate an alerts component to displaying these things so in components oh you know what I forgot to delete that earlier so I'm gonna recreate that so in components layout I'm gonna create a new file called alerts dot jas okay and this is going to be a class-based component and in order to use this in order to use the alerts we have to import with what is it with alert and it's gonna be from react - alert and then down here in the export we just have to say with alert and then wrap the component name alright I'm also going to use a fragment here okay and change this to fragment okay because we're not actually rendering anything on in the UI it's gonna be that pop-up and the way that we basically call that is with this dot props dot alert dot show or dot success whatever it is that we want to use so I'm gonna test it out by adding component let's say component did Mount which we'll just run as soon as the component mounts and we'll test it out by saying this dot props dot alert dot show and let's say it works all right so I'm gonna save this and then let's reload I'm sorry we need to bring in the alerts to the main app component so in here let's go right under the dashboard we'll bring this down and we want to bring in from layout slash alerts and we'll go ahead and we'll put this right below the header like that okay so now let's save it and reload and we get it works so as soon as that component mounts it runs this right here and it shows us the little pop-up all right now what I want to do is have an errors reducer so that if we have any error from our server I mean right now if we look at our leads action like let's say for add lead or just console logging this eerr which doesn't give us much it just tells us the response in the console I want to actually send the message and the status into an errors reducer so under reducers I'm gonna create a new file called errors dot j/s and we need to bring this into the index j s which is our route reducer so let's say errors errors and we want to pass that into the combined reducers like that ok we can close that up now we're gonna have a new type so in actions types J s let's do get errors so get errors okay now in the reducer here the errors reducer we're gonna import get errors and that's gonna be from the types file so actions slash types and then we're gonna have an initial state which will be an object which will have a message that's gonna be an object and status which will be set to null by default all right and then of course we need to just export default function and this will take in state which will be by default the initial state and then in action okay just like though the leads reducer and we want to run a switch we want to test the action dot type okay let's test for the case of get errors and if get errors then we want to return as far as the state goes we want MSG which is going to be action dot payload dot msg and status will be in the payload as well so action payload dot status all right and then we'll just have a default a default that will just return the state all right so let's save that and let's go into our actions our leads action and instead of doing this and I just want to show you to get the exact message we can do error response dots data so if I save this and I open up my console here and I reload and I just try to submit you can see we get this object that has email with an array with any messages at that that pertain to it which is this field may not be blank we also have named this field may not be blank now I'm not very fond of the way they show these like having it be an array and it just says this field for all of them I wish it said email failed it may not be blank that would be a little more easy to handle but we have to work with whatever we get back so that's why the message is an object okay so we can get the status with error response status so what I'll do here is on the catch let's actually create an object here with a message that's going to be equal to the error dot response dot data and then the status is error dot response dot status okay so we have this this errors object now I want to dispatch I want to say dispatch the type of get errors I don't think I brought that in did I yeah I did okay so make sure you bring and get arrows at the top so get errors and then let's send as a payload that errors object that I created right here okay so now we'll save that and when we get an error it you get added to our state so let's go to the Redux tools okay so Redux tools just I want to make this a little bigger and let's reload and if I go ahead and submit this you'll see that the get errors action runs and down here you'll see that in the message we have that name and email this field may not be blank and we have the status of 400 so the errors are now in our state okay so now we want to catch those errors in the alerts component so remember in the leads we caught we we got the leads from the state and the alerts we want to get the errors from the state so let's go to alerts j/s and remember if you want to work with redux inside of a component you have to bring in connect so let's say import connect I'm sorry we need to wrap this it's not a default so we need to do that and that's gonna be from react redux and the errors we bring in are going to come from going to be props so we also want to bring in prop types let's do IM PT okay and then I yeah I think that's good so down here we're gonna create our map state two props so let's say Const map state two props and this is gonna be an arrow function that takes in the state and then we want to get let's say errors all state will say error and we want to set it to state dot and then the reducer that we want which is errors okay so this will any any errors that are in the state are now going to be props so we can say this dot props dot error and that'll give us the message and the status and so on now remember down here we have to explore it default connect so I'm going to say connect open up a set of parentheses and also surround this with parentheses and inside connect we want to do map state to props all right and then let's add the prop type so static prop types and let's see we have error and that's gonna be let's say prop types and this is gonna be an object and let's say is required oops alright so let's see now we're not going to render anything we're gonna keep that as is but this component did mount I'm gonna change the component did update and what this means is that when we get a new prop such as the error then this is gonna run okay so if I save this and I reload let's see what's going on here maximum update depth exceeded and component repeatedly call set state inside component well update oh let's get rid of that okay so what we need to do here this component did update it'll take in previous props okay and then we want to just make sure that the props have changed that's all we got that error message so we're gonna say if and we want to check the current prop so I'm actually going to poll because we have access to this dot props dot error so I'm gonna use a little D structuring and I'm gonna pull out error let's pull out error from this dot props and also alert because remember it's this dot props dot alert so we'll pull both of those out and we're gonna say if error meaning the props the stock props that error then we want to do something so for now I'm just gonna say this dot actually I don't even have to do this stop props I can just say alert because we pulled that out we can say alert dot success or actually might as well do error because there is an error and we'll say there is an error okay so now if I reload nothing happens but if I submit we get there is an error now we what we next thing we want to do here is check to see what error were actually getting now we know that there's a message dot name there's a message dot email so let's do this let's say if let's say if error dot msg okay because remember this state if we look at the redux tools here and we look in the state there's a message so in message we can have name and email these are possible errors so we'll say if message dot name then let's alert dot error all right now we could put a custom message here like name is required obviously forgot to put my hold on what did I do here I've got my closing parentheses over here so we're checking to see if error message name if so then alert error name is required now let's save that and let's try it we'll reload and we'll submit and we get name is required okay we can also search we can also check for the email and we'll say email is required okay so we'll reload and submit we get name as required email is required now the problem with this is we're hard coding the message now if I do let's say John Doe and I try to do jihad what did I do J Doe at Gmail which is already a registered email if I go ahead and submit we get email is required now that's not the correct message it should be down here if we look in our state it gives us the message which is right here this email already exists you can't really read it but that's what it says so we need to take this and put it into the message instead of hard-coding it now it's it's a little difficult because this is an array right it's an array so it's not just a simple string that we can output so that what we'll have to do here or what I'm gonna do there's that mean there's different ways you can do this stuff but I'm gonna put in some back ticks and I'm gonna put the name of the field so name colon and then open up this syntax so we can put in a variable and we're gonna say error dot msg dot name which remember is an array right it gives us an array but I'm gonna use the dot join method which will actually turn it into a string okay and we're gonna do the same thing for email so let's go in here I just copied that I'm gonna paste this in I'll change this to email and change this to email so now if we try this again if we submit we get named this field may not be blank email this field may not be blank that's coming from the server and now if I try to do J doe and I submit we get email lead with this email already exists okay so it's going to give us the correct error rather than us hard coding it it's just a little weird because it comes in as an array so that's why I'm using join to basically turn it into a string alright so let's see we I mean we may get a message error too so we might as well put that in here so I'm just gonna copy this paste that in and just change this to message message and then message okay so that will take care of all the errors from that all right now I'd also like to be able to say like if we delete a user they could say or delete a lead I'd like it to say lead deleted or our lead added something like that so I think that what we should do is create a messages reducer as well and have a get messages that we can catch here just like we do with the errors as well as a create message so that we can create a message whenever we want so let's go to reducers and let's create a new file called messages dot j s and I'm just going to copy what we have in the error the errors reducer and paste that in and we're gonna have a type called get messages and create message okay and let's see as far as the the state it's just gonna be empty by default and then let's see initial state action type so get messages all that's going to do is return the payload so we're going to directly return action dot payload because it's just going to be a string I'm sorry it's going to be an object and then let's see for create messages and I'll create these types in a minute so create message we're going to return and let's just say state equals action dot payload so we're just going to set the the entire state to whatever we pass in which will be an object a message object okay so let's save that let's go to types and let's copy this down a couple times and we'll do get messages and let's do create message okay save that now we have to add this to our route reducer messages all right let's save that so let's see let's create in actions a new file called messages okay our messages dot J s and from here is where we want to add our create message action so we're going to import create message ports create message from types and let's say sports const creates message it's gonna take in a message parameter and all we're gonna do here is return we're gonna return directly we're not making any any asynchronous requests with AK cos or anything right like that so we don't have to pass in dispatch we can directly return the type of create message and the payload which will be the message object okay so that's it now we're I would like to create a message is like I said when we delete a lead or when we add a lead so let's go into leads the actions the lead actions and let's see do this let's bring in up top here let's bring in that create message action that we just we just created so we'll say imports create message from dot slash messages because when I want to create a message I want to do it from the action I don't want to have to do it from the component I don't want to bog the components up with with all these create messages so down where we delete a lead right here we can actually dispatch that create message so let's see we'll go right in the then before we dispatch delete lead because we know what already happened on the server so let's say dispatch and we can dispatch the method the the action directly by saying create message and it takes in an object which is a method which is a message so I'm gonna say lead added and then the text I want to display is just lead added okay so again this is gonna call create message which is in our message action right here it's going to dispatch or return the create message type to the reducer which is right here it's going to set the state to that message and get messages is going to is going to return that now this get message we want to call from the alerts because we want to be able to get any messages that are created so let's go to alerts j/s and we already did the connect thing and all that we just want to go down here and add the messages per message and we want to add the State DOT messages all right that way we have access to them because if I save this and I reload if we look in our Redux tools if we look at state we have messages in our state which is just an object okay now once we delete one of these it should add the message to our state now we're catching that here as a prop so it'll be this dot props dot message let's actually add that up here and as a prop type so I'm going to just copy this down and it's going to be an object so message and then we'll check for it just like we did the errors so I'm gonna add and here message so we can take that from the props and then we just want to check to see if it's changed just like we did with the error so let's say if message is not equal to the previous props dot message then let's check for certain messages such as delete lead which we just added alright so let's do if message dot what do they call it where are we want to go to leads the actions so I called it lead oh this is the delete it should be lead delete it or let's call it delete lead and we'll say lead delete it alright so we're creating a message called delete lead now back in the alerts let's check for that will say message dot delete lead then let's go ahead and alert now this is a success not an error so we're gonna say alert dot success and we can just simply output message dot delete lead because it's going to contain that that string that we added right here lead deleted so let's save that and let's go back here make this smaller let's reload this and let's delete one of these so let's let's actually just add one just to delete submit ok so now if I delete whoops I just deleted two and we get lead deleted ok now let's do the same thing for when we add a lead so back in our actions our lead actions let's copy this dispatch we just did and let's go down to add lead and as soon as we as soon as the the response comes we know it's successful so we're gonna say add lead and let's say lead added okay so now in alerts we can simply check for add message dot add lead okay and then we're gonna alert success ad lead so let's save that let's reload and let's see let's add back Jane Williams contact Jane on Tuesday submit and we get lead added now one thing that I just realized is we don't even use the get messages so we don't need that we're just creating the message and then that's changing the state and sending it down so we can actually get rid of that this get messages here we don't need to bring it in and we can delete it from types as well I think I had planned on using it but we actually don't need it so let's just reload and make sure that this still works I don't see why it wouldn't okay lead added good lead deleted good all right so let's see one last thing I want to do when we submit a lead I want this to clear so let's go to our form component which is see we get a lot of files here so leads form J s and after we call this doc props dot set state meaning the component state this stuff up here and let's set name to nothing email thing message nothing alright so we'll save that let's try it out okay so now it clears up good alright so I think that we're just about ready to move on to authentication now if that whole message thing confuse you I mean it's not you don't need to do that but I think it's nice to be able to just create a message wherever you want inside your action creator and then just catch it in the alerts component and display it alright so I think that's it in the next video we're gonna start to implement authentication now we're gonna obviously need a login page a register page so we're going to be using react router also we need to start dealing with the backend as well we need to make it so that we can't access any of these leads if we're not logged in we can't add a lead we can only access our own leads so we're gonna be adding a new app to our Django back-end called accounts where we add all that API stuff alright so that's it guys thanks for watching and I'll see you in the next video

Channel: Traversy Media

Views: 58,660

Keywords: react, django, react django, react alerts, redux

Id: Fia-GGgHpK0

Length: 34min 54sec (2094 seconds)

Published: Thu Jan 31 2019