next js 사용일지 - 2 redux 설정

react 할때 redux와 redux설정이 쉬웠는데 next에서 리덕스와 리덕스 사가를 설정하려 하였는데 상당히 까다로웠다.

redux폴더에 store를 만들어서

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer, { rootSaga } from "./reducers/rootReducer";
import createSagaMiddleware from "redux-saga";

const sagaMiddleware = createSagaMiddleware();
const initialState = {};

const middlewares = [applyMiddleware(sagaMiddleware)];

const store = createStore(rootReducer, initialState, composeWithDevTools(...middlewares));

sagaMiddleware.run(rootSaga);

export default store;

이런식으로 middleware로 사가를 연결해주고 store를 만들어 준다. 그리고 _app.js 에서 Provider에 store를 연결시켜주고

npm i next-redux-wrapper

를 설치해 준 뒤 아래와 같이 만들어준다.

const makeStore = () => store;
const wrapper = createWrapper(makeStore);

export default wrapper.withRedux(MyApp);

이렇게 createWrapper를 사용한다.

next는 react와 다르게 사용하는 순간 리덕스 스토어가 여러개가 될 수 있어서 그런다.

그래서 getInitialProps, getServerSideProps 등에 리덕스 스토어에 접근할 수 있어야 해서 next-redux-wrapper 이것이 없으면 불가능 하다고 한다.