Redux-Toolkit + Redux-persist + Redux-wrapper

마지막으로 SSR을 위해 getserversideprops에서 store에 접근 할 수 있도록 redux-wrapper를 추가해줬다.

//store.ts

import { Action, configureStore, EnhancedStore, ThunkAction } from "@reduxjs/toolkit";
import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { combineReducers, Store } from "redux";
import counterReducer from "./slices/counterSlice";
import logger from "redux-logger";
import accountReducer from "./slices/accountSlice";
import { createWrapper, MakeStore } from "next-redux-wrapper";

const persistConfig = {
    key: "root",
    version: 1,
    storage
};

const rootReducer = combineReducers({ counter: counterReducer, account: accountReducer });

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
    reducer: persistedReducer,
    middleware: getDefaultMiddleware =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
            }
        }).concat(logger),
    devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production"
});

const setupStore = (context: any): EnhancedStore => store;

const makeStore: MakeStore<any> = (context: any) => setupStore(context);

export const persistor = persistStore(store);

export const wrapper = createWrapper<Store>(makeStore);

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

// _app.tsx
import "../styles/global.scss";
import type { AppProps } from "next/app";
import { store, wrapper } from "../features/store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistor } from "../features/store";

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Provider store={store}>
            <PersistGate persistor={persistor} loading={null}>
                <Component {...pageProps} />
            </PersistGate>
        </Provider>
    );
}

export default wrapper.withRedux(MyApp);

//index.ts

export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, res, ...etc }) => {
  // store에 저장되어있는 state를 getState()를 써서 확인 할 수 있다.
    store.getState().counter
    return { props: {} };
});

wrapper까지 끝나면 환경설정은 마무리가 되는 것 같다.