[Redux] Redux-Persist

 

 

Redux-Persist

 

state를 통해 상태관리를 하면 앱을 종료하거나 새로고침 시에

저장되어 있던 state들이 사라지게 된다.

 

이 때 state를 유지하기 위해 localStorage나 sessionStorage를 사용하는데

Redux-Persist를 사용하여 설정해두면 알아서 localstorage나 sessionstorage에 state의 상태를 저장시켜주고

꺼내씀으로써 state를 유지시킬 수 있다.

 

1. 설치

yarn add -D redux-persist

타입스크립트 적용 시 -D @types/redux-presist를 설치해주어야 한다.

 

2. 사용방법

store/index.js

import { tasks } from "./tasks";
import { combineReducers, createStore } from "redux";
import { persistReducer, persistStore } from "redux-persist";
import session from "redux-persist/lib/storage/session";

const persistConfig = {
  key: "root",
  storage: session,
  // 저장하는 곳
  // session -> sessionStorage
  // storage -> localStorage
  whitelist: ["tasks"],
  // 저장할 reducer 선택
  // 이 부분을 지정하지 않으면 reducer의 상태 전부 저장하게 된다.
  // 반대의 개념으로 blacklist가 있다.
};

const combinedReducer = combineReducers({ tasks });

const rootReducer = persistReducer(persistConfig, combinedReducer);
// 기존의 reducer를 pesistReducer으로 감싸주어야 한다.

export const store = createStore(rootReducer);

export const persistor = persistStore(store);
// store 또한 pesistStore으로 감싸주어야 한다.

여러 리듀서 중에 특정 리듀서를 어느 곳에 저장시킬 지 지정해 둘 수 있다.

 

src/index.js

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

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

Provider 안에 PersistGate를 래핑하여 store에서 생성한 persistor를 전달해 주면 끝!

 

 

위처럼 처리하게 되면 따로 Storage에 관련된 코드를 컴포넌트마다 추가로 작성하지 않고도

데이터를 쉽게 저장 시킬 수 있다.

 

단점의 경우, 특정 reducer 내부의 특정 값만 Storage에 담지 못한다는 점이다.

예를들어 tasks reducer의 state가 {id, content, complete}를 담고 있을 때

id값만 저장을 하고 싶어도 tasks의 state모두 Storage에 저장된다.