새로고침하면 휘발하는 redux, redux-persist 로 유지하기

로그인 정보를  redux-toolkit을 사용해 전역으로 관리하였다. 로그인 직후에는 정상 작동되었지만

새로고침시 리덕스의 데이터가 휘발되는 문제가 발생하였다.

 

이를 해결하기위해 토큰 정보처럼 localStorage나 sessionStorage에 저장해 필요할 때마다 꺼내 사용하는 redux-persist를 사용하였다!

 

1. 설치

yarn add redux-persist

 

2. reducer에 persist store 정의

나는 sessionStorage에 저장하기 위해 import storageSession from 'redux-persist/lib/storage/session 를 사용했다.

 

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storageSession from "redux-persist/es/storage/session";
import user from "../modules/user";

const reducers = combineReducers({
  user: user,
});
const persistConfig = {
  key: "root",				// reducer의 어느 지점에서부터 데이터를 저장할 건지
  storage: storageSession,	//sessionStorage에 저장
  whitelist: ["user"],		// blacklist: 제외할 것 지정
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false,
  }),
});

export default store;

 

3. persist store 사용

import { Provider } from "react-redux";
import Router from "./shared/Router";
import { GlobalStyles } from "./styles/GlobalStyles";
import store from "./redux/config/configStore";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

export let persistor = persistStore(store); //새로 고침, 종료해도 지속될 store 생성
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <GlobalStyles />
        <Router />
      </PersistGate>
    </Provider>
  );
}

export default App;