Welcome back everyone. Let's continue writing our saga to fetch all the fruits. So what's going to happen is, let's go here to the text editor to app.js. So in component did mount, we call this dot drops dot fetchFruits, right? This is a bound action creator that dispatches the action fetchFruits requested. Now we have a middleware that's listening and would take the latest action type. So fetchFruits requested, it's listening for this action, right? So when it gets it, okay, I'm going to call it fetchFruits. So to illustrate that, let's put a console log inside this generator function called fetchFruits. I'm going to just say generator function fetchFruits was called action, I'm going to console log the action, okay? Simple console log. Why is it doing this? Anyway, it does not have a UDA. Okay, I don't care right now, right? Let's keep going. So I just did a console log to see if it's actually going here. That's all we care about. Is it actually calling this generator function? Let's go back to the browser. So we can see function star was called at the action fetchFruits requested. That's great. Now what we're going to do in the middleware is the following. Let me just break the line here. You can have the console log or not. You can delete it if you want now. So we need to make a HSP request to get all the fruits, right? So we're going to do that API findAll, right? You can do findAll and then you call it here. That's one way. And it's a pretty simple function. You don't need any arguments or anything. You're just going to say findAll. Let's import it here. Import findAll with the braces from dot api dot slash api. Now if you call this as all, it's going to get the records, but it's not going to do anything. So you have to put that in a variable. So let's say fruits is that, right? Now you have to keep in mind that findAll is returns of promise. So you have to resolve this promise. Like you have to handle this promise, usually with a then or a wait, if you have an async function. But then what exactly do we, how we do it with the generator function and the reduxSagaWay. So the reduxSagaWay, it's actually to isolate all kinds of statements into reduxSaga like commands. For example, in this case, it will be a call to a function. So the reduxSaga command will be call. And what we do in reduxSaga is we give instructions to the middleware. But the middleware is in charge of executing those instructions. So if you want to fetch from an API, I'm just going to give the middleware an instruction to call a function. And I'm not going to be responsible for actually calling that function. We're going to leave that to the middleware. If you want to learn more about that, I recommend you go to the documentation for reduxSaga, reduxSaga, redux-saga.js.org. You can look here at declarative effects. I think there's an API actually, never mind. You go down here, API reference, and there's many things here. And there's effect creators, this is the one I'm talking about. It's the call effect creator. So it's a description that instructs the middleware to call the function with args as argument. So we just give instructions to the middleware to perform some action. And here what we want to do is not do this like so. We want to give an instruction to call define all. We can do like so. We can say call with the function definition, not the call. And this is going to give you instruction. To illustrate that, I want to do a console log again. So instead of doing console roots here, I'm going to remove it. I just want to tell you what it looks like. I want to let you know, show you how it looks like. So let's first import call from reduxSaga slash effects. Then we're going to do let's comment out this console log for the action. And let me put a yield here so it stops complaining. Okay, so we're going to do a console log. When you say call, find all, what does it give us? What does this guy give us? I want to know. That's what we want to know to better understand this thing called call in reduxSaga. Go back to the browser, to your app. Now, if you look at this object right here, so it's an object has a property called call. Now this property called call, you can see there's an fn property with the function find all. And there are the arguments to the function. We don't have any arguments so it's empty, right? So it's an instruction for the Saga middleware to execute. If you look at the API reference, there's many notes about it here and so on. You can read it if you want. Better understand it. Now I would like to point out this detail here. So we are making a call to a function called find all that returns the promise. So if the result of that call is a promise, the Saga middleware, so it will suspend the generator, it will pause the function, right? Until the promise is resolved. Then it's going to assign return that resolve value, okay? Now in the case of an error, it's going to throw an error inside the generator if the promise adds rejected. So this is a very important piece of information here in their documentation. So you read it carefully to better understand it. Anyway, getting back to what we had before. So we're going to yield a call to find all. Now we want to put this guy in a variable. Like so. Oops. I don't want to yield it right here. So I call and then what am I going to do? Once I get all the fruits, I am going to emit an action that everything succeeded. But how can I emit an action in redux Saga? That's another effect called put, P-U-T. So you're going to put or dispatch an action of type, fetch fruits succeeded, okay? Now you have to give a payload with the actual fruits, the data, right? So I'm going to give fruits the data as the payload and I forget the comment right here. Now let's import put from redux Saga slash effects. Oops. So we learn not effect output. The put is like dispatch. So it will give an instruction, okay? An instruction to dispatch this action of this type and with the payload fruits. Okay? Let's put a yield here. And then let's see what happens. Let me just check here. Save. And actually before we go on, let's talk about what we did so we can go to the next lesson. We learned two effects. We learned the call and the put. So in the redux Saga way of doing things, you're giving instructions to the middleware instead of actually performing those instructions yourself. For example, an HB request or a function call in our case. We don't want to call the function right away. We want to let the middleware call it. In fact, give it a function and if you have any arguments you put as a second argument here. I don't have any. It could be the idea of some fruit if I wanted to find one, but I don't have any arguments. So I'm just going to leave it like so. This guy is going to give an instruction. The middleware calls it and then it's going to, if it finds all returns of problems, it's going to return the value resolved by the promise. Now we're done with that. We're going to do a dispatch the action fetch fruit succeeded because everything went well. And then we get a payload of the fruits. So this is it for this lesson. I'll see you in the next one. We're going to look more into this Saga implementation. See you then.