Generator 함수와 redux-saga

redux-saga를 사용하기 위해 특별한 역할을 수행하는 generator 함수의 대한 이해가 필요
generator의 기본 문법을 안 후에, redux-saga를 이해해 봐야겠담

1. 이거 왜 사용함?

"비동기를 동기적으로 관리 가능"

Generator function은 Async/await와 함께 비동기를 동기처럼 다룰 수 있음
사실, Async/await는 제네레이터를 기반으로 만들어져 비슷한 구조를 갖고 있음

2. generator 기본 문법

• 기본 형태

const gen = function* () {}

• 실행

gen().next()

무언가를 만들어보자

• 만들기

const gen = function* () {
    console.log(1);
    yield '첫번째;
    console.log(2);
    yield '두번째';
    console.log(3);
    yield '세번째';
}
const generator = gen()

• 실행

generator.next()

=> yield 에서 멈춤, 중단점이 있는 함수
(원래 js 함수는 위에서부터 아래까지 전부 쭉 실행, break와 같은 기능)

=> 제너레이터 함수 객체 안에는 value와 done이 있는데

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: true}

done은 yield를 만났을 때 false가 되고 만나지 못하면 true가 됨

3. 절대 멈추지 않는 generator 함수

const gen2 = function* () {
    while(true) {
        yield '무한';
    }
}

=> 계속해서 '무한' 반환

무한 generator 응용

let i = 0;

const gen3 = function* () {
    while(true) {
        yield i++;
    }
}

=> 실제로 js에서 무한의 개념을 사용하고 싶을 때 generator를 많이 씀
=> 이 성질을 사용해서 이벤트 리스너 역할로 활용 가능
(yield 뒤에 코드 작성해서 실행)
=> 클릭 -> genertor.next() 호출 -> 작성한 yield 실행

!! 이벤트 리스너의 성질을 redux-saga가 사용 !!

4. redux-saga에서의 generator

액션 모니터링

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

=> redux-saga에서는 이러한 원리로 액션을 모니터링
=> 특정 액션이 발생했을때 원하는 자바스크립트 코드를 실행