[React] redux-persist를 통한 Store 유지하기

redux-persist

 

redux toolkit만 적용했을 경우, 페이지를 이동하거나 새로고침 시 Store 값이 초기화된다.

redux-persist 라이브러리를 활용하면 LocalStorage와 SessionStorage의 storage를 redux에서 사용할 수 있게 된다.

 

Config.js

• LocalStorge 사용 시  "redux-persist/lib/storage"
• SessionStorage 사용 시 "redux-persist/lib/storage/session" 에서 import
• persisConfig = {} : 새로운 persist 선언
  • key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지
  • storage : 웹의 localStorage 혹은 sessionStorage 지정
• persistReducer(persisConfig, reducer) : persisConfig가 추가된 reducer 반환
• configureStore : persistConfig가 추가된 rootReducer로 store를 생성
• persistStore(Store) : 새로 고침, 종료해도 지속될 store 생성

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { createLogger } from 'redux-logger';
import { UserSlice } from './UserSlice';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storageSession from 'redux-persist/lib/storage/session';
 
const logger = createLogger();
 
const rootReducer = combineReducers({
  user: UserSlice.reducer,
});
 
const persistConfig = ({
  key: 'root',
  version: 1,
  storage: storageSession
});
 
 
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
export const Store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
});
 
export const persistor = persistStore(Store);

 

index.js

• React로 개발 시 App 컴포넌트를 PersistGate로 매핑해준다.
• persist store가 redux에 저장될 때까지 앱 UI 랜더링이 지연된다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider, Store, persistor } from '@services';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={Store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
        <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
);