Lesson Summary: Handling Errors in Redux Saga

Welcome back everyone. In this lesson we are going to learn how to handle the patchfruits failed action and learn how to deal with an error. So looking here at Osaga just before going there, remember that the find all we modified it so it will always reject with a new error after two seconds to simulate a problem from this fake back end, fake API endpoint. So going back to the sagas.js file, let's take a look at the patchfruits handle Osaga here. So we make a call to find all. So the middleware is going to suspend this function, the execution, and will wait until this guy resolves, this promise resolves, and once it does it will assign the value to the variable fruits. Now this guy, if this promise is not resolved but rejected, that is there was a problem, ReduxSaga will cause this to emit or throw an error here in the generator function. Now to catch that error you need to use the try and catch block. To do that you enclose everything you want to do in a try block, then you add a catch right after the try, like so. Oops, don't need the error here. So it's going to try to do these statements. If there is any problem, that is if in this case this promise rejects, it's automatically going to throw an error right here. Then because an error was thrown, it's going to go immediately to the catch block. Everything else will be skipped, then it's going to go execute the commands in the catch block. Now if something happens in the call to find all, in our case we changed it so it rejects with an error, that means the request failed. In that case we have to emit an action called fetchFruitsFailed and we have to let the user know there was a problem and what the error message was. To do that we're going to simply do the following. We're going to dispatch an action with put and this is going to be of type fetchFruitsFailed. Now we need to let the user know the specific problem. The error is an error object. This error variable is an error object. To get that message that we made failed to fetch fruit data, we need to say error.message. So let's go back to Saga. As a payload I'm just going to pass the error.message. So that's going to give us that message. Now what we're going to do when we dispatch this. Now you have to always keep adding u's, don't forget, because we deal with generator functions. So reduxsaga is going to remember generator functions when we call that generator function we got a generator object. Then from the generator object you keep calling that .next method and that will keep executing every next yield statement. So that's why we always need to add the yield otherwise it will not know when to stop and take the next command. So make sure you remember to add the yield there. So reduxsaga is going to look at this declarative effect called put that merely we give it. This guy returns an object with an instruction to dispatch an action. Now reduxsaga is responsible for taking this instruction and making executing the actual command the actual statement of dispatching in action. So we use that and then we get an error message and that's pretty much it. Now we have to handle this guy. We're not done yet because all reduxsaga does is in this case is just emitting or dispatching the action. Now we have to handle the state with the reducer. We still have to do that. So let's go back save this file go back to src slash reducer.js. Now here add another case. Now this other case is going to be to handle the fetchFOOTSFailed action type. Now we're going to return the same thing make a copy of the original state into an empty object. You can use the triple dots if you have the babapreset or a setup. I don't have it so I can't use it anyway. So I'm going to copy the properties from the state. Then I'm going to add a new property with the third object here. We're going to say that the fruits you have to say give a variable to store the error here. So you can define a property to start the error. Let's call it error and I'm going to take that error from the action.payload. Remember we did dispatch from the reduxsaga implementation that's saga to dispatch the error message as the action.payload and we're going to assign that to the property called fruits error. Just as a note if it happens to fail that also means that fruits is no longer loading so you have to actually also do fruits loading false. So with that let's actually define some initial value for fruits error in the initial state. How about that? If you go up here just so we can add fruits error let's make a note because initially there will be there will not be any error. So if there's an error it's going to set from null to the string of the error. Now this is nice but we have also to take care to reset that error if we happen to make a new request because we don't want to keep displaying that error message every time to the user even though you try to make a new request. So when you make the request fetchFruit's request then make sure to also clear out the error message because there will be there will not be any errors yet when you make the request only when you obtain the response. So you have to save fruits error null here to reset the error every time. Okay how about that? So that's great now we have to make this guy available to our application our component called app. So let's go to app now in order to use that value we have to go to map state to props right to be able to say here in map state to props on the new property called fruits error and this property is going to show up as this dot props dot fruits error for the app component. Now how can we get this value that's from the state the application state the reduct store dot fruits error okay it just so happens that the same name here and there but this is the actual prop name that's going to appear it could be anything I would refer to the state of fruits error anyway so we got that that's great now let's go back here and we need to show some message right in case there was an error now I'm going to add a new if statement at the top and I'm going to say if this dot props dot fruits error so fruits error is a string but if the string contains actually fruits errors initially no so we only want to display the error message if this value is not no that means it it has to be a string with an error message that's not length zero right because an empty string is actually a falsely valid anyway so let's hope there let's make sure there's all the error there if there is an error if this string is defined we have to return some sort of error message in the UI to keep things simple I'm just going to display a simple message saying there was a problem there was a problem and then I'm going to put a let me just make this into multiple lines I'm going to use the actual error message to be more specific about the problem I put a br here to break the line and I'm going to say this dot props dot fruits error there remember you need the braces to substitute the value here so that it's going to say there was a problem with the problem description the error okay so let's test it out let's go to firefox you can see if you refresh takes two seconds and then it says the message there was a problem failed to fetch fruit data and if you look at the trace from the console logs you can see it does dispatch the fresh fruits requested then after some time after two seconds it gets another action was dispatched and that's fetch fruits fail that's the redux saga doing its work remember it it caught that error that was thrown from the promise returned from find all find all returns a promise but that promise was rejected with an error because of that redux saga throws an error in that generator block that function generator block because we use a try catch block it's gonna go right to the catch block from that part if you look back here so we were here call this guy throws an error so because there was an error it goes to the catch block skips everything else in the try and then it emits an actual call fetch fruits failed with the error message as the payload and you can see right here that that was indeed the case an actual was dispatched and then finally it changes like you can see the this dot props of the app that now fruits error is a string with the error description okay so that's error handling with redux saga so that's it for this lesson and thank you for watching and until the next one