이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.
npm rm redux-thunk
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 폴더를 만들어준다.
자바스크립트에서 무한의 개념을 사용하고 싶을 때 제너레이터를 많이 사용한다. 이 성질을 활용해서 이벤트 리스너로 활용할 수도 있다. 이러한 성질을 saga 가 활용한 것!