DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Generator Functions JavaScript(Examples & Usage in Redux Saga Asynchronous Api Call)
Danish
Danish

Posted on

Generator Functions JavaScript(Examples & Usage in Redux Saga Asynchronous Api Call)

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
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

At return statement the done is set to true, after that generators cannot further generate.

Normal Function vs Generator Function
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));
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.