Next.js에서 Redux-saga 적용

Question

안녕하세요.현재 Next.js 프로젝트에서 redux-saga를 적용해 getServerSideProp 메소드에서 saga를 통해 데이터를 세팅해보고 싶습니다.redux-saga까지는 연결 했지만 getServerSideProps메소드에서 store.dispatch시 redux-saga를 타지 않는데요혹시 설정을 잘못했나 싶어 index.js 내부에 dispatch로 액션을 작동해보니 정상적으로 saga를 통해 API통신을 진행합니다. 어느 부분을 수정해야 getServerSideProps에서도 saga를 작동할 수 있는지 고수님들의 의견 부탁드립니다.index.jsconst index = () => { const {tickerList, status} = useSelector(state => state.ticker) return (

{JSON.stringify(tickerList)} // null이 뜸

); }; export const getServerSideProps = wrapper.getServerSideProps(store => { store.dispatch(actions.loadAllTickerList()) store.dispatch(END) } ) export default index; _app.jsclass App extends NextApp { static async getInitialProps(context) { const { Component, ctx } = context; const { store, isServer } = ctx; const pageProps = (await Component.getInitialProps?.(ctx)) || {}; if (isServer) { // getInitialProps를 호출하는 환경이 서버일 경우에는는 모든 sagaTask가 완료된 상태의 스토어를 주입시켜줘야 한다. store.dispatch(END); // redux-saga의 END 액션 이용하여 saga task가 종료되도록 한다. await store.sagaTask.toPromise(); // saga task가 모두 종료되면 resolve 된다. } return { pageProps }; } render() { const { Component, pageProps } = this.props; return ( ); } } export default wrapper.withRedux(App) store.jsexport const makeStore = (context) => { // 1: Create the middleware const sagaMiddleware = createSagaMiddleware(); // 2: Add an extra parameter for applying middleware: const store = createStore(reducer, applyMiddleware(sagaMiddleware)); // 3: Run your sagas on server store.sagaTask = sagaMiddleware.run(rootSaga); // 4: now return the store: return store; }; export const wrapper = createWrapper(makeStore, {debug: true}); rootSaga.jsimport axios from 'axios' import { LOAD_TICKER_LIST } from '../actions/ticker' import { all, call, put, takeEvery, fork } from "redux-saga/effects"; import { loadAllTickerListComp } from '../actions' const getAllTickers = () => { return axios.get('https://api.upbit.com/v1/market/all') } function* fetchTickerhSaga() { const { data } = yield call(getAllTickers) yield put(loadAllTickerListComp(data)) } function* watchApiRequest() { yield takeEvery(LOAD_TICKER_LIST, fetchTickerhSaga); } export default function* tickerSaga(){ yield all([ fork(watchApiRequest) ]) }

Next.js에서 Redux-saga 적용

0개의 답변

Q&A 목록