Lesson 09
Root Saga and Generator Functions - Learn Redux Saga Tutorial
Video Transcript
So we're almost done setting up Redux Saga. We did the middleware setup in the index.js
file. Now we got a error if you go to your browser and you see your app now has a error
saying that Saga argument must be a generator function because we haven't defined the
sagas. So I'm going to explain a little bit about generator functions as we go through
in the implementation of the saga but I highly recommend that you look it up by yourself.
It's the FunkinShar construct of JavaScript. I recommend the NBN documentation from developer.moseal.org.
You can look it up to get a little bit more familiar with the generator function.
Okay so with that said let's keep going. We're going to create the saga in this lesson. The Saga2
fetch the fruits. Let's get started. So we have the file sagas.js. So we're going to create a
generator function. It's a function that has the star right after the keyword function. Let's
call this guy a root saga. Okay and then it's just a function so it has arguments and a body. At the
end let's export the file to make it available to our index.js file. So that's great. Let's save
this see if we still have any errors. So we don't have any more errors. We define a generator
function. That's great. Now we're going to use something called a yield keyword right here and
we're going to be listening for the action to request the fruits. So we're going to use what's
called a redux saga effect called take latest. So this guy is going to take as an argument. Okay an
action type. We're going to do fetch fruits request it. So this guy is going to be listening right
so if any action is emitted it's going to go here. Okay is the action that was emitted fetch
fruits requested if so it's going to take that action and do something and that do something
as the second parameter. It's another generator function. Let's make it an external function.
Let's call it fetch fruits and I'm going to define it right here. Generator function
function star fetch fruits. This function will take as parameter the action. Okay this action
that was taken will be given to this generator function. Now we did not import take latest. So
let's do it take latest you can import it from redux saga slash effects. Let me make sure I have
the port right. Let me go to the browser and see the documentation. You look at the redux saga
redux that saga.js.org they have a good documentation. I just want to look at the get started to see if
I imported that thing right. I just want to make sure the package is okay. Reduct saga slash
effects. So that's okay. Great. Going back to the text editor. So we're good. Let's see if there's
no problem in the browser. In our app everything is great no problems. Let's keep going. So as we
said before this is a generator function and when you call the generator function you're going to get
what's called a generator object. The generator object can be used to call the body of the function
and you can call it is going to go all the way to the next yield statement and then you can pause
the execution of the function and you can then resume it later to illustrate that. Let's go back
quickly here to the browser. I want to let you know a little bit about the generator function. I'm
just going to clear this and I'm going to define a generator function here. Let's call it get number.
It's just a generator function a function with a star with the name get number. What I'm going to do
is going to type the following. You don't have to understand it right away but I'm just going to say
yield one. Oops. I didn't want to do that. I want to do you two you three. Now when I call the generator
function what we get is a generator object. So we're not really going to execute anything in the
actual function body yet. So you have to add this guy to you have to assign it to a variable. Give it
any name you want. I call it generator. Now we got the generator. Now to be able to execute the body
of this function I have to do the following. I have to say generator dot next. When I call this
next function what's going to happen is the following. It's going to go through the function.
It starts here until it sees the first yield keyword. It's going to take this value and return
inside an object under the value property. So that one goes under the value property. That's
return from the generator next call. And it also tells you whether it's finished going through
the whole function or not. So it said done is false. So basically it goes and finds the yield
state. Okay so I'm going to yield this value to you and I'm going to stop right there. So the function
is kind of paused. So you can only go next if you execute next again. You see if I call next again
it's going to go okay I'm going to continue. Go to the next yield. I'll take the two place it under
the value property of the object that's returned and check if it's at the end of the function.
It's not yet at the end so it's going to say done false. If you keep doing that it's going to go to
three. Okay I found the next yield statement. I yield the value three and not yet done because
even though it's the last statement it hasn't run through everything just yet. So you have to call it
one more time and finally you get undefined for the value and with done true because it finished
going through the whole function body. So that's the generator function. You can pause and resume
at any time using the dot next. Okay so if you keep doing dot next there's nothing else
it's going to give you right because it's done. So let's review what we did here. Learn about
generator function. Just a detail when you call generator function you don't necessarily call
these statements in the body. You actually get a generator object that you can use to execute
every yield statement in sequence as you keep calling next dot next dot next and you get an object
with a value property that contains the value yielded by that yield statement. In this case it's
just a plain number. It could be anything right. So it's going to tell you what is done with the
done property being true when it runs through the whole function body and there's nothing else.
No more yield statements. Nothing else to do. Okay so I think it's time for us to take a break
and I'll see you in the next lesson.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: