[React] redux-persist - 새로고침 후에도 store state 유지하기 (with typescript)

사용 이유

리덕스는 새로고침하거나 창을 닫으면 스토어에 저장된 state가 리셋된다. 로그인 정보를 store에서 관리하는 경우, 해당 state가 유지되어야 한다. 이 때 redux-persist를 사용하면 된다.

원리

• App을 불러오면서 Local Storage에 저장된 유저 정보를 사용한다.
• 서버에 있는 로그인 상태와 비교하며 재확인한다.
• 서버의 응답이 오면 해당 로그인 정보로 업데이트 한다.
• 토큰이 만료되었다면 재로그인을 요청한다.

사용 방법

1) 설치

npm i redux-persist or yarn add redux-persist

TypeScript
npm i redux-persist @types/redux-persist or 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 } from 'redux';
import authReducer from './authReducer';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// config 작성
const persistConfig = {
  key: "root", // localStorage key 
  storage, // localStorage
  whitelist: ["auth"], // target (reducer name)
}

const rootReducer = combineReducers({
  auth: authReducer
});

// persistReducer로 감싸기
export default persistReducer(persistConfig, rootReducer);

4) Store에서 persist 적용된 store 내보내기

(state/Store.tsx)

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';
import { persistStore } from 'redux-persist';
import { composeWithDevTools } from "redux-devtools-extension"; // 개발자 도구

export const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk))); // 기존 store 내보내기

export const persistor = persistStore(store); // persist store 내보내기

export type RootReducerType = ReturnType<typeof rootReducer>;

5) index.tsx 파일에 적용하기

(index.tsx)

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);