Welcome back everyone. Before we go on to start hooking up Redux Saga, I'd like us to do the following. Let's set up a fake back-end API, some functions that we're going to call to get the list of fruits, for example. The way to do that, we're just going to create a file on api.js that contains a function called findAll. And that findAll function is going to return a promise that after some time it's going to resolve with the list of fruits. Okay, so let's go to the text editor. Here in the project directory, let's go to the src folder and create a new file called api.js. Now we are in api.js, let's create a function called findAll. I'm going to make it a const variable. And I'm just going to use an arrow function definition. And let's export it to make it available outside. So findAll is going to return a new promise that's going to resolve with the list of fruits. Remember the db.json file that we have here. So we're going to have this guy. And we're just going to return this from our api.js. Okay, so let's grab this file, this list. I'm going to copy and paste. And I'm just going to hard-code it here in the api.js file. I'm going to call it fruits. Let me call it fruit data. I'm going to paste it, okay. So this is basically what we had in the reducer. Now we're going to isolate it here and abstract it through this fake api. And so that later on we are going to make a request to get this fruit data and it's going to behave less though it were an HTTP request. So we have a fruit data in the variable fruit data. Just leave it there. Now go here in the findAll method, this function here. What we're going to do is the following. We are going to return a new promise. So create a new promise. So when you create a new promise there's two arguments, two parameters to this function here. It's the resolve and the reject. So it's a new promise. So let's simulate a delay for the HTTP request using the setTimeOut function. SetTimeOut requires first a function that you want to execute after a certain time, which is the second parameter. Let's do, let's say, two seconds. Two seconds is 2,000 milliseconds. This is in milliseconds so it's going to convert to two seconds. So after two seconds we want to resolve this promise. That is we want to resolve with the fruit data that we defined above. Let's review this. So if you call the method findAll, it's going to return a new promise. Now this promise won't be resolved right away. It's going to take some time as set by a setTimeOut function called for two seconds. After two seconds it's going to resolve with the fruit data here. And it's going to return this list of fruits, this array of arguments. This is going to simulate a back end endpoint. For get, it's like getFruits. Okay, we use RESTfulConvention. Anyway, let's save this file api.js and go back to, let's see, go back to, where in app. So, from app let's go here and let's think about how the data is going to be obtained. So we are ready to find the api. So that data is going to be there. Imagine there's a server and that server has the list of fruits in the database. And once you call this api endpoint with the final method, you're going to get after two seconds the response. Now your application won't right away have the list of fruits, right? It needs to first make the hfp request. And then after some time you obtain a response, then what you're going to do is to update your application state with the new list of fruits. Now that's typically done in the component didMount lifecycle method in React. So here in the class app, we're going to add a new method called component didMount. Now this component didMount, right? We need to make a call to the backend to get the list of fruits. But we're using Redux, so we have to indirectly do that through the emission of an action. So we have to dispatch an action that's going to represent the fetching of the data for all the fruits. So for that we're going to create actions. So let's open here a new tab. So we're going to talk about how the action flow is going to be. So we're going to have the three actions, okay? So the first action is going to be fetch. I'm just going to call it fetchFruit. And this is the main action, right? We need to fetch all the fruits. Now this action name, there's three states. First you make the request, let's call it requested. But then you have to wait for the response. If everything goes well, then let's call that action succeeded. So when it's requested, you're going to set your application, your loading state to show some loading message, right? Because when you make the request, you're not going to get the least of fruits right away. So you've got to tell the user, hey, we're still loading the fruits. So we have to wait a little bit. So you can show a spinner or a message saying loading, okay? Then when you get the data, you have to emit another action called fetchFruitSucceeded. To indicate that, okay, we got the data, everything went well. Now we're going to update the application state with the list of fruits. And this guy is going to give you a payload with the list of fruits, right? And a array of objects. Now there could be errors, right? If you make the request and something went wrong, that's why I have the third action called fruits. But fruits failed. To indicate, okay, that was a failure. So the user, you have to let him know, okay, that was a problem. So you have to show an error message. So three basic actions. So we're going to make an action creator. Okay, typically you can dispatch action with the dispatch method like so. Let me put a JavaScript here so you can see the highlight. And every action has a type, right? In Redux. So we have an action and it's simply an object, plain object that has at least a property called type. And this type is going to be fed through just requested. Now this one, if we don't have any payload, we just request. Then after that, after we get that successfully do that, we're going to dispatch yet another action. If success. You're going to do what you're going to dispatch an actual type, but fruits succeeded. And then you have a payload, you have something obtained from the server. And that's going to be the data, right? So that I'll just call it server data for the time being, which is the list of fruits. So this action is going to be dispatched. And then your reducer is going to look, okay, you got your dispatch to fetch fruit succeeded. So what do I have to do? Okay, I have to take the payload and update the fruits property in the application state. Now if everything, if you did the threat which requested, but you got up, there was a problem from the back end or locally, then you have to do a dispatch. Instead, if error, you have to do a dispatch of that fruit failed. This action type. Now, you could have a payload as the error message. However way you want to make it so you can let the user know what the specific error was. Okay, so this is what we're going to do in terms of actions. Now to do all these three guys, we're going to do through redux saga. Because we know we have to the first dispatch, this guy, then we have to wait. And that's an asynchronous action, asynchronous process, right? You have to first wait for this guy before you can proceed to this guy or to proceed to this guy. There was a problem. So we're going to make an dispatch here for the fetch fruits requested. If you want to make an action creator, that's fine to make things go quick here. Let me see what can I do? Yeah, let's make an action creator. So you could have the dispatch in the component did mount. That's the one we defined. So you can copy this and put it here. That is fine. The dispatch comes from props, by the way. But you can also isolate this logic into an action creator. What are action creators? Well, in its most basic form an action creator simply a function that returns an object, returns an action object. So we can do that too and isolated them when jacked the action creator into the app. Opponent use map dispatch to props, the shorthand down here. So let's leave that to the next lesson. See you then.