Welcome back. So after all that boilerplate, just to set up Redux, get a reaction, a first action created going, we're finally going to step into setting up Redux Saga in this lesson. So we're going to do some imports, going to set things up and apply the mirrorware and get things started. Before I do that, I just think about what we're doing. So Redux is used for application state management. So we have a situation where we emit an action to fetch a list of records. But that takes time because it's an HTTP request. And we cannot just do it in a synchronous fashion. So we have to do it asynchronously. That is, first we emit the action to request the records. OK, the records were requested. Now we have to wait. We cannot right away dispatch another action. Success. We have to wait. And then how can we do that? We can do that using a middleware, a Redux middleware. So middleware is something like comes in between when we emit the action and when you handle it in the reducer. So when you emit the action, it's going to go through the middleware. So if the middleware cares about that action, it's going to do something. Otherwise, it just ignores it and passes on to all the registers. OK, so keep that in mind. Anyway, let's get going. So we're going to go to the text editor. Now we first have to install Redux Saga because we don't have it yet, right? If you go to the package.json in the project directory, the dependencies, there's Redux. We have Redux, but there's no Redux Saga yet, so let's install it. Let's go to the terminal. I'm going to go to this new tab. Clear the screen. I'm going to type npm install Redux Saga. Redux dash Saga. So you might take some time to install that. So I'm going to explain what we're going to do next. We're going to go to the index.js file. That's the file where we inject the React app, where we set up the store and give it to provider. So we are going to import Redux Saga, the middleware, and then we're going to apply the middleware. And then we're going to run the Saga. So in Redux Saga, you have to run the Saga, which is going to be a file that we're going to create with some generator function definitions. Okay, we got it installed. So let's go back to the source code. Under src, we're going to go to index.js. Up here, Redux, we're going to import create Saga. Middleware, I just gave this name. You can give it any name you want. From Redux Saga. This name is what they use in the documentation. So create Saga middleware. So here, before we create the store, we're going to create a variable called Saga middleware. So this variable is going to hold simply the call to create Saga middleware. Like so. Okay. Now, you have to somehow apply the middleware to the store. So we have a store right here. You can give it as the second argument. Instead of it being an object indicated initial state, it can be, if you remember the documentation for Redux, create store. I'm here in Redux.js.org, documentation for the create store helper. It has the argument called the enhancer argument. It's a function. You can give it an enhancer. One of the ways to get an enhancer applied is using the apply middleware helper. Okay. This is got. That's the guy we're going to use. Apply middleware from the Redux package. Let's get back to the source code. Then we're going to call apply middleware. Like so with the Saga middleware variable. Now we don't have this, so we have to import it from Redux. I'm going to add apply middleware here. I'm going to import it from Redux. So we create the store of reducer and the middleware applied. So that's great. We also have to do something extra for Redux Saga. That's called run the sagas. But we don't have any sagas yet. But we can call saga middleware.run with some sagas. We don't have it, but let's just pretend there's a variable called sagas. Let's define sagas. Let's create a new file right here called sagas.js. Now before I go into the implementation of this, let's backtrack a little bit back to index and let's import sagas. Let's import sagas.slash.saga. So this file sagas is going to contain all our sagas. Sagas are like generative functions that define a behavior for middleware handling of the actions. So we got that here defined. That's great. Let's go here and before we go on, let's review what we did. So first we import create saga middleware from the redux saga. We call that to get the actual middleware variable, which in turn is passed to the applied middleware given to the create store. When you create the store, you apply the middleware here. And lastly, don't forget to run the sagas that we are going to define in the next lesson. Okay? So I'll see you then.