x-labz

yield select ( getMessages ) ;
yield put ( action1() ) ;
yield call ( preprocess ) ;
yield call ( fetchDataFromBackend )  ; // <-- async! task will wait for backend response
yield put ( action2() ) ;

x-labz

const initialState = {
  data: 0,
  counter: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE": {
      return { ...state, data: action.payload };
    }

x-labz

function* task1() {
  logger("task1 started");

  const step0 = yield select(getData);
  logger(`task1-step0  - ${step0} (expected:0,0)`);
  const step1 = yield select(getData);
  logger(`task1-step1  - ${step1} (expected:0,0)`);

  yield put(updateAction(2));
  logger("task1 update dispatched (2)");

x-labz

task1 started 
task1-step0 - data:0,counter:0 (expected:0,0) 
task1-step1 - data:0,counter:0 (expected:0,0) 
task2 started 
task2-step0 - data:0,counter:0 (expected:0,0) 
task1 update dispatched (2) 
task2 update dispatched (-1) 
task2-step1 - data:-1,counter:0 (expected:-1,0) 
task2 ended 
task1 increment dispatched 

x-labz

const collectUserEvent = (state = initialState, action, wholeState) => {
  const { payload: { userEvent } } = action;
  cosnst sessionID = wholeState.users[userEvent.userID]?.sessionID
  
  return [...state, { ...userEvent, sessionID } ]
};

x-labz

// idsToDelete is an array of item IDs to be deleted
const data = yield select( someItemsFromStore() ) 
idsToDelete =  data.filter( item => item.rating < 5 )

// yielding put effects one-be-one
idsToDelete.forEach( id => {
  yield put(deleteItem({id:i})) 
});

// using yield all

x-labz

// batch delete example
yield put ( batchDeleteItems({ itterator: item => item.rating < 5 }) ) ;

// batch update
yield put ( batchUpdate( { itterator: item => item.rating < 5 ? {...item, flag:true } : item } ) 

x-labz

// optimized batch update
yield put ( batchUpdate( { 
  subSetItterator: item => item.rating < 5,
  updateItterator: item => {...item, flag:true }
});

x-labz

const run = () => {
  const result = blockingFunction();
  return result;
};

x-labz

// blocking operation wrapped in promise
const blockingPromise = () =>
  new Promise((resolve) => {
    const result = blockingFunction();
    resolve(result);
  });

const promiseRun = () => {
  blockingPromise().then((result) => {
    console.log(`result: ${result}`);