Learn the basics of the Redux Saga middleware to handle asynchronous actions.

Introduction to Redux Saga

Introduction (Fruit List)

# Introduction to Redux Saga with React

## Course Overview
This course is designed to introduce Redux Saga using React, focusing on managing application state effectively in a React application.

## Key Concepts
- **Application State Management**: 
  - Redux is a popular library for managing application state.
  - Actions are dispatched, handled by reducers to modify the state synchronously.
  
- **Asynchronous Actions**: 
  - Applications often require asynchronous actions (e.g., HTTP requests).
  - Redux Saga provides a way to handle these asynchronous actions using generator functions.

## Course Structure
1. **Project Setup**: 
   - Start by generating a React project with Create React App.
   
2. **Redux Setup**: 
   - Integrate Redux into the project.
   
3. **Integrating Redux Saga**: 
   - Learn how to set up and use Redux Saga.
   
4. **Building the User Interface**: 
   - Create a simple UI to display a list of fruits.

5. **Data Handling**: 
   - Begin with fake data in JSON format, consisting of an array of objects (each representing a fruit with an ID and name).
   - Transition to making actual HTTP requests to a mock backend.

## Action Flow in Redux Saga
- **Action Types**:
  - Requested
  - Succeeded
  - Failed

- **Process**:
  1. Dispatch a request action to obtain the list of fruits.
  2. Wait for the data response.
  3. Dispatch a succeeded action with the received data.
  4. In case of an error, dispatch a failed action.

## Next Steps
- Continue to the next class for further instructions.

Welcome everyone!
This course will be an introduction to Redux Saga using React.
In a typical React application, we need some way to manage the application state, that
is, all the data that's stored in the application.
One of the most popular libraries to do that is called Redux.
In Redux, you dispatch actions that in turn are handled by reducers.
Those reducers will take the action if it is important, if it cares about it, and will
modify the application state accordingly, returning a new state every time.
Now, those actions are typically dealt with in a synchronous manner.
How can we handle those actions in a synchronous fashion?
Most applications will have to make some sort of HTTP request of some manner to get some
data from a server, right?
Now, you make a request, and then you have to wait a little bit to get a response.
So it's not a synchronous process.
It is an asynchronous process.
Redux Saga allows you to deal with those asynchronous actions.
So Redux Saga is innovative in a way that it uses the concept of generator functions
in its handling, how we implement all these asynchronous actions.
Okay, so the course we follow in the following fashion.
We're going to have a simple list of fruits.
It's just a very simple app where you have one fruit per bullet point.
Now in terms of what the data structure will look like, we can have some JSON, an array
of objects.
Each object representing a fruit has an ID and has a name property.
That's the name of the fruit.
For example, first fruit in the record is apple, the second record is orange, and the
third record is strawberry.
So think of this as your database.
So we're going to make a simple list of fruits.
Now to achieve that, we're going to start off with just the overall app component, and
then we're going to make a separate component for the fruit list.
Okay.
Now the steps to in this course, we can generalize as follows.
First you're going to generate the project using create react app.
Then we're going to set up Redux.
After that, we're going to hook up Redux Saga.
We're going to learn how to do that.
Then we're going to build the user interface, which is very simple, just a list of fruits.
Then we can start off with fake data and then later do the actual HTTP request to a fake
backend.
We're going to simulate.
To do that, we're going to use Redux Saga to do our asynchronous actions.
Typically we would have three types of actions, the requested, the succeeded, or the failed.
So you dispatch an action to obtain a list of fruits.
Then we're going to have to wait until we get the actual data.
When the data, we get the data, we're going to emit another action called succeeded.
In case there is a problem in that request, we're going to emit the failed action.
That's how we're going to start off in this course.
Okay, so until the next class.


fff6-01 Introduction to Redux Saga

Generating the Project with create-react-app - Intro to Redux Saga

# Summary of the Transcript

In this tutorial, the presenter walks through the process of setting up a React project using Create React App. Below are the key points:

## Prerequisites
- Node version: **8.12.0**
- NPM version: **6.4.1**

## Steps to Create a React Application

1. **Install Create React App Globally**
   ```bash
   npm install -g create-react-app
   ```
   *Note: This command installs the Create React App package globally. It may take some time, especially if it's being installed for the first time.*

2. **Create a New React Project**
   ```bash
   create-react-app fruit-saga
   ```
   - The project name used in this example is **fruit-saga**. It generates all necessary files and dependencies for the application.

3. **Start the Development Server**
   - Change directory to your project:
     ```bash
     cd fruit-saga
     ```
   - Start the server:
     ```bash
     npm start
     ```
   - This opens the application at **localhost:3000** in your default browser.

4. **Project Structure**
   - The main files generated include:
     - **package.json**: Includes React version **16.5.2**.
     - **src/**: Contains the source code for the React application.
     - **index.js**: The entry point where the React app is initialized.

5. **View the Application**
   - The application runs in the browser displaying a simple animation with some text on a dark background.

## Conclusion
With the application set up and running, the presenter suggests that the next lesson will cover writing custom code and integrating Redux.

To get started, let's go to the terminal.
For this course, I am going to use node version 8.12.0.
Okay, my npm is 6.4.1.
First thing you're going to need is create react app.
So create react app is a node module that you can install
and then use it to easily generate a react project.
It already sets up all the boilerplate for you,
so you don't have to waste time setting up react,
web back and all that kind of stuff.
Okay, so to do that, let's just do npm install dash g
because we want this package to be installed globally.
And the name is create dash react app.
npm install dash g create dash react dash app.
So I previously installed it because it takes some time,
so it might take some time for you if you don't already have it.
Now after that, we can use the command create react app,
just say it like so and then the name of the application,
your project.
I just call it fruits saga, okay?
fruit dash saga is my project name and I type enter.
Now I already did this beforehand because it takes quite a while
to generate a project.
Here's in the other tab.
So let me scroll up.
You can see that I did the command create react app
and then it created the app, installed react react dom
and react scripts and so on.
So with create react app, it's pretty simple.
To start the development server, just say npm start.
It says right here after you finish,
it finishes generating the project.
Then there's other stuff that you can take a look to,
but we're focusing on just npm start, okay?
We just need the server to run.
Don't forget to cd to the fruit saga directory.
So let me get back to the other tab.
After doing that, we're going to cd to the project directory,
in my case, fruit saga.
Oops, sorry.
That's the wrong place.
Place cd fruit saga.
Now you can do an ls right here.
See some, already some files that were generated.
Let me go to the text editor to see what we got.
I use atom, okay, for my text editor.
So let me go here.
So I have my fruit saga right here on the left-hand side
and I have these files.
We have a package.json using react 16.5.2, okay?
For this course, react 16.5.2.
And we have all the commands, npm start right here and so on.
So we're interested in the directory called SRC.
That's where our search code for the react application lies.
It stays, okay?
So let's go to index.js.
And this is where the...
There's the injection of the react app using react-dom.render.
So there's this component called app.
It's like the overall app.
And then we got some stuff here, boilerplate.
So let's run the server to see what we get.
Going back to the terminal, we're going to say npm start
to start the development server.
So I did npm start.
It opened Chrome for me.
I don't want to use Chrome right now,
so I'm just going to close it and use Firefox.
Okay?
You can use whatever browser you like.
So it should open up a browser window at localhost 3000.
That's where your application is running at.
So let me go here and go there.
Oops, I created a new tab.
I want a new window, I want a new tab.
Sorry.
So this is the generated react application.
This is just the animation here with some text and a link
in a kind of dark background.
So we don't really care about this stuff.
We only care about the project that was generated,
so that's all good.
So that's great.
It's running and that's all we need to get started.
So I'll see you in the next lesson
where we're going to start writing things from scratch
and hooking up redux and so on.


fff6-02 Generating the Project with create-react-app

Installing Redux - Intro to Redux Saga

# Summary of Transcript

In this tutorial, the instructor demonstrates how to set up a React application with Redux. Here’s a concise breakdown of the key steps and concepts discussed:

## 1. Modify Source Code
- Open the text editor and simplify the app's source code.
- Remove unnecessary files (like `app.cs`) and retain only essential imports.
- Modify the `render` method to return a simple `<div>` for visibility.

## 2. Setup `index.js`
- Keep important imports like React and `react-dom`.
- Ensure the app is rendered into the DOM element with the ID `root`.

## 3. Install Redux
- Use npm command to install Redux: 
  ```
  npm install redux
  ```
- Discuss the need for setting up Redux store with reducers and how Redux connects to the React application.

## 4. Create Redux Store
- Import `createStore` from Redux.
- Define a simple reducer that takes `state` and `action`, and returns the current state.
- Create the store and assign it to a variable.

## 5. Use React Redux
- Install `react-redux` to bridge React and Redux:
  ```
  npm install react-redux
  ```
- Import the `Provider` component from `react-redux`.
- Wrap the application component in the `Provider` and pass the store as a prop.

## 6. Confirm Setup
- Open the browser to ensure the application loads correctly.
- Use the console to log props in the App component and prepare for using the `connect` function from `react-redux` in future lessons.

## Conclusion
- The session reviewed how to set up a React app with Redux, focusing primarily on store creation and using the `Provider` to connect the Redux store to the application. 
- Future lessons will delve into how to use the `connect` function to interact with the Redux state and dispatch actions.

---

This summary encapsulates the core aspects of the transcript while providing a clear outline for anyone looking to grasp how to integrate Redux into a React application.

Welcome back. So we got our app running. Now let's change some source code. Let's go back
to the text editor and then let's get rid of all the stuff that we don't need. So you
can delete the files like app.cs or whatever. You can delete the files or not or keep them.
What I'm going to do is just for the render function, render method of the app, I'm just
going to return just a simple div. I'm going to delete everything inside. All right. I
don't care about the class name. I just want to do right here. I'm going to type for it
at least so there's something there we can see. I don't care about the logo. I don't
care about CSS. But if you want to leave it there, it's okay. Just leave the import react.
We're going to need JSX and then the component to create a react component from react. That's
all we need. Define a react component class component extends component with the render
method that returns the template to that component. Okay, we got everything. Now let's go back
to index.js. There's a lot of stuff here. I don't care about this. But if you want to
leave it, let's just leave it there. We don't care about CSS here, but if you want to leave
it there, let's point. Let's leave it like this. We need react. Definitely need it because
we're doing JSX. We need the react DOM because we need to inject it into the DOM. Inject
the app if you want to leave the index.css. We free do so. I don't really care that we
for sure need to import app. And then there's this thing service worker if you want to have
to work rough line load faster blah blah blah if you want to leave it just leave it. Anyways,
you guys this react DOM render so it's going to grab the div or the element that has the
ID root in the HTML and replay and inject the react app there. Okay, so we're good here.
Now let's hook up Redux. So we're going to have to install some packages to do that.
So let's go here. I'm in the terminal. I'm going to go to a new tab in the project directory
for it's saga. I just cleared the screen of the command clear. So we're going to need
to Redux, right? So let's install it. npm install. Used to be that we need a dash dash
say we don't need it anymore. If you're using node I think since six. So I'm just going
to leave it out. But if you're not sure, just leave it. So we're going to do Redux. Okay,
the install Redux. Gonna take some time. So what we're going to do is I'm just going to
explain what we're going to do next. While it's installing, we're going to hook up create
the store with the reducers. Okay. And then we're going to inject that into the react
application, we're going to need later react Redux. But for the time being, let's just
go back to the code. I am index.js. So we're going to do first create the store. So running
port, create store from Redux. Okay, so we're going to need the function here creates start
from Redux. Okay. Now right here, after the imports, we're going to call create store.
Now create story needs the reducer. So we just could be it's just a simple function, right?
That the arguments is the state and the action. Right? So I can just write a simple reducer
right here. Also reducer is a function that takes state in an action. And you always return
a state, the new state, we can just return state for now. You don't really care about
the action yet. So this is the same simple reducer that just returns the state as is
without any changes. I can pass that to create store, right? That's the one way to create
a store. Now that's all good, we can assign this to a variable called this store. Then
now we have to somehow inject the store, make it available to the application. How can we
do that? What made to do that is using a knowledge or library called react Redux, react Redux
is like the bond, like you can bond bond between react and Redux. So there's a component there
called provider. It's a higher order component that you can use here to inject the store
into your application. So let's do that. Going back to the terminal, we are going to npm
install, react Redux npm install react dash Redux. So this guy has the provider higher
order component that will allow us to inject the store to our application. So it's going
to take a while here to install it. So app is going to go under the provider. Okay, we're
good. React Redux version 5.0.7. Going back to the source code. What we're going to do
is the following. Let's go up there. I'm going to import provider. Don't forget the braces.
All right. React Redux. So provider for react Redux. It's the higher order component that
we're going to wrap around the app right here. Right where you have a react down that
render, we're going to take this guy here. Let me break it into multiple lines. I'm going
to make a provider and wrap it around the app component. Okay, you can make it multiple
lines if you want. Now provider takes a prop and that's called store. So you can just pass
the store that you created here as the store prop. Let's do it. Good. Now let's save it.
Now we're not going to notice anything happening in the browser if you go there. Let's go to
the browser. You just get the fruit list, right? You see it automatically reloaded the app
because we're using create react app and it does all this nice stuff for us already. It's
probably using react web backdab server or some sort. Anyway, you don't notice anything,
but let's open a console here. I just want to open the console web console. Okay. To see some
stuff. Let me put the console dock to bottom. So the console is the bottom of the page. There's
nothing. So what we want to do is console log the props in the app component to see what's going
on there. So let's see. Actually, a little bit don't be anything, right? Because we just have
the store and in order for our app to be able to emit actions, we have to use the helper called
connect, right? From react redux. That's another helper from react redux called connect that we're
going to do to be able to access the state or to dispatch actions. Anyway, I think we're good for
this lesson. Let's just review what we did. So we started hooking up redux. And what we did was
the following. First, we need to create a store. So create stores from the redux package. So create
store requires a reducer. We just created for time being a simple reducer. It's just a function
that takes two parameters, the state and the action and returns a new state usually, we'll just return
the state the previous as this without any modifications. So create that store, right? But
how can we inject the store make it available to the app? Well, not make available but inject it
and somehow look it up. We use the provider hierarchy component from the react redux package.
All it takes is a prop called store with your store. That's it. And then you wrap around your
application component, you're good to go. Now the next steps will be in the next lessons,
we're going to learn how to use a connect from the react redux to be able to access the state and
to emit or dispatch actions. All right, so see you then.


fff6-03 Installing Redux - Redux Saga Tutorial

Setting up the Application State with Redux - Learn Redux Saga Tutorial

```markdown
# Redux Setup Summary

Welcome back everyone! In this lesson, we covered important steps for setting up Redux in our application.

## Key Points

1. **Defining Initial State**:
   - When using `createStore`, the initial state can be defined as the second argument.
   - Alternatively, you can utilize default arguments in the reducer to set an initial state (e.g., an empty object).

2. **Creating the Reducer**:
   - We defined a simple reducer function in a separate file (`reducer.js`) to improve organization.
   - The initial state was set to hold a list of fruits, structured as an array of objects.

3. **Connecting React with Redux**:
   - We discussed the `connect` function from `react-redux`, which allows us to map Redux state to component props.
   - The `connect` function takes two arguments:
     - `mapStateToProps`: A function to specify which parts of the Redux state should be accessed in the component.
     - `mapDispatchToProps`: (Optional) A function to dispatch actions.

4. **Setting Up the Application State**:
   - We created a simple structure for the application state, including an array of fruit objects with properties such as ID and name.
   - The reducer will return the initial state when no state is provided, allowing the application to handle state correctly.

5. **Next Steps**:
   - We will continue integrating Redux with the app, specifically focusing on how to access the Redux state in our components.
   - Future lessons will dive deeper into using Redux Saga and handling side effects.

## Conclusion
We successfully set up Redux in our application, defined the initial state, and prepared to connect our components to the Redux store. In the next lesson, we will complete the connection to access and display the application state.

Until then!
```

Welcome back everyone. For going on I'm here in the documentation for Redux for
the method createStore. We forgot to define a initial state so
obviously when you have the createStore you can define an initial state as the
second argument. Let's go back to the editor text editor. I'm going back to
index.js where we had the createStore. Right now if you look at the
reducer it's just pre-turning state but what is state? Actually,
you forgot to define the initial state. One way to do that you can put it as a
default argument right here. If state is undefined it will be an empty object.
That's one way. That's particularly okay commonly used when you have like a
reduced composition, multiple subreducers which are then combining two
one. Or you can just define the initial state to be just an empty object right
here as the second argument to the createStorm. Okay so that's just that
detail that I forgot to mention in the previous lesson. So make sure to set an
initial state right here or in your... default argument. Anyway, let's keep
going. So let's look at the steps where we are. So we generate the project using
createReactApp. We're good. SetupRedux. We did set up redux. So just can't access
anything yet because we're not using connect. Then we haven't done this part.
Actually, we have to kind of skip to the number four in order to be able to kind
of have redux set up all in good and to be able to test it if it's really
working. This course is not so much about redux. It's about redux saga. So I think
I'm going to kind of keep a little... not go too slow to set up redux. Alright, if
you don't mind. I assume you already have some previous knowledge of redux and
you're here just to learn how to use redux saga, the mirrorware. Anyway, so
going back to app right here. What we want to do is be able to access the state,
the application state, not the component state, the redux store, right? How can we
access that? So there's a helper called connect from react redux. If you don't
know about it, I assume you already know. You can always look at... look up at
documentation, react redux. It's always good to look back. In case you forget.
Where's that? The github page for react redux under the redux.js account.
Official react bindings for redux. Grid. Scroll down. We haven't installed it yet.
So let's look at the react redux site right here. Quick start. Provider
connects. So we already got provided as you can see. Now we're gonna do connect. So
we already did provide it with a store. Now there's the connect function we're
gonna do, right? So connect function, if you remember, it takes first argument
maps state to props and the second argument map dispatch to props. None of
them is absolutely required. You can pass null if you don't have... you don't want
to access the state and you don't have to specify maps dispatch to props if you
don't need to emit or dispatch any action. Okay, so let's keep going. I'm just
gonna close this. You go back to the text editor. So we are here in the app
component. So what we're gonna do is the following. We have to connect our app to
be able to access the redux state. I'm gonna go up in the bottom here. You're
gonna import, open and close curly braces, connect from react redux. But did we
install it? We haven't. So let's go to the terminal. Oh, actually we did. Sorry. We
already installed react redux. So we're good. Let's go back to Adam. We got
connect. Now go at the bottom when you export the component. You're gonna do just
connect. So connect is like something like what do you call it? Curing. So you
call connect first and it gives you something back and it's a function. And
that function you call it again and pass the component and that will give you the
component with all the... with the... for example, whatever you want to access in
the state in the maps state to props injected as prop props in the app
component. So let's do it. Let's do the following. Let's make a variable right
here. All maps state to props. So maps state to props gonna be the first
argument to connect. And this is just a function that takes one argument state
and returns an object. We're gonna return an object. This object will be the
properties that will be injected in app and you can access from the state. Okay.
So say we don't have it yet so we should add the fruits but let's just
leave it as is and let's do maps state to props right here. So we're gonna map
a state to props for app. Now we don't have anything so let's create it. Okay. So
what we're gonna do now right now is create the state for to hold the list
of fruits. If you remember our data structure like this. So we have an
array of objects. Each object is a fruit. Okay. So we're gonna keep in the
application state an array of objects. Let's call it fruits. Okay. So if you go
here. Sorry. Let's go to our index.js. Now the readjust is defined here.
Normally we would define in a different file to organize and maintain things
better. Let's just let's extract this to a file. Let's make a file right here.
Let's call it reducer.js. And then reducer.js is gonna have a reducer. So
this app is pretty simple. So let's just have one reducer instead of having
many. Okay. Does that sound good to you? So let's go to reducer.js and paste that
reducer. Now I'm gonna export default this guy. Actually you can do it right here.
Instead of doing that you do module exports is reducer. Let's see if that
works. So we have the reducer defined here. Then you export it as the whole thing.
Now going back to index it doesn't know what reducer is anymore because we
remove the definition. So what we have to do is go here and import reducer from
where is it? It's on dot slash reducer.js. You don't have to type dot.js if you
don't want. Like so. So we got that. Great. Let's test and see if nothing failed.
Notice I didn't save app yet so I did not save it so I won't get any errors just
yet if I did something wrong. Let's go back to react app in the browser. Let me
clear this. So we still have fruit list right there. So no problem right? Check
the terminal to see if your server doesn't have any problems. No problems.
Compile successfully. Great. Now what we have to do now is finally let's get back
to what we were doing before. Let's define the initial state here to have the fruits.
Now you can do it here or you can do it in the here. I'm gonna do it here because
it makes more sense to me and later as your app grows you can split into
sub reducers and so on. Half different initial states for each sub reduce.
Anyway let's define a variable right here. All an initial state and this is an
object that's gonna be have the property called fruits. Now for the time being
let's just copy the data we have here from our fake database. Okay what I'm
gonna do is for the following. I'm gonna copy this array objects right into the
reducer because it's fake data for the time being so we can know that we can
see that we hooked up, redux and everything as well. Typically this would
not be the case. You would initially have no fruits at all. You would have to make
HTTP request, obtain the data and then you set, you take that data and you put
it in application state right? Redux application state. Anyway I'm gonna
copy this. It's an array of objects. Each object has a property called ID and a
property called name. Let's go back to the reducer. I'm gonna paste it here okay.
Now since I had JSON the quotes don't matter here. It will be just fine. It's up to you to have it or not.
So look closely what we did an array of objects with ID and name properties. Just
fake data for now and that's going to be initial state of our application for the
time being. Now that's great. Now this variable you need to use it. It's an
object that will define the initial state. When it hits this reducer you're
gonna use the default value here initial state. Okay so when this reducer is hit
and the state is undefined it will take this initial state and return that. So
now to do this I think state will not be defined will be defined actually because we
define an index.js right here remember. So I'm gonna remove this. So it's gonna be
undefined okay. I'm gonna create star reducer with anything at all. Let's go
back to reducer here. So it seems like everything is okay. Let's save it. Now we're
good here. I think let's check if there's no errors in the browser. We're good and
then here in the terminal. Fine. Now I would like to for us to take a break right now
and before we go let's review what we did. So we are in the process of hooking up
Redux to our application. So back to index.js we had this great store. We had
forgot to set the initial state and we set it and we remove it again because we
already did. We isolated the reducer into a separate file and we define
this initial state for this guy with a property called fruits for the time being
it's gonna have some fake data right here so we can see later that the
everything went out well in our setup of Redux. It's an array of objects with
property ID and name. Good. Then we use it as the default value for the state
because initially it will be undefined. So we export it and we use it from
index to create the store. Now app is under provider that we're gonna go back
to app in order to be able to access that state that application state right. We
have to use the connect helper from the react Redux package. Now connect helper
takes as the first argument maps state to props. It's just a function whose our
argument is the state and then return some properties that will be injected
into the application. In this case that will be fruits. We're gonna do it in the
next lesson. Alright. Until then.


fff6-04 Setting up the Application State with Redux

mapStateToProps and Creating the FruitList component - Learn Redux Saga Tutorial

# Redux Setup and Fruit List Component Creation

## Overview
In this lesson, the instructor walks through setting up Redux to manage a list of fruits, demonstrating how to connect state to props in a React application and create a simple functional component to display the fruit list.

## Key Points

1. **Redux Overview**:
    - The course focuses on the middle area of Redux, assuming prior knowledge of Redux concepts.
    - A quick review of Redux principles is provided.

2. **Defining `mapStateToProps`**:
    - `mapStateToProps` is defined to access the `fruits` property from the Redux state.
    - The fruits can be accessed using `state.fruits`, which gets injected as a prop called `fruits`.

3. **Console Logging Props**:
    - A console log is added to the `random` method in `App.js` to verify that `fruits` is included in the props.
    - Observations about props in the console show that both `dispatch` and `fruits` are present.

4. **Connecting Redux State**:
    - The importance of properly connecting state to props is emphasized, and the instructor shows what happens if nothing is passed to the connection.

5. **Creating Fruit List Component**:
    - A new component called `FruitList` is created to render the list of fruits.
    - A stateless functional component is defined to take in props and return a template for rendering a list.

6. **Rendering the Fruit List**:
    - The `FruitList` component maps over `props.fruits` to create an unordered list (`ul`) of fruit names, assigning each `li` a key based on the fruit's ID.

7. **Importing and Using the Component**:
    - The `FruitList` component is imported into `App.js` and used to display the fruits.
    - The final output in the browser shows the fruits displayed correctly in a bullet list.

## Conclusion
- The instructor confirms the successful setup of Redux and creation of the `FruitList` component.
- A reminder to take a break before moving on to the next lesson is given.

Welcome back everyone. So I'm trying to go a little bit quicker here and setting up
Redux because I assume we already have some knowledge of Redux and this
course is not really about Redux but about the middle area Redux. Even though
I'm trying to go fast I'm trying to also let you know of everything and give you
a review of Redux if you don't remember things clearly. Anyway I don't want to
skip or step over things too fast. Let's keep going then. So let's define map
state to props right here. So right now if you look back at the Redux now we
have an initial property fruits with an array of objects. That's great. So we go
back to app.js. We define map state to props. Now I want to be able to access
the list of fruits using the property fruits. Could be any property name you
want. So how can I get the fruits? Well that's in the state right but the state
has is an object that has what the fruits property. So we can just say that
state.fruits. And that will give you the fruits. That's it. So this guy will be
injected as prop called fruits so we can access it with this prop.fruits.
Great that's good. Let's do a console log in the random method here for the app.
How about that? So under the random method put a console log and say this
prop props like so. We just want to know what's in the props for this given to app.
And we're gonna see we hope that fruits is there. Now let's save it. Notice the
console log is under render. Don't make the mistake of doing this. Alright. So
let's get back to the browser. So I already have my console right here at the
bottom. If you take a look there's this prop right the console log is an object
and you can see oh this object has two properties. The first property is called
dispatch which is a function. And this is a function that's used to emit actions
right, to reduce actions. And you can see also the fruits is here. So if you go
back to here that's from app state to prop. So you couldn't have pass null. What
happens if pass null pass nothing or nothing right. See what happens. So I
have nothing to connect the first set of parentheses. I'm gonna see what's
happening here. You'll see the average only has dispatch now. So connect added
the prop dispatch so we can dispatch actions. Now I'll go back to add on here.
I'm gonna revert and add the map state to props there. So we can see finally
finally the fruits we can access it using this prop's dot fruits right here. See
Apple origin strawberry. That's great. So we hooked up redux successfully.
Great. Anyway let's keep going. So that is great. So we hooked it up successfully.
Now we want to be able to pass it to the list of fruits. Now we kind of wanted to
do the step by step. But let's do step four right here right now. How about that?
But using fake data. So in place of this fruit list we're gonna make an actual
fruit list component. So we're gonna call it fruit list like so. And then we're
gonna pass a prop right. I'm gonna say fruits. And I'm just gonna pass this
props to this props that fruits. That's it. But we have to define this component.
So let's do it as our secret new file got fruit list.
fruit list.js in capital case. Let's make this guy a stateless functional
stateless functional component because we don't really care about keeping state
and it's pretty simple. Okay. How about that? So let me make a function.
call it fruit list. So function that takes first argument props. And then you
return the template for this guy. So this is a stateless functional component.
It's very simple. It just takes one parameter called props and the return is
actually the render equivalent to the rendered function. Right. We're just gonna
return the ul on our list. And we're gonna map props.fruits. We're gonna generate for
each fruit li component. Okay. So a fruit. We're gonna return li component.
With the fruit.name. Since we are doing map react will warn you you need a key. So let's
use the fruit ID as the key. Now it's all good but we have to always import react from react
because we're using jsx right here. And okay. Now finally if we export you can just
default if you want the fruit list component. Okay. So let's review what we did here. So we
created a component just just a function that props. That's the props it receives as the first
argument. So we return a template with a ul. Now we want to generate li component element or
component for each fruit. So fruit is given as props props out fruits. So for that we use
the map function that would take every fruit and generate a list right with li's. Now we use a key
the fruit ID as key because otherwise react will complain about not having key. And we use the fruit
name as the actual content of this element. Notice I'm using many shorthands of ESX so here
you don't really need the parenthesis. It's optional if you only have one argument. Here too
same thing okay. And here is an implicit return. I don't have the keyword return but it's implicitly
because it's a narrow function and I implicit return an li. Okay. It's actually
same as this guy. All right. Anyway probably know that or not. Let's save this though that's great.
Looking good this fruit list component very simple. Let's go back to app. Now we using fruit list here
past the fruits as prop right. But we need to import it because it's saying it's not defined. So let's
do it. We're going to go up here before I touch it. Yes. So whatever import fruit list from
dot slash fruit list because it's in the same directory.
That's great. Let's test it out. Go back to the browser. So now you can see apple orange
is strawberry in a bullet list. That's great. Everything worked fine. So we have finished this
lesson. We hooked up the maps day two props and we successfully created the fruit list component.
Okay. So let's take a break and I'll see you in the next lesson.


fff6-05 mapStateToProps and Creating the FruitList component - React Redux Saga Tutorial

The Three Actions: Requested, Succeeded, Failed - Redux Saga Tutorial

# Summary of Transcript

In this session, the speaker focuses on setting up a fake back-end API in a React project using Redux Saga to manage application state. Here’s the step-by-step outline:

## Setting Up the Fake API

1. **Create a new file**: `api.js` in the `src` directory.
2. **Define `findAll` function**:
   - Use a constant variable and an arrow function.
   - Export the function for external access.
   - The function returns a promise that resolves with a hard-coded list of fruits after a delay.

3. **Simulate a delay**:
   - Utilize `setTimeout` to mimic an HTTP request delay of 2 seconds.

## Integration with the React Component

1. **Fetch data on mounting**:
   - Add `componentDidMount` lifecycle method to the main React component.
   - Dispatch an action to fetch the fruit data instead of calling the API directly.

## Define Redux Actions

1. **Create actions**:
   - **fetchFruit**: the main action to initiate the fetching process.
   - Define three states:
     - `fetchFruitRequested`: When the request is made.
     - `fetchFruitSucceeded`: When the data is successfully received, updating the state with the fruit list.
     - `fetchFruitFailed`: Handles error cases where the request fails.

2. **Action creators**: 
   - Functions that return action objects to dispatch actions.
   - `fetchFruitRequested` can be dispatched in `componentDidMount`.

## Using Redux Saga

- Explain the need for Redux Saga to handle asynchronous actions:
  - Dispatch `fetchFruitRequested`, wait for the response, and then proceed based on whether the fetch was successful or not.

## Next Steps

- The session concludes with a hint that action creators will be further explored in the next lesson.

This structure lays the groundwork for implementing a Redux Saga-based solution to manage API calls and application state effectively.

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.


fff6-06 The Three Actions: Requested, Succeeded, Failed - Redux Saga Tutorial

Dispatching FETCH_FRUITS_REQUESTED Using an Action Creator - Redux Saga Tutorial

```markdown
# Summary of Action Creator Implementation Lesson

In this lesson, the process of creating an action creator to dispatch the `fetch fruits requested` action is explained. Below are the key steps and concepts covered:

## Steps to Create Action Creator:

1. **File Setup**: 
   - Create a new file called `actions.js` under the `src` directory.

2. **Action Creator Definition**:
   - Define the action creator function `fetch fruits` that will return an action object containing a type property (e.g., `type: 'FETCH_FRUITS_REQUESTED'`).
   - Export the action creator function.

3. **Using `mapDispatchToProps`**:
   - In the component, use `mapDispatchToProps` to automatically dispatch the returned action when `fetch fruits` is called.
   - The function will be added as a prop to the component using ES6 shorthand.

4. **Connecting to the Reducer**:
   - In the reducer file, log actions to the console to confirm they are being dispatched correctly.
   - Optionally log the current state to inspect it.

5. **Initial State Handling**: 
   - Suggest removing hard-coded fruits from the initial state in the reducer to indicate that no request has been made yet. The initial state can be set as an empty list or `null`.

6. **Loading State**:
   - In the component, implement a loading message that displays when the fruits data is not yet available (i.e., before the request has been made).

7. **Future Work**:
   - The next steps will involve making the API request to fetch fruits and handling success and error actions accordingly.

## Conclusion
By following these steps, the action creator is integrated into the application, enhancing its ability to manage state effectively using Redux. The lesson encourages further exploration of error handling and loading states in the next session.
```

Welcome back. In this lesson we're going to make an action creator to dispatch the
action fetch fruits requested. So let's get started. Let's create a new flyer
here called actions.js under the src directory. So let's create an action
creator to send to dispatch that action that we did here in the component
did mount. So we don't want to do this props dispatch here instead we just want
to call like so we're going to do this prop dot fetch fruits. We just want to
call this function here that's going to be an action creator a bound action
creator by the way. So let's go to actions.js I'm gonna cut this here from
here and then place it into actions. Now we're going to make a function here
let's call this function fetch fruits. Now this function is going to be simply a
function that returns an action. An action is just a plain object with a
type property and option the other stuff like a payload. So just as we're going to
cut this guy here just going to return it. Okay we don't have to do this
batch in this case because what we're going to do is we get this guy don't
forget to export by the way and I'm just going to leave the actions like a
string like so typically in the working production in a real world it would put
this guy into a constant all the kind of stuff but I just keep things simple I'm
just going to leave it as a string. So that this batch is going to be
automatically called with this action here that's returned from this action
creator if we go here in the app and go down there and we add to the connect a
second argue called the map dispatch to props. Now this map dispatch to props
that you define right here map dispatch to props we're going to simply return
going to be simply an object okay and doesn't read it's just an object not a
function in this case so we can have bound action creators that automatically
when you call there call them dispatch is going to be called with their return
return action so we're going to first do the following we take this guy we
import it from app.js up there you do an import forget the braces fetch fruits
from actions dot slash actions now we take this guy and we have to somehow
inject it in app to do that indirectly using map dispatch to props so we put
fetch fruits here this prop inside the app is going to be referring to fresh
fruits that was imported okay this imported function is going to be called
fetch fruits inside the app as a prop now since the property name and the
property value is the same using ES6 shorthand you can do just like so now
this guy is going to appear as a prop inside app and then we can call it like
so but when we call it right it's going to do what well this function simply
returns an object but we have to dispatch this action so it's going to be
dispatch is going to be automatically called for us because we're using the
map state map dispatch to props in this manner okay so it's called the bound
action creator if you want to know more about it in the Redux documentation
anyway with that we can verify that the action is being called doing like
following let's say this file then we're going to go to the reducer file
reducer.js and what we're gonna do here is the following here inside the
definition for the reducer we're going to make a console log and then we're
going to console log the action. Let me just say something here an action was
dispatched just this message so we know okay so we got an action in this root
reducer right if you want to get access to the state here you can also do so
you know console log let me do another one just so you're curious current state is
your map state is state let me put it here great now before we move on I also
would like to remove this these fruits from the initial state actually I'll
leave that for later okay so let's hold up on that for a little bit leave it
there we just want to know if the action is being called so let's get save
everything now let's go back to our browser where the app is running let's
open the console what's going on web console sorry so I'm gonna clear and
restart refresh so you can see there's some console logs here an action was
dispatched and then the action now redux dispatches some action in the
initialization it seems but we don't really care about that current app state
is this we should see the initial state has three objects that's correct for
now and then if you look at it it's going to be the this web props of the app
you can see that patch fruits now appears as a prop for the app component and
it says a function by an action creator you see it's a bound action creator okay
and then we have an action was dispatched because in the component did
now remember of object of type that fruits requested so we got it so it's
working fine the action is being dispatched with the type of that fruits
requested that's great so we're good for now all right so let's get back to our
code so so let's get started hooking up the initial state and then work out all
the other stuff so let's continue here let's first remove out this hard coded
fruits from the initial state of the reducer because we don't have any fruits
you can either put an empty list or you can put no to signify you have not you
haven't made any requests yet so there's no fruits it's up you to choose which
one if you choose to use a empty list there won't be any problem in the app.js
if you can see here but if you choose no it's gonna have some issues right because
props.frutes and snow and you're trying to map over a no value and that's not
possible I kind of like that because I can see that haven't made the request so I
can indicate that still in the loading state here let me put you can do it for
fruit list or from app I'm gonna do it from app up to you so let me put
something here so I'm gonna in the app.component I'm gonna put an if
statement right here saying if props this.props.frutes you can say like so
if it's not defined if it's undefined or no or falsely value right we're gonna
return a div with a loading message loading list I'm say loading fruit list
three dots let's see what we get
so it's always gonna be like that forever even though we made a we then
made it in regress right so you can figure out your own way of dealing with
loading messages and with errors anyway so that's that so I leave it as no
in the reducer and I put a check here and just return the loading message in
case fruits not defined auto because we cannot map over a no value
so what's left to do is we already dispatched the action patch fruits using
the action creator it's gonna dispatch the action patch fruits requested
remember that we have to make the request we're gonna go call find all and
then on success you have to dispatch yet another action succeeded so we can
update the application state right if there's an error you have to send them
action dispatch the action patch fruits failed with an error message so let's do
that in the next lesson how about that see you then


fff6-07 Dispatching FETCH_FRUITS_REQUESTED Using an Action Creator - Redux Saga Tutorial

Applying the Redux Saga Middleware

```markdown
# Redux Saga Setup Guide

Welcome back! In this lesson, we will set up Redux Saga following our previous Redux setup. 

## Overview
- **Redux** is used for application state management, particularly for handling asynchronous actions like HTTP requests.
- We will need middleware to handle actions, allowing us to manage the asynchronous nature of these operations correctly.

## Steps to Set Up Redux Saga

1. **Install Redux Saga**:
   - Check `package.json` for existing dependencies and install Redux Saga via terminal:
     ```bash
     npm install redux-saga
     ```

2. **Configure Redux Saga in Index.js**:
   - Open `index.js` where we set up the React app and Redux store.
   - Import `createSagaMiddleware` from Redux Saga and apply the middleware.

3. **Apply Middleware**:
   - Create a variable for the Saga middleware:
     ```javascript
     const sagaMiddleware = createSagaMiddleware();
     ```
   - Use `applyMiddleware` from Redux to attach the middleware to the store:
     ```javascript
     import { applyMiddleware, createStore } from 'redux';
     ...
     const store = createStore(reducer, applyMiddleware(sagaMiddleware));
     ```

4. **Run the Sagas**:
   - We will define a `sagas.js` file and import it into `index.js`:
     ```javascript
     import { sagas } from './sagas';
     sagaMiddleware.run(sagas);
     ```

5. **Create Sagas.js**:
   - Create `sagas.js` where we will define all our saga generator functions.

## Summary
- We imported `createSagaMiddleware()` and applied it as middleware in the Redux store.
- Remember to define and run the sagas in the next lesson.

See you next time!
```

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.


fff6-08 Applying the Redux Saga Middleware

Root Saga and Generator Functions - Learn Redux Saga Tutorial

# 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
1. **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`.

2. **Fixing the Error**:
   - The error is resolved by creating the generator function.

3. **Using the `yield` Keyword**:
   - Use the `takeLatest` effect from Redux Saga to listen for a specific action, `fetch fruits request`.

4. **Handling Actions**:
   - Define another generator function `fetchFruits` that will process the action received.

5. **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:

```javascript
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.

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.


fff6-09 Root Saga and Generator Functions - Learn Redux Saga Tutorial

Declarative Effects: CALL and PUT - Learn Redux Saga Tutorial

```markdown
# Summary of the Redux Saga Implementation Lesson

In this lesson, we continue building a saga to fetch fruits using Redux Saga. Here’s a breakdown of the key points discussed:

## Overview

- **Component Lifecycle**: We begin in the `componentDidMount` lifecycle method where we call `this.drops.fetchFruits`, which is a bound action creator that dispatches the action `fetchFruitsRequested`.
- **Middleware**: The middleware listens for the `fetchFruitsRequested` action type and triggers the generator function `fetchFruits`.

## Debugging and Logging

- A console log is added to the `fetchFruits` generator function to verify that it's called when `fetchFruitsRequested` triggers. Logs confirm the function is executed.

## Making an API Request

- **API Function**: We introduce the `findAll` function to make a request to fetch fruits, which is imported from `api.js`.
- **Promise Handling**: Since `findAll` returns a promise, we need to handle it appropriately. We do that using Redux Saga's `call` effect, which is used to call functions.

## Using Redux Saga Effects

- **Call Effect**: We illustrate how to use the `call` effect from `redux-saga/effects`. This provides the middleware with an instruction to call the `findAll` function.
- **Yield**: The function uses `yield call(findAll)` to suspend execution until the promise resolves.

## Handling Results

- Upon successful resolution of the promise, we prepare to emit a success action:
  - We use the `put` effect to dispatch the `fetchFruitsSucceeded` action along with the fetched fruits as payload.
  
## Conclusion

- We summarized our learning about two key effects: `call` (for calling functions) and `put` (for dispatching actions).
- The lesson emphasizes the separation of concerns where the middleware handles the execution of functions rather than executing them directly in the sagas.

## Next Steps

- In the next lesson, we will continue exploring the implementation details of Redux Saga.
```


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.


fff6-10 Declarative Effects: CALL and PUT - Learn Redux Saga Tutorial

Handling the FETCH_FRUITS_SUCCEEDED action - Learn Redux Saga Tutorial

```markdown
# Summary of the Transcript

## Overview
The discussion revolves around implementing a Redux Saga to manage asynchronous operations for fetching a list of fruits. The speaker explains the use of generator functions and how to handle asynchronous actions in a Redux application.

## Key Points

1. **Generator Functions**: 
   - The speaker highlights the importance of the `yield` keyword in generator functions. The process involves yielding a call to the `findAll` function, which is asynchronous and will wait for the promise to resolve before proceeding.

2. **Action Dispatching**:
   - Once the promise resolves and the data (list of fruits) is returned, an action `fetchFruitSucceeded` is dispatched with the payload containing the list of fruits.

3. **Reducer Implementation**:
   - The speaker explains how to handle the dispatched action in the reducer:
     - A switch statement checks the action type.
     - If it matches `fetchFruitSucceeded`, it returns a new state with the list of fruits from `action.payload`.

4. **Error Handling**:
   - The speaker encounters a compilation error due to missing a default export in the Redux reducer. A temporary workaround is discussed, including the need for Babel presets to support the object spread operator.

5. **Asynchronous Flow**:
   - The speaker outlines the flow from the initial action creator `fetchFruits` to the Redux saga intercepting the action and calling the asynchronous `findAll`. 
   - Upon promise resolution, the saga dispatches the `fetchFruitSucceeded` action, which updates the state in the reducer, resulting in a UI update.

6. **UI Reflection**:
   - Once the state is updated with the fetched fruit list, the UI reflects this change, transitioning from a loading state to displaying the fruit list.

## Conclusion
The lesson wraps up by reiterating the entire flow from the action creator to the final state update and the UI rendering, emphasizing the interconnectedness of Redux, Saga, and asynchronous operations.
```


Welcome back everyone, let's get, let's continue what we were doing before.
So before, so we were doing this call to find all.
This is great.
But the thing is, remember generator functions will look for the yield keyword and that's
when you call next, it's going to go all the way to the, it's going to execute everything
up to the yield keyword and then it's going to yield that back.
We don't, we should have a yield keyword in line seven here actually.
So we're going to do it the following way.
So we're going to yield the call to find all so that the middleware will come here and
find yield.
Okay, so I'm going to suspend this function execution here.
We're going to make this call and since it is an asynchronous call, it's going to wait
until this promise is resolved before going forward.
So wait for this guy.
If it succeeds, it takes the value resolved by this return promise and assigns it to the
variable fruits.
Now that value is going to be the list of objects, list of fruits.
Now after that, it's going to go to the next yield statement because the middleware keeps
calling the, to execute the function, right?
So it's going to go to the next yield.
Okay, and it's going to take the instruction to put to dispatch an action.
We're going to dispatch the action fetch fruit succeeded with the payload fruits.
So that's great.
With this, all we have to do now is handle this action in the reducer.
So let's do that.
Let me save this, go back to the reducer file.
And here in the reducer, we are going to do a switch for the action type.
Okay.
And then what we're going to do is case that fruits was succeeded, right?
We are going to do the follow.
We are going to return a copy of the state with the fruits now coming from action. payload.
If you want to add a default switch, it's fine.
I don't really care much here.
It's expecting a default.
You can add that to is just going to be the state as is.
So we don't really need this guy.
Anyway, so in the reducer, once it gets an action and that action is fetch fruit succeeded,
it means it needs to update the state.
Now fruits is going to be the action payload.
Okay.
And who made it this action?
It was the redux saga middleware, right?
Remember?
Anyway, let me save this.
I'm going to go to Firefox and see what's happening.
Fail to compile.
The user does not contain the default expert.
What happened here?
Switch.
What's going on?
Let's see.
That's the read the error.
The template import error.slashReducer does not contain the default expert.
See, so it's saying that does not contain the default expert from the index.js.
Port reducer from reducer.
Switch.
Action type.
Case this guy.
Return.
fruits.
Could it be this guy that it doesn't have yet?
Let me just try this.
Maybe it does not have support for the triple dot.
Return object to assign.
New object.
Copy from state and copy from this object fruits.
Action dot payload.
Let's try that out.
There you go.
It seems like I don't have support for the triple dot here yet.
I have to add a Babel preset and a Babel preset to the project.
Anyway, you probably have it if you know what I'm talking about.
Babel preset to add this feature that's not in ES6 but beyond.
Anyway, what I did here is the following.
I create a new object, copy the properties from state into the new object and copy this
new object fruits with the list of fruits into that object and return this new state.
Equivalent of this if you have this triple dot transform, Babel transform that transpiles
this.
Okay.
So what happened here?
We have our list, right?
Let's refresh.
You see loading there?
Takes two seconds to load.
So let's clear this and try again.
Look at the log.
So an action with dispatch from Redux.
We don't care.
Current app state is fruits null.
And it does the console log with the props of the app.
We don't care.
So an action was dispatched and that was the fetch fruits request, right?
And then fruits is still null.
And then another action was dispatched.
Fetch fruits succeeded with a payload.
Look at that payload.
It's an array of three objects, the apple, orange, and sorbet fruits.
Great.
So it updates the state after getting this succeeded action in the reducer and returns
its reflex in the UI.
That's great.
Let's review what we, how it all happened.
So starting from app.js when it mounts, we call the action creator fetch fruits.
This action creator is bound.
So it will dispatch the action returned by the action creator, which is fetch fruits
requested.
Now the saga is listening for the fetch fruits requested and intercepts that and it say,
okay, I'm going to take this, the latest action with this type, with the take latest
effect.
And I'm going to call this fetch fruits generator function.
And it passes the action here as done argon.
If it goes through and it goes calls, find all, gives an instruction to the middleware
to call the find all method, which returns a promise.
Now this fetch fruits function will be suspended until find all resolved with a value.
Now that value will go into the variable fruits.
Then when this guy is assigned a value, it's going to the next line with the put declarative
effect.
This is an instruction to dispatch an action.
Saga middleware dispatches the fresh fruits succeeded action with the payload as being
the fruit list, the list of objects.
Then that's it.
It reflects there in the reducer when it gets the fetch fruits succeeded action returns
a new state with the fruits now being the action payload, which in turn is reflected
in our app.js render function.
Because we are taking the fruits as props, state of fruits and that changes from null
to a list with three elements that causes a re-render, render is called again.
Now this dot props dot fruits is no longer null.
So this loading message will not appear.
Instead we're going to get a fruit list with the list of fruits.
Okay, so that's it for this lesson and until the next one.


fff6-11 Handling the FETCH_FRUITS_SUCCEEDED action - Learn Redux Saga Tutorial

Handling the Loading State with a Flag - Learn Redux Saga Tutorial

```markdown
# Summary of Transcript

## Overview
The discussion focuses on enhancing the application by implementing a loading state and error handling for fetching fruit data.

## Loading State Implementation
1. **Initial Loading Logic**: 
   - Currently, the loading message is displayed when `fruits` is `null`. This is not sufficient as it doesn't account for other scenarios where requests may still be in progress.
2. **Introducing a Loading Flag**:
   - A `fruitsLoading` flag will be added to the reducer's initial state to manage loading status.
   - The flag will be set to `true` when a fetch request is initiated and reverted to `false` upon success or failure.
3. **Reducer Modifications**:
   - Modify the reducer to handle the `fetch fruits requested` action:
     ```javascript
     // Reducer Example
     case 'FETCH_FRUITS_REQUESTED':
       return {
         ...state,
         fruitsLoading: true
       };
     ```
   - Reset the flag after a successful or failed request.

4. **App Component Updates**:
   - Adjust the application to check both if `fruits` is defined and if loading is ongoing with:
     ```javascript
     this.props.fruitsLoading
     ```
   - Update `mapStateToProps` for accessing the new loading property.

5. **Testing the Loading State**: 
   - Setting the initial `fruits` state as an empty array allows the application to correctly transition from loading state to normal operation.

## Error Handling Implementation
1. **Simulating API Failures**:
   - The API fetch function needs to account for failures by rejecting the promise instead of resolving it:
     ```javascript
     // Simulating an error
     return Promise.reject(new Error("Failed to fetch fruit data"));
     ```

2. **Effects of Errors**:
   - If an error occurs during the fetch process, the application gets stuck in the loading state, leading to unhandled errors in the saga function.

3. **Next Steps**:
   - The next lesson will focus on proper error handling techniques to manage such failures effectively.
  
## Conclusion
The enhancement of the application involves better management of loading states and robust error handling strategies. This will improve user experience and application reliability.
```


Welcome back.
So we got the fetch fruits okay for the succeeded case.
We should do a little bit more about the loading state and then error handling.
Let's start with the loading state.
Right now currently it relies on the fact that fruits is initially no in order to show
the loading message.
That might not always be the case.
So what we have to do is when we make, when we dispatch fetch fruits requested that means
that the request is pending.
So that means we have to tell, we have to have an indicator, a flag saying that the request
is currently pending and we can then also use that to display the loading message.
In case that fruits is already defined but somehow we made a request to load it again
or fetch a new list of fruits.
So we need only add a property with the pending or loading flag to the reducer here.
If you go to the reducer then in the initial state you add a property called say I don't
know, fruits, pending or loading whatever name you want to call it.
Let's say fruits loading.
Let's say it's initially false because we don't have any request to start with.
But the moment we make the request that is when we have the fetch fruits requested action
time that's when we set fruits loading to true.
Then if the request succeeds or it fails we set it back to false.
So here it's going to be pretty simple in the reducer.
You're going to handle another case.
If you get fetch fruits requested all you have to do is return the copy of the state.
Let's do object assign, object assign, create an empty object, copy from the state.
Then fruits loading you set it to true.
Okay, notice this is in the reducer.
It's not in the saga, right?
So the moment we dispatch this action, first it goes through the saga because it's a middleware
and does the HTTP call to find all.
Then it goes here and then it's going to set fruits loading to true.
Then when we succeed then you set it back to false.
Fault loading is false here.
We put it in a new line.
You can see better.
Okay.
Then we can use this property in the app.js if you go back there.
Notice we have this check if fruits is null.
It's not defined.
We can also add or right here this.probs.fruits.still loading.
We keep displaying the loading message.
In order to be able to access fruits loading from the application state you have to go
down there to map state to props and add the fruits loading property which comes from where?
From state.fruits.loading.
Okay.
That's it.
We have access to fruits loading.
To illustrate this working we can, to illustrate that this is actually working, we can set
the fruits list in the reducer initial state.
Instead of saying no right here for the fruits you can set it to an empty list.
So that will be defined.
Then the app is going to check for the second condition because the first one is going to
be what?
This is going to be empty array which is defined.
Then it becomes a false value and then it's going to check the second one fruits loading.
So let's see how it goes.
You can see it loading fruits and it did it.
Okay.
And you can see here in the console log for the this.props you can trace it back and you
can see that the first one here this props console log from the render function of the
app component gives fruits loading files initially.
Then it makes a request for the fruits.
Then it changes fruits loading from false right to true.
Here there's the props and then at the end when we get the succeeded action it changes
you can see there's the props fruits loading back to false.
So we don't have that loading state anymore.
Okay.
And that happens here after succeeded.
So let's go back here.
That's what we did.
Now the second thing we have to do is to handle the error.
For example if you go back to your API.js we're always resolving the promise here for
find all with a value but that might not always be the case right because requests can fail.
So let's simulate an error instead of resolving I'm going to comment this out I'm going to
do reject.
And I'm going to create a new error.
I'm going to give this message to this error saying that failed it failed to fetch fruit
data could be any message you want.
Okay.
So this is going to simulate a error from the find all.
So it's like we failed the request after two seconds.
Now let's see what happens in that case.
So we get a loading state that never it gets stuck right never gets out of the loading state.
Then we get this uncought at root saga root saga at the method fetch fruits.
So there is a narrow that was not caught in our saga function generator function.
And that's what we're going to learn in the next lesson.
We're going to learn how to implement error handling.
See you then.


fff6-12 Handling the Loading State with a Flag - Learn Redux Saga Tutorial

Handling the FETCH_FRUITS_FAILED action - Learn Redux Saga Tutorial

# Lesson Summary: Handling Errors in Redux Saga

In this lesson, we learn how to handle errors in a Redux Saga, specifically for the `patchfruits` operation.

## Key Points

1. **Simulating Errors**:
   - The `findAll` function is modified to always reject with an error after 2 seconds to simulate a problem from a fake API endpoint.

2. **Error Handling with Try-Catch**:
   - Use a `try-catch` block to handle errors when calling asynchronous functions in Redux Saga.
   - The code will attempt to execute the statements in the `try` block, and if there is an error (promise rejection), it will immediately skip to the `catch` block.

3. **Dispatching Error Actions**:
   - When an error occurs (e.g., through promise rejection), dispatch a `fetchFruitsFailed` action that includes the error message in the payload.
   - Use `put` to create an instruction to dispatch this action. Ensure to use `yield` to correctly handle generator function execution.

4. **Reducer Update**:
   - Update the reducer to handle the `fetchFruitsFailed` action. Create a new property in the state to store the error message.
   - Set initial state for the `fruitsError` to null, and ensure to reset it when a new fetch request is initiated.

5. **Displaying Errors in the UI**:
   - Map the `fruitsError` state to props in the application component so that it can be accessed in the UI.
   - If there’s an error, display a relevant message on the UI. This ensures that users are informed about issues during fruit data fetching.

6. **Example Output**:
   - Upon simulating the fetch request and receiving an error, a message like "There was a problem: failed to fetch fruit data" will appear in the UI after 2 seconds.

## Conclusion

By incorporating error handling using `try-catch` and dispatching appropriate actions via Redux Saga, we ensure our application responds gracefully to errors while providing meaningful feedback to users. 

Thank you for attending this lesson, and stay tuned for the next one!

Welcome back everyone. In this lesson we are going to learn how to handle the
patchfruits failed action and learn how to deal with an error. So looking here at
Osaga just before going there, remember that the find all we modified it so it
will always reject with a new error after two seconds to simulate a problem
from this fake back end, fake API endpoint. So going back to the sagas.js file,
let's take a look at the patchfruits handle Osaga here. So we make a call to
find all. So the middleware is going to suspend this function, the execution, and
will wait until this guy resolves, this promise resolves, and once it does it will
assign the value to the variable fruits. Now this guy, if this promise is not
resolved but rejected, that is there was a problem, ReduxSaga will cause this to
emit or throw an error here in the generator function. Now to catch that
error you need to use the try and catch block. To do that you enclose everything
you want to do in a try block, then you add a catch right after the try, like so.
Oops, don't need the error here. So it's going to try to do these statements. If there is any
problem, that is if in this case this promise rejects, it's automatically going to throw an error
right here. Then because an error was thrown, it's going to go immediately to the catch block.
Everything else will be skipped, then it's going to go execute the commands in the catch block. Now
if something happens in the call to find all, in our case we changed it so it rejects with
an error, that means the request failed. In that case we have to emit an action called
fetchFruitsFailed and we have to let the user know there was a problem and what the error message was.
To do that we're going to simply do the following. We're going to dispatch an action with put and
this is going to be of type fetchFruitsFailed. Now we need to let the user know the specific
problem. The error is an error object. This error variable is an error object. To get that message
that we made failed to fetch fruit data, we need to say error.message. So let's go back to Saga.
As a payload I'm just going to pass the error.message. So that's going to give us that message. Now
what we're going to do when we dispatch this. Now you have to always keep adding u's, don't forget,
because we deal with generator functions. So reduxsaga is going to remember generator functions
when we call that generator function we got a generator object. Then from the generator object
you keep calling that .next method and that will keep executing every next yield statement. So that's
why we always need to add the yield otherwise it will not know when to stop and take the next command.
So make sure you remember to add the yield there. So reduxsaga is going to look at this
declarative effect called put that merely we give it. This guy returns an object with an
instruction to dispatch an action. Now reduxsaga is responsible for taking this
instruction and making executing the actual command the actual statement of dispatching
in action. So we use that and then we get an error message and that's pretty much it.
Now we have to handle this guy. We're not done yet because all reduxsaga does is in this case
is just emitting or dispatching the action. Now we have to handle the state with the reducer.
We still have to do that. So let's go back save this file go back to src slash reducer.js. Now here
add another case. Now this other case is going to be to handle the fetchFOOTSFailed action
type. Now we're going to return the same thing make a copy of the original state
into an empty object. You can use the triple dots if you have the babapreset or a setup. I don't
have it so I can't use it anyway. So I'm going to copy the properties from the state. Then I'm
going to add a new property with the third object here. We're going to say that the fruits you have
to say give a variable to store the error here. So you can define a property to start the error.
Let's call it error and I'm going to take that error from the action.payload. Remember we did
dispatch from the reduxsaga implementation that's saga to dispatch the error message as the action.payload
and we're going to assign that to the property called fruits error.
Just as a note if it happens to fail that also means that fruits is no longer loading so you
have to actually also do fruits loading false. So with that let's actually define some initial
value for fruits error in the initial state. How about that? If you go up here just so we can add
fruits error let's make a note because initially there will be there will not be any error.
So if there's an error it's going to set from null to the string of the error. Now this is nice but
we have also to take care to reset that error if we happen to make a new request because we don't
want to keep displaying that error message every time to the user even though you try to make a new
request. So when you make the request fetchFruit's request then make sure to also clear out the error
message because there will be there will not be any errors yet when you make the request only when
you obtain the response. So you have to save fruits error null here to reset the error every time.
Okay how about that? So that's great now we have to make this guy available to our application
our component called app. So let's go to app now in order to use that value we have to go to map state
to props right to be able to say here in map state to props on the new property called fruits error
and this property is going to show up as this dot props dot fruits error for the app component.
Now how can we get this value that's from the state the application state the reduct store
dot fruits error okay it just so happens that the same name here and there but this is the
actual prop name that's going to appear it could be anything I would refer to the state
of fruits error anyway so we got that that's great now let's go back here and we need to show some
message right in case there was an error now I'm going to add a new if statement at the top
and I'm going to say if this dot props dot fruits error so fruits error is a string but if the
string contains actually fruits errors initially no so we only want to display the error message
if this value is not no that means it it has to be a string with an error message that's not length
zero right because an empty string is actually a falsely valid anyway so let's hope there let's
make sure there's all the error there if there is an error if this string is defined we have
to return some sort of error message in the UI to keep things simple I'm just going to display a
simple message saying there was a problem there was a problem and then I'm going to put a let me
just make this into multiple lines I'm going to use the actual error message to be more specific
about the problem I put a br here to break the line and I'm going to say this dot props dot fruits
error there remember you need the braces to substitute the value here so that it's going to say there
was a problem with the problem description the error okay so let's test it out let's go to firefox
you can see if you refresh takes two seconds and then it says the message there was a problem
failed to fetch fruit data and if you look at the trace from the console logs you can see
it does dispatch the fresh fruits requested then after some time after two seconds it gets another
action was dispatched and that's fetch fruits fail that's the redux saga doing its work remember
it it caught that error that was thrown from the promise returned from find all find all returns
a promise but that promise was rejected with an error because of that redux saga throws an error
in that generator block that function generator block because we use a try catch block it's gonna
go right to the catch block from that part if you look back here so we were here call this guy
throws an error so because there was an error it goes to the catch block skips everything else in
the try and then it emits an actual call fetch fruits failed with the error message as the payload
and you can see right here that that was indeed the case an actual was dispatched and then finally
it changes like you can see the this dot props of the app that now fruits error is a string with
the error description okay so that's error handling with redux saga
so that's it for this lesson and thank you for watching and until the next one


fff6-13 Handling the FETCH_FRUITS_FAILED action - Learn Redux Saga Tutorial

Course Review & Conclusion - Learn Redux Saga Tutorial

```markdown
# Course Conclusion and Overview

Congratulations on completing the course! In this lesson, we'll review what we've learned throughout the course, particularly focusing on the integration of Redux Saga with React for handling asynchronous actions.

## Key Takeaways:

1. **Data Structure**:
   - We worked with a simple data structure representing a list of fruits (e.g., orange, strawberry).
   - To retrieve this data, we set up a simulated backend using an API.js file with a `findAll` function that resolves or rejects after a delay.

2. **Redux Configuration**:
   - We began by configuring Redux, including creating our store and reducer.
   - The Redux Saga middleware was applied to handle asynchronous actions effectively.

3. **Implementing Redux Saga**:
   - Imported `createSagaMiddleware` from Redux Saga and applied it to enhance our store.
   - Remember: Always run sagas with the `sagaMiddleware.run` method.

4. **Generator Functions**:
   - Sagas are defined as generator functions, allowing asynchronous execution.
   - By using `.next()`, we can control the execution of these functions iteratively.

5. **Action Creators**:
   - In `app.js`, we dispatched an action to fetch fruits upon component mounting, leveraging the Redux Saga middleware to listen for actions.

6. **Root Saga**:
   - We created a root saga that uses the `takeLatest` effect to respond to actions and execute the corresponding sagas for data fetching.

7. **Effect Handling**:
   - The saga handles both successful and failed promises using `try...catch` to emit the appropriate actions based on the result of the API call.

8. **Reducer Functionality**:
   - We maintained an initial state in our reducer and handled actions to update the state based on loading, success, and error conditions.

9. **Expanding Functionality**:
   - The course concludes with a discussion on how to extend the functionality by adding more sagas and action creators, such as fetching a single fruit by ID.

10. **Q&A**:
    - Encouragement to explore further by integrating new actions and sagas.

Thank you for your participation in this course! I hope you've gained valuable skills in managing asynchronous operations in React applications using Redux Saga. See you next time!
```

Congratulations on reaching the end of this course.
In this lesson, we're going to do an overall review of everything we did in this course.
So let's do it.
So going back here to our introduction to Redux Saga with React, we had a following data
structure with a list of fruits.
Each object in this array represents a fruit.
So we have a simple list of fruits, orange, strawberry.
To get that data, we need to make a asynchronous HTTP request.
So we created a simulated backend with this API.js, with this findAll function, that after
two seconds to simulate some delay, it either resolves with some fruit data that we hard
coded here, or it rejects with an error so we can test the error handling.
So this is just fake backend so we can do something, how to approach this asynchronous
request.
So we return a new promise to simulate the asynchronous.
Anyway, so we started off configuring Redux, creating our store, creating our reducer,
and so on.
Then we went on to apply the middleware after doing some UI work to connect to the Redux
store using the connect middleware, maps state to props, maps to special props, all
that kind of stuff.
So in order for you to apply the Redux Saga middleware, first you have to import from
the Redux Saga package.
I call it createSaga middleware, following the documentation naming convention.
Then you call it, get some value in the store in the Saga middleware variable.
Then you pass it to the apply middleware that you use as an argument to create store.
So the middleware will be active every time you emit an action, it's going to go through
the middleware before it actually hits the reducer.
So don't forget you always have to run the sagas with the Saga middleware.run method,
and you have to create those sagas.
We did so in a file.
Saga is just a generator function, a function with a star, and we learned a little bit about
that, how to use statements.
So when you call the generator functions, you actually get the generator object.
And in order for you to run the statements in the function body, you keep calling the
generator objects dot next method, it will go up to the next new, evaluate that statement,
and you would back with an object with two properties, the value, which contains the
you that value from the statement, and then the done flag that indicates whether it's
done true or false, going through the whole function body.
So what we did was in the app.js, we call an action creator called fetch fruits in component
dead mount.
This extra create is bound, so it will automatically dispatch the action it returns, which is the
fetch fruits request.
Now because this action is dispatched, it's going to go through the middleware.
Now redux saga has a root saga here, we use the take latest effect to keep listening for
this action to be to come up.
So keep listening until when it comes up, it executes the fetch fruits saga.
So this root saga wrote here is like a watch saga, where it's watching for these action
types.
So when it gets that, it executes the fetch fruits and makes an HPE request.
When our case is simulated with using this fake backhand call, right, this function find
all which is simulating backhand.
We call this function with no arguments, and this call is from redux saga, it's a declarative
effect.
It's actually an instruction for the middleware to perform some action, some statement, some
in this case calling a function.
We don't call the function directly, we could do that, but it's the redux saga way is always
to give instructions to the middleware instead of actually doing the work ourselves.
The middleware is going to do the actual work of calling the function.
And then if this promise resolves with a value, that value is going to be placed in
the variable here, fruits, and then we finally emit the fetch fruits succeeded action whose
play load is the actual data with the fruits.
If there's any problem with this call, which should, for example, it rejects this promise,
rejects with an error, then an error is going to be thrown in this block.
Since we use a try catch block that would cause the execution to shift to the catch
block which in turn it puts or sends an instruction to dispatch an action of type fetch fruits
failed with the error message as the payload.
Now it's all nice, but nothing is done alone by redux saga, we still have to do our reducer
work.
So all that reducer rambling of the action is done in the reducer file.
We have an initial state with the actual data, some flag for loading and some error message
description.
And then we handle the actions as follows.
Once we get the request that we set error to no to clear, and then we indicate the application
is loading fruits, then if it succeeded, it sets fruits with the actual payload obtained
from the fake back end and then sets loading back to false.
In case there is an error and then it sets the error with the payload and sets loading
to false.
So that's pretty much it for the reducer.
And it keeps going like that.
The app is going to reflect the changes because we use this dot props dot fruits for the fruit
list component.
So that's pretty much it to conclude this course.
If you would like to add more sagas, more action creators, for example, if you want
to make an action creator to fetch only a single fruit by ID, all you have to do is
you create an action creator fetch fruit here that takes the ID, then you emit the action,
for example, fetch fruit in a singular requested, and you do the same approach as before.
You do that, then you make a reducer property for a single fruit, may add the error and
loading flag for that fruit.
And then once you have these guys, you can add the handling here, the same fashion, then
for the saga, what you have to do is the following.
You go to the saga, and then you add another here in the watch saga, the root saga, you
add another you to take latest the new action Fred fruit sequester.
So this guy is these you can think of these guys as running in parallel, listening in
parallel.
So it's going to listen if you get that do that.
And then if it gets that action, it's going to do some other thing, you're going to say
fat fruit.
Okay, so you just write it in the same fashion like this, make a call to a new API.
This case would be fine one.
And then you put, and then you catch any errors and do fail.
And that's pretty much it.
Note that the call is going to be different because there's an argument, the actual ID
of the fruit.
So that could be in the action payload right here.
So you could say action dot payload dot ID or something like that, fruit ID.
And that will be the argument to the fine one, right?
If you were doing the fat fruit singular.
Okay, so that's it.
And when you call the action creator, make sure to include the ID there so we can get
it here.
And that's the way you do it for another saga.
And you can add as many as you want here in this root, root saga watcher.
And then you just define different generator functions for each of those, each of those
operations.
Okay.
So that's all.
Thank you so much for watching this course.
And I hope you learned a lot and thank you.
And until the next time, bye.
