[REACT] NEXTJS 환경 REDUX 초기셋팅 코드예시

NEXTJS 환경 REDUX 초기셋팅 코드예시

---

 

Redux 관련 라이브러리 설치.

npm i next-redux-wrapper redux react-redux redux-devtools-extension

 

초기상태 및 리듀서 설정

// reducers/index.js
import { HYDRATE } from "next-redux-wrapper";

const initialState = {
  user: {},
  post: {},
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case HYDRATE:
      console.log("HYDRATE", action);
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

export default rootReducer;

HYDRATE는 SSR을 위한 설정으로 getInitialProps와 getServerSideProps에서도 Redux store에 접근이 가능하도록 하기 위한 처리이다.

 

 

configureStore 설정

// store/configureStore.js
import { createWrapper } from "next-redux-wrapper";
import { applyMiddleware, compose, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducer from "../reducers";

const configureStore = () => {
  
  // middlewares에 redux-thunk, redux-sage 등의 middleware를 넣어주면 된다.
  const middlewares = [];
  
  // 배포용일때는 DevTools 연결 x
  // 개발용일때는 DevTools 연결 o
  const enhancer =
    process.env.NODE_ENV === "production"
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(reducer, enhancer);
};

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

export default wrapper;