[Next.js] next-redux-wrapper 사용하기

import { HYDRATE, createWrapper, MakeStore } from 'next-redux-wrapper';
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import common from './common';
import searchSite from './searchRoom';
import user from './user';
import registerRoom from './registerRoom';
import auth from './auth';
import room from './room';
import reservation from './reservation';

//* redux-toolkit 의 combineReducers() 사용하여 여러 모듈화된 리듀서 합친 rootReducer 생성
const rootReducer = combineReducers({
	common: common.reducer,
	user: user.reducer,
	auth: auth.reducer,
	registerRoom: registerRoom.reducer,
	searchRoom: searchSite.reducer,
	room: room.reducer,
	reservation: reservation.reducer,
});

export type RootState = ReturnType<typeof rootReducer>; // 스토어의 타입 얻기
let initialRootState: RootState;

//* rootReducer에 타입이 __NEXT_REDUX_WRAPPER_HYDRATE__ 인 액션 추가 
const reducer = (state: any, action: any) => {
	if (action.type === HYDRATE) {     
        // 빈 초기상태라면 payload(=서버 측 store의 state)로 덮어씌워준다               
		if (state === initialRootState) {  
			return {
				...state,
				...action.payload,  
			};
		}
		return state;
	}
	return rootReducer(state, action);
};

//* 리덕스 store를 리턴하는 makeStore 함수 생성
const makeStore: MakeStore<any> = () => {
	const store = configureStore({
		reducer,
		devTools: true,
	});
	initialRootState = store.getState();
	console.log(store);
	return store;
};

//* 리덕스 스토어를 wrapper로 만들어서 export하기
export const wrapper = createWrapper(makeStore, { debug: true });

// Next 6버전 이후로 <Provider>로 감싸지 않아도 되도록 바뀜. 
const app = ({ Component, pageProps }: AppProps) => {
	return (
		<>
			<GlobalStyle />
			<Header />
			<Component {...pageProps} />
			<div id='root-modal' />
		</>
	);
};

export default wrapper.withRedux(app);

import App, { AppProps } from 'next/app';
import axios from '../lib/api';
import Header from '../components/Header';
import GlobalStyle from '../styles/GlobalStyle';
import { wrapper } from '../store';
import { cookieStringToObject } from '../lib/utils';
import { meAPI } from '../lib/api/auth';
import { userActions } from '../store/user';

const app = ({ Component, pageProps }: AppProps) => {
	return (
		<>
			<GlobalStyle />
			<Header />
			<Component {...pageProps} />
			<div id='root-modal' />
		</>
	);
};

app.getInitialProps = wrapper.getInitialAppProps((store) => async (context) => {
	const appInitialProps = await App.getInitialProps(context);
	const cookieObject = cookieStringToObject(context.ctx.req?.headers.cookie);
	const { isLogged } = store.getState().user;

	try {
		if (!isLogged && cookieObject.access_token) {
			axios.defaults.headers.cookie = cookieObject.access_token;
			const { data } = await meAPI();
			store.dispatch(userActions.setLoggedUser(data));
		}
	} catch (e) {
		console.log(e);
	}

	return { ...appInitialProps };
});

export default wrapper.withRedux(app);

import React from 'react';
import { NextPage } from 'next';
import ReservationMain from '../../components/reservation/ReservationMain';
import { wrapper } from '../../store';
import { getUserReservationAPI } from '../../lib/api/reservations';
import { reservationActions } from '../../store/reservation';
import { cookieStringToObject } from '../../lib/utils';
import axios from '../../lib/api';

const index: NextPage = () => {
	return <ReservationMain />;
};

export const getServerSideProps = wrapper.getServerSideProps(
 	(store) =>
 		async ({ req, res, ...etc }) => {
 			const userId = store.getState().user.id;
 			try {
 				if (userId) {
 					const { data } = await getUserReservationAPI(userId);
 					store.dispatch(reservationActions.setUserReservations(data));
 				}
 			} catch (e) {
 				console.log(e);
 			}
 		}
 );

export default index;

index.getInitialProps = wrapper.getInitialPageProps(
	(store) =>
		async ({ req, res, ...etc }) => {
			// const userId = store.getState().user.id;  불가
			const cookieObject = cookieStringToObject(req?.headers.cookie);
			const { isLogged } = store.getState().user;
			try {
				if (!isLogged && cookieObject.access_token) {
					axios.defaults.headers.cookie = cookieObject.access_token;
					// 로그인한 사용자 정보 호출
                    const userRes = await meAPI();
					const userId = userRes.data.id;
					
                    const { data } = await getUserReservationAPI(userId);
					store.dispatch(reservationActions.setUserReservations(data));
				}
			} catch (e) {
				console.log(e);
			}
		}
);