Redux-saga

About

• Manages side-effects
• Depends on ES6 and Yield
• Consumes and emits actions
• Works without redux

Generator functions

The functions does not execute. It waits until .next() is called and progresses through the function breaking after each yield

var delayGenerator = function* () {
   let data1 = yield delay(1000,1);
   console.info("Step 1");
   let data2 = yield delay(1000,2);
   console.info("Step 2");
   let data3 = yield delay(1000,3);
   console.info("Step 3");
}

var obj = delayGenerator()
obj.next() 
// Console Step 1
obj.next() 
// Console Step 2
obj.next() 
// Console Step 3

Using co

co runs the generator and the then holds the result.

var wrapped = co.wrap(delayGenerator);
wrapped().then( v=>console.log("Got a value:", v));
// Console Step 1
// Console Step 2
// Console Step 3
// Got a value: 6

Effects

Take

Take waits for an event to occur in the generator

var mySaga = function* () {
   console.info("Start");
   const state = yield effect.take("SET_STATE");
   console.info("Got State", state);
}

So dispatch can make it conclude

dispatch({state:"SET_STATE"});

Put

Put puts an action in the store

var putSaga = function* () {
    yield effect.put({type:"SET_STATE", value:42});
}

So

run(putSaga)

Will result in mySaga completing

TakeEvery

TakeEvery waits on an event and forks a new process.

let process = function* () {
    let timesLooped = 0;
    while(true) {
        console.info(`Looped ${timesLooped++} times`);
        yield delay(500);
    } 
}

let saga = function*() {
    yield effects.takeLatest("START_PROCESS", process);
}

run(saga)

dispatch( {type:"START PROCESS"});
// Looped 1 times
// Looped 2 times
// Looped 3 times
dispatch( {type:"START PROCESS"});
// Looped 1 times
// Looped 2 times

TakeLatest

TakeLatest waits on an event and forks until a new event. The current is cancelled and a new fork is started.

let process = function* () {
    let timesLooped = 0;
    while(true) {
        console.info(`Looped ${timesLooped++} times`);
        yield delay(500);
    } 
}

let saga = function*() {
    yield effects.takeLatest("START_PROCESS", process);
}

run(saga)

dispatch( {type:"START PROCESS"});
// Looped 1 times
// Looped 2 times
// Looped 3 times
dispatch( {type:"START PROCESS"});
// Looped 1 times
// Looped 2 times