DEV Community

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

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

Danish
Tech Curious, Mobile App Developer. Writes About React-Native, JS, Node.js, Api Handling, Mongo Db.
・2 min read

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
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

Discussion (0)