Handling the FETCH_FRUITS_SUCCEEDED action

Lesson 11

Handling the FETCH_FRUITS_SUCCEEDED action - Learn Redux Saga Tutorial

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

Summary

# Summary of the Transcript

## Overview
The discussion revolves around implementing a Redux Saga to manage asynchronous operations for fetching a list of fruits. The speaker explains the use of generator functions and how to handle asynchronous actions in a Redux application.

## Key Points

1. **Generator Functions**: 
   - The speaker highlights the importance of the `yield` keyword in generator functions. The process involves yielding a call to the `findAll` function, which is asynchronous and will wait for the promise to resolve before proceeding.

2. **Action Dispatching**:
   - Once the promise resolves and the data (list of fruits) is returned, an action `fetchFruitSucceeded` is dispatched with the payload containing the list of fruits.

3. **Reducer Implementation**:
   - The speaker explains how to handle the dispatched action in the reducer:
     - A switch statement checks the action type.
     - If it matches `fetchFruitSucceeded`, it returns a new state with the list of fruits from `action.payload`.

4. **Error Handling**:
   - The speaker encounters a compilation error due to missing a default export in the Redux reducer. A temporary workaround is discussed, including the need for Babel presets to support the object spread operator.

5. **Asynchronous Flow**:
   - The speaker outlines the flow from the initial action creator `fetchFruits` to the Redux saga intercepting the action and calling the asynchronous `findAll`. 
   - Upon promise resolution, the saga dispatches the `fetchFruitSucceeded` action, which updates the state in the reducer, resulting in a UI update.

6. **UI Reflection**:
   - Once the state is updated with the fetched fruit list, the UI reflects this change, transitioning from a loading state to displaying the fruit list.

## Conclusion
The lesson wraps up by reiterating the entire flow from the action creator to the final state update and the UI rendering, emphasizing the interconnectedness of Redux, Saga, and asynchronous operations.

Video Transcript

Welcome back everyone, let's get, let's continue what we were doing before. So before, so we were doing this call to find all. This is great. But the thing is, remember generator functions will look for the yield keyword and that's when you call next, it's going to go all the way to the, it's going to execute everything up to the yield keyword and then it's going to yield that back. We don't, we should have a yield keyword in line seven here actually. So we're going to do it the following way. So we're going to yield the call to find all so that the middleware will come here and find yield. Okay, so I'm going to suspend this function execution here. We're going to make this call and since it is an asynchronous call, it's going to wait until this promise is resolved before going forward. So wait for this guy. If it succeeds, it takes the value resolved by this return promise and assigns it to the variable fruits. Now that value is going to be the list of objects, list of fruits. Now after that, it's going to go to the next yield statement because the middleware keeps calling the, to execute the function, right? So it's going to go to the next yield. Okay, and it's going to take the instruction to put to dispatch an action. We're going to dispatch the action fetch fruit succeeded with the payload fruits. So that's great. With this, all we have to do now is handle this action in the reducer. So let's do that. Let me save this, go back to the reducer file. And here in the reducer, we are going to do a switch for the action type. Okay. And then what we're going to do is case that fruits was succeeded, right? We are going to do the follow. We are going to return a copy of the state with the fruits now coming from action. payload. If you want to add a default switch, it's fine. I don't really care much here. It's expecting a default. You can add that to is just going to be the state as is. So we don't really need this guy. Anyway, so in the reducer, once it gets an action and that action is fetch fruit succeeded, it means it needs to update the state. Now fruits is going to be the action payload. Okay. And who made it this action? It was the redux saga middleware, right? Remember? Anyway, let me save this. I'm going to go to Firefox and see what's happening. Fail to compile. The user does not contain the default expert. What happened here? Switch. What's going on? Let's see. That's the read the error. The template import error.slashReducer does not contain the default expert. See, so it's saying that does not contain the default expert from the index.js. Port reducer from reducer. Switch. Action type. Case this guy. Return. fruits. Could it be this guy that it doesn't have yet? Let me just try this. Maybe it does not have support for the triple dot. Return object to assign. New object. Copy from state and copy from this object fruits. Action dot payload. Let's try that out. There you go. It seems like I don't have support for the triple dot here yet. I have to add a Babel preset and a Babel preset to the project. Anyway, you probably have it if you know what I'm talking about. Babel preset to add this feature that's not in ES6 but beyond. Anyway, what I did here is the following. I create a new object, copy the properties from state into the new object and copy this new object fruits with the list of fruits into that object and return this new state. Equivalent of this if you have this triple dot transform, Babel transform that transpiles this. Okay. So what happened here? We have our list, right? Let's refresh. You see loading there? Takes two seconds to load. So let's clear this and try again. Look at the log. So an action with dispatch from Redux. We don't care. Current app state is fruits null. And it does the console log with the props of the app. We don't care. So an action was dispatched and that was the fetch fruits request, right? And then fruits is still null. And then another action was dispatched. Fetch fruits succeeded with a payload. Look at that payload. It's an array of three objects, the apple, orange, and sorbet fruits. Great. So it updates the state after getting this succeeded action in the reducer and returns its reflex in the UI. That's great. Let's review what we, how it all happened. So starting from app.js when it mounts, we call the action creator fetch fruits. This action creator is bound. So it will dispatch the action returned by the action creator, which is fetch fruits requested. Now the saga is listening for the fetch fruits requested and intercepts that and it say, okay, I'm going to take this, the latest action with this type, with the take latest effect. And I'm going to call this fetch fruits generator function. And it passes the action here as done argon. If it goes through and it goes calls, find all, gives an instruction to the middleware to call the find all method, which returns a promise. Now this fetch fruits function will be suspended until find all resolved with a value. Now that value will go into the variable fruits. Then when this guy is assigned a value, it's going to the next line with the put declarative effect. This is an instruction to dispatch an action. Saga middleware dispatches the fresh fruits succeeded action with the payload as being the fruit list, the list of objects. Then that's it. It reflects there in the reducer when it gets the fetch fruits succeeded action returns a new state with the fruits now being the action payload, which in turn is reflected in our app.js render function. Because we are taking the fruits as props, state of fruits and that changes from null to a list with three elements that causes a re-render, render is called again. Now this dot props dot fruits is no longer null. So this loading message will not appear. Instead we're going to get a fruit list with the list of fruits. Okay, so that's it for this lesson and until the next one.