[React] saga 설치하고 generator 이해하기

Yuri Lee·2022년 6월 28일
0

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

saga 설치하고 generator 이해하기

thunk 삭제

npm rm redux-thunk

saga 설치

npm i redux-saga
import { createWrapper } from 'next-redux-wrapper'
import { applyMiddleware, compose, createStore} from 'redux'
import reducer from '../reducers'
import rootSaga from '../sagas'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from 'redux-saga'

const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
    console.log(action)
    return next(action)
}

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware, loggerMiddleware];
    const enhancer = process.env.NODE_ENV === 'production'
        ? compose(applyMiddleware(...middlewares))
        : composeWithDevTools(applyMiddleware(...middlewares))
    const store = createStore(reducer, enhancer);
    store.sagaTask = sagaMiddleware.run(rootSaga);
    return store;
};

const wrapper = createWrapper(configureStore, {
    debug: process.env.NODE_ENV === 'development', 
});

export default wrapper;

saga 관련 코드를 추가한 후에 sagas 폴더를 만들어준다.

제너레이터(generator) 란?

  • generator 도 함수의 일종이다.
  • generator 에는 yield라는 개념이 나온다.

  • .next()를 붙여야 그 아래 것들이 실행된다. 중단점이 있는 함수이다. 원래 js는 함수 위에서 끝까지 실행된다 특성을 가지고 있다. 제너레이터는 안에 yield 를 넣어주면 그 부분에서 멈춘다. 이 성질을 활용한 것이 saga이다.
  • 위 코드를 보면 done이 true가 될때까지 실행하고 있다. 제너레이트를 사용하고, 중단하고 싶은 점까지 next() 호출하면 된다. saga에서는 절대 멈추지 않는 제너레이터도 있다.

자바스크립트에서 무한의 개념을 사용하고 싶을 때 제너레이터를 많이 사용한다. 이 성질을 활용해서 이벤트 리스너로 활용할 수도 있다. 이러한 성질을 saga 가 활용한 것!

  1. 무한의 개념
  2. 이벤트 리스너로 활용
profile
Step by step goes a long way ✨

0개의 댓글