Redux-saga

From bibbleWiki
Jump to navigation Jump to search

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