Generator Functions JavaScript(Examples & Usage in Redux Saga Asynchronous Api Call)
Tags: javascript, redux, tutorial, functional
Published: 2020-09-17 11:11:59

###**Tutorial Roadmap**
* Generator Functions & Iterators?
* Usage in Asynchronous Programming(Api Calling)

####Generator Functions & Iterators

> A generator function is a function which allows us to control the execution of statements in it. i.e can be stopped mid way and continue from where it left

Yup! We can take out any values out of function at any time using `yeild` and whats more awesome is we can also pass some values in the function during its execution.

`yeild 'Anything' // returns anything and pauses`

This control in flow of statements is made possible by Iterators Objects.

To put Iterators in plain english it is 
> Process of looping over custom objects.

Okay Lets See Above Theory In Action 

```
//Normal JS Function
function myName(){
   //Statements
   return 'Danish Ali';
   return 'Unreachable statement';
}

const Name = myName();
console.log(Name) // Danish Ali
```
`This is a working of normal function in JS, It runs till end following run to completion model.`

```
//This is generator function in work

function* myNameGenerator(){
    
    yeild 'My'
    yeild 'Name is'
    yeild 'Danish'
    return 'Ali'

}

const nameGenerator = myNameGenerator
console.log(nameGenerator) //{[Iterator]} 
console.log(nameGenerator.next()) // {value:'My', done: false}
```

>Yes a generator function returns an Iterator (an Object)
>Iterator has an next method
>next() returns an object
`{value: Any, done: true | false}`
>value is the next value from generator and done tells us if generator function is capable of generating more values. i.e when done is true there are no more values to be generated.

```
//Continuing previous code...
console.log(nameGenerator.next()) // {value:'Name is', done: false}
console.log(nameGenerator.next()) // {value:'Danish', done: false}
console.log(nameGenerator.next()) // {value:'Ali', done: true}
```
>At return statement the done is set to true, after that generators cannot further generate.
               
![Normal Function vs Generator Function](https://dev-to-uploads.s3.amazonaws.com/i/7749upjzosx7d3f4xxje.png)
*Diagram : Normal Function Vs Generator Function*


####Usage in Asynchronous Programming(Api Calling)

Redux Saga a Middle Ware For Redux is developed by using the functionality offered by generators to achieve asynchronity.

`Example of Generators used in redux saga`
```
function* loginRequest(obj) {
  //console.log('loginRequest Generator Function Called');

  const response = yield anyRequestFunction(data, 'Url');

  //console.log('Login Request Working', response);

  if (response.status === 200) {
    yield put(loginSuccess(response));
  } else if (response.status === 400) {
    yield put(loginFaliure(response));
  } else {
    yield put(loginFaliure(response));
  }
}
```

>Here when api is called it pauses and executes in background while the control is transferred to next statement after generator call.


Thanks for reading until end, hope it was useful to you.
Happy Coding :) 

#####_Useful Links_

* https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function