[TIL]Redux-persist 새로고침이 발생해도 store state 유지하기

Disney Plus 를 가볍게 클론코딩한 프로젝트로 Firebase를 통한 인증을 연습하는데 도움이 된 프로젝트였다.

사용자 인증을 통해 받아온 데이터를 로컬 스토리지에 저장하고 가져오도록 설정되어 있었는데
이번에 해당 데이터를 Redux를 이용해서 관리하도록 수정해보기로 했다.

이때 문제가 발생했다.
Redux는 새로고침이 발생하면 저장된 state가 리셋되는 문제가 있었다.
로그인 정보를 관리하는 경우 state가 유지되어야할 필요성이 있었다.

이럴 때 redux-persist를 활용하면 문제를 해결할 수 있다.

사용 방법

1 )Install

npm i redux-persist
yarn add redux-persist

TypeScript

npm i redux-persist @types/redux-persist
yarn add redux-persist @types/redux-persist

2) Storage 종류에 따라 rootReducer가 있는 곳에 import하기

- Local Storage

import storage from 'redux-persist/lib/storage

- Session Storage

import sessionStorage from 'redux-persist/lib/storage

3) config 작성 및 rootReducer 감싸기

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
import userReducer from "./userSlice";
import storage from "redux-persist/lib/storage";
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import persistStore from "redux-persist/es/persistStore";

export const rootReducer = combineReducers({
  user: userReducer,
});

// config 작성
const persistConfig = {
  key: "root", // localStorage key 
  storage, // localStorage
  // whitelist: [], // target (reducer name) 해당 리듀서만 localStorage에 저장
  // blacklist: [], // [] 항목 제외하고 localStorage에 저장
}

// persist Reducer로 감싸주기
const persistedReducer = persistReducer(persistConfig, rootReducer);

4) persist 적용된 store 내보내기

export const store = configureStore({
  reducer: persistedReducer,

  // 직렬화 불가능한 액션을 전달하는 것은 일반적인 Redux에서는 불가능하여 에러가 발생함
  // 직렬화가 불가능한 경우 데이터의 불변성에 문제가 발생함
  // persist의 경우에만 예외적으로 직렬화 가능 여부를 검사하지 않도록 설정
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

5) index.js에 적용시키기

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { persistor, store } from "./store";
import { PersistGate } from "redux-persist/integration/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <BrowserRouter>
{/* PersistGate는 리덕스 상태가 복원되기 전 컴포넌트 로딩을 지연시킬 수 있다. loading Props를 이용해서 대기 중 보여줄 컴포넌트를 지정할 수 있다.*/}
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>
);

 

창을 닫으면 state가 리셋되도록 하고 싶다면 Local Storage가 아닌 Session Storage를 활용하면 쉽게 구현할 수 있다.