Summary

Redux Saga Setup Summary

Overview

The setup for Redux Saga is nearing completion. The initial middleware has been configured in index.js, but an error occurs in the app indicating that the saga argument must be a generator function, which hasn't been defined yet.

Key Concepts

Generator Functions: A generator function that uses the function* syntax allows pausing and resuming function execution. For a deeper understanding, consult resources like Mozilla's documentation.

Implementation Steps

Create a Saga:
- A file named sagas.js will host the generator function.
- Define a generator function called rootSaga.
- Export the function to make it accessible in index.js.
Fixing the Error:
- The error is resolved by creating the generator function.
Using the yield Keyword:
- Use the takeLatest effect from Redux Saga to listen for a specific action, fetch fruits request.
Handling Actions:
- Define another generator function fetchFruits that will process the action received.
Import Statements:
- Ensure to import takeLatest from redux-saga/effects.

Understanding Generator Functions

Execution Order:
- Calling a generator function returns a generator object, not executing the body of the function immediately.
- Use generator.next() to advance to the next yield statement.
Yielding Values:
- Each call to .next() resumes execution until the next yield, returning an object containing the yielded value and a done status.

Example

Here's how a simple generator function behaves:

function* getNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = getNumbers();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Conclusion

In this lesson, we covered the creation and understanding of generator functions, which are essential for implementing sagas in Redux Saga. The process includes defining generator functions, listening for actions, and handling those actions efficiently through the Redux Saga middleware. A break is suggested before moving on to the next lesson.

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.