Handling the Loading State with a Flag - Learn Redux Saga Tutorial

Lesson 12

01 02 03 04 05 06 07 08 09 10 11 12 13 14

Summary

# Summary of Transcript

## Overview
The discussion focuses on enhancing the application by implementing a loading state and error handling for fetching fruit data.

## Loading State Implementation
1. **Initial Loading Logic**: 
   - Currently, the loading message is displayed when `fruits` is `null`. This is not sufficient as it doesn't account for other scenarios where requests may still be in progress.
2. **Introducing a Loading Flag**:
   - A `fruitsLoading` flag will be added to the reducer's initial state to manage loading status.
   - The flag will be set to `true` when a fetch request is initiated and reverted to `false` upon success or failure.
3. **Reducer Modifications**:
   - Modify the reducer to handle the `fetch fruits requested` action:
     ```javascript
     // Reducer Example
     case 'FETCH_FRUITS_REQUESTED':
       return {
         ...state,
         fruitsLoading: true
       };
     ```
   - Reset the flag after a successful or failed request.

4. **App Component Updates**:
   - Adjust the application to check both if `fruits` is defined and if loading is ongoing with:
     ```javascript
     this.props.fruitsLoading
     ```
   - Update `mapStateToProps` for accessing the new loading property.

5. **Testing the Loading State**: 
   - Setting the initial `fruits` state as an empty array allows the application to correctly transition from loading state to normal operation.

## Error Handling Implementation
1. **Simulating API Failures**:
   - The API fetch function needs to account for failures by rejecting the promise instead of resolving it:
     ```javascript
     // Simulating an error
     return Promise.reject(new Error("Failed to fetch fruit data"));
     ```

2. **Effects of Errors**:
   - If an error occurs during the fetch process, the application gets stuck in the loading state, leading to unhandled errors in the saga function.

3. **Next Steps**:
   - The next lesson will focus on proper error handling techniques to manage such failures effectively.
  
## Conclusion
The enhancement of the application involves better management of loading states and robust error handling strategies. This will improve user experience and application reliability.

Video Transcript

Welcome back. So we got the fetch fruits okay for the succeeded case. We should do a little bit more about the loading state and then error handling. Let's start with the loading state. Right now currently it relies on the fact that fruits is initially no in order to show the loading message. That might not always be the case. So what we have to do is when we make, when we dispatch fetch fruits requested that means that the request is pending. So that means we have to tell, we have to have an indicator, a flag saying that the request is currently pending and we can then also use that to display the loading message. In case that fruits is already defined but somehow we made a request to load it again or fetch a new list of fruits. So we need only add a property with the pending or loading flag to the reducer here. If you go to the reducer then in the initial state you add a property called say I don't know, fruits, pending or loading whatever name you want to call it. Let's say fruits loading. Let's say it's initially false because we don't have any request to start with. But the moment we make the request that is when we have the fetch fruits requested action time that's when we set fruits loading to true. Then if the request succeeds or it fails we set it back to false. So here it's going to be pretty simple in the reducer. You're going to handle another case. If you get fetch fruits requested all you have to do is return the copy of the state. Let's do object assign, object assign, create an empty object, copy from the state. Then fruits loading you set it to true. Okay, notice this is in the reducer. It's not in the saga, right? So the moment we dispatch this action, first it goes through the saga because it's a middleware and does the HTTP call to find all. Then it goes here and then it's going to set fruits loading to true. Then when we succeed then you set it back to false. Fault loading is false here. We put it in a new line. You can see better. Okay. Then we can use this property in the app.js if you go back there. Notice we have this check if fruits is null. It's not defined. We can also add or right here this.probs.fruits.still loading. We keep displaying the loading message. In order to be able to access fruits loading from the application state you have to go down there to map state to props and add the fruits loading property which comes from where? From state.fruits.loading. Okay. That's it. We have access to fruits loading. To illustrate this working we can, to illustrate that this is actually working, we can set the fruits list in the reducer initial state. Instead of saying no right here for the fruits you can set it to an empty list. So that will be defined. Then the app is going to check for the second condition because the first one is going to be what? This is going to be empty array which is defined. Then it becomes a false value and then it's going to check the second one fruits loading. So let's see how it goes. You can see it loading fruits and it did it. Okay. And you can see here in the console log for the this.props you can trace it back and you can see that the first one here this props console log from the render function of the app component gives fruits loading files initially. Then it makes a request for the fruits. Then it changes fruits loading from false right to true. Here there's the props and then at the end when we get the succeeded action it changes you can see there's the props fruits loading back to false. So we don't have that loading state anymore. Okay. And that happens here after succeeded. So let's go back here. That's what we did. Now the second thing we have to do is to handle the error. For example if you go back to your API.js we're always resolving the promise here for find all with a value but that might not always be the case right because requests can fail. So let's simulate an error instead of resolving I'm going to comment this out I'm going to do reject. And I'm going to create a new error. I'm going to give this message to this error saying that failed it failed to fetch fruit data could be any message you want. Okay. So this is going to simulate a error from the find all. So it's like we failed the request after two seconds. Now let's see what happens in that case. So we get a loading state that never it gets stuck right never gets out of the loading state. Then we get this uncought at root saga root saga at the method fetch fruits. So there is a narrow that was not caught in our saga function generator function. And that's what we're going to learn in the next lesson. We're going to learn how to implement error handling. See you then.