[Redux] Redux-Saga

✅ Redux Middleware

const middleWare = store => next => action => next(action);

• 미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수
• 디버깅 목적으로 상탯값 변경 시 로그를 출력하거나, 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적
• 미들웨어를 설정하지 않으면 dispatch한 액션은 곧바로 리듀서로 보내진다
• 대표적인 리덕스 미들웨어로 redux-logger, redux-thunk, redux-saga 등이 있음

✅ Redux-Saga

redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 라이브러리다. redux-saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다. 여기서 특정 작업이란, 특장 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있다.

참고: https://react.vlpt.us/redux-middleware/10-redux-saga.html

redux-saga는 Generator 문법을 사용하여 아래와 같은 원리로 작동한다.

⏩ Redux-saga 작동원리 (feat. Generator)

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