Nextjs redux-persist 적용 (typescript)

Nextjs redux-persist 적용 (typescript)

상황

• 이미 리덕스를 사용해서 데이터를 관리하고 있던 상황에서 새로고침 해도 데이터를 유지하려함.
• 로컬스토리지나 세션스토리지에 직접 넣는 코드를 추가할 수 있으나, 그렇다면 리덕스를 사용할 필요가 없고 관리해야할 데이터가 많아서 비효율적이라고 생각함.
• redux-persist를 사용하면 redux-persist config에서 허용한 리듀서만 새로고침해도, 데이터를 유지할 수 있음.
• 제 경우에는 로컬스토리지를 사용하였습니다.

설치

npm i redux-persist
npm i --save-dev @types/redux-persist

혹시..

• npm i --save-dev @types/redux-persist 설치 하였음에도 불구하고 계속 설치하라는 오류가 나온다면
• next-env.d.ts에 한줄 추가

/// <reference types="next/image-types/global" />

적용법

• store/reduces

import {
  configureStore,
  combineReducers,
} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';

// config 작성
const persistConfig = {
  key: 'proxy-claim', // 로컬스토리지에 저장할 키값
  storage, // localStorage or sessionStorage
  whitelist: ['proxyclaim'], // 저장할 리듀서
};

const reducer = combineReducers({
  ...your reducers
});

// persistReduce 생성
const persistedReducer = persistReducer(persistConfig, reducer);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: isDev,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: { // 이부분 추가
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
});

export const persistor = persistStore(store); // persistor 완성

• _app.tsx

import { persistor, store } from '@stores/reducers';
import { PersistGate } from 'redux-persist/integration/react';

...
<Provider store={store}>
    <PersistGate persistor={persistor}>
        ...
    </PersistGate>
</Provider>
...

state 초기화 하는 법

• in reducer

import { PURGE } from 'redux-persist';

... 

// initialState로 초기화
extraReducers: (builder) => {
    builder.addCase(PURGE, () => initialState);
},

...

• apply

// export const persistor = persistStore(store); // 이부분
import { persistor } from '@stores/reducers';

// 초기화
const purge = async () => {
  await persistor.purge();
};