redux-saga를 찾아보다 사가는 generator를 통해서 비동기 처리를 하고 있을 것을 알게 됐다.

js의 generator를 알지 못해서 알아보려고 시작했다.

기초

• 제너레이터 함수를 만들 때에는 function* 이라는 키워드를 사용

• 제너레이터 함수를 호출했을때는 한 객체가 반환 -> 제너레이터라고 부른다.

• 함수를 작성한 뒤에는 다음 코드를 사용해 제너레이터를 생성

  const generator = generatorFunction();
  

• 제너레이터 함수를 호출한다고 해서 해당 함수 안의 코드가 바로 시작되지는 않는다.

• generator.next() 를 호출해야만 코드가 실행되며, yield를 한 값을 반환하고 코드의 흐름을 멈춥니다.

• 코드의 흐름이 멈추고 나서 generator.next() 를 다시 호출하면 흐름이 이어서 다시 시작된다.

  function* generatorFunction() {
    console.log('안녕하세요?');
    yield 10;
    console.log('제너레이터 함수');
    yield 20;
    console.log('function*');
    yield 30;
    return 40;
  }
  const generator = generatorFunction();
  
  // generator.next() 수행 결과 -> 안녕하세요?
  console.log(generator.next()); // {value: 10, done: false}
  
  // generator.next() 수행 결과 -> 제너레이터 함수?
  console.log(generator.next()); // {value: 20, done: false}
  
  // generator.next() 수행 결과 -> function*?
  console.log(generator.next()); // {value: 30, done: false}
  
  console.log(generator.next()); // {value: 40, done: true}
  

next 함수에 대해서

• next를 호출 할 때 인자를 전달하여 이를 제너레이터 함수 내부에서 사용 할 수도 있다.

function* sumGenerator() {
  console.log('### IN GENERATOR - sumGenerator이 시작.');
  let a = yield;
  console.log('### IN GENERATOR - a값을 받았다.', a); // a는 11 반환
  let b = yield;
  console.log('### IN GENERATOR - b값을 받았다.', a, b); // a는 11, b는 22 반환
  yield a + b;
}

const sum = sumGenerator();

// sum.next() 결과: sumGenerator 시작
console.log('# sum.next() 결과: ', sum.next()); //{value: undefined, done: false}

// sum.next(11) 결과: a값을 받았다.
console.log('# sum.next(11) 결과: ', sum.next(11)); //{value: undefined, done: false}

// sum.next(22) 결과: b값을 받았다.
console.log('# sum.next(22) 결과: ', sum.next(22)); //{value: 33, done: false}

액션 모니터링

• redux-saga는 액션을 모니터링 할 수 있다.
  • Generator를 통해 모니터링이 어떻게 이루어지는지 예시 코드를 작성해보면서 배워보자
• redux-saga에서는 이러한 원리로 액션을 모니터링하고,
  • 특정 액션이 발생했을때 우리가 원하는 자바스크립트 코드를 실행시켜준다

function* watchGenerator() {
  console.log('모니터링 시작!');
  while (true) {
    const action = yield;
    if (action.type === 'HELLO') {
      console.log('안녕하세요?');
    }
    if (action.type === 'BYE') {
      console.log('안녕히가세요.');
    }
  }
}

const watch = watchGenerator();
watch.next(); // 모니터링 시작!
watch.next({ type: 'HELLO' }); // 안녕하세요?
watch.next({ type: 'BYE' }); // 안녕히가세요.