Redux-Persist

 Redux 상태관리 툴에 불편한 점이 있다. 바로 리덕스 상태 앱을 종료하거나 브라우저를 새로 고침하면 저장돼 있던 state들이 모두 reset된다는 것이다. 여기에 아주 편리한 Redux 라이브러리가 있다. Redux-Persist는 state을 LocalStorage나 Session에 저장함으로써 새로고침함에도 state 저장 상태를 유지시킨다.

 

 

 Redux-Persist 설치 및 사용 예시를 살펴보자.

 

 

1. 설치

npm install --save redux-persist

 

2. 사용 예시

//reducers/index.js

// reducers/index.js

import { combineReducers } from "redux";
➊ import { persistReducer } from "redux-persist";
➋ import storage from "redux-persist/lib/storage";

import auth from "./auth";
import board from "./board";
import studio from "./studio";

➌ const persistConfig = {
  key: "root",
  
  // localStorage에 저장합니다.
  storage,
  
  // auth, board, studio 3개의 reducer 중에 auth reducer만 localstorage에 저장합니다.
  whitelist: ["auth"]
  // blacklist -> 그것만 제외합니다
};

const rootReducer = combineReducers({
  auth,
  board,
  studio
});

➍ export default persistReducer(persistConfig, rootReducer);

---  위에서 주의깊게 살펴볼 점  ---

 

②-1 state을 localStorage에 저장하고 싶다면 : [ import storage from 'redux-persist/lib/storage' ]

②-2 state을 Session에 저장하고 싶다면 : [ import storageSession from 'redux-persist/lib/storage/session' ]

 

③ 주석을 보세요. | 여러 reducer 중 특정 reducer만 persist storage에 저장하도록 설정할 수 있다.

 

 

//src/index.js

// src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
➊ import { persistStore } from "redux-persist";
➋ import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import configureStore from "./store";

const store = createStore(rootReducer);
➌ const persistor = persistStore(store);

const Root = () => (
  <Provider store={store}>
    ➍ <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById("root"));

 

 

 

 

1. 장점, 기대효과

1) 불필요한 코드를 줄일 수 있다.

state 저장을 유지하고 싶은 섹션에 대해서는 state을 캐시(or 로컬스토리지 or 세션)에 저장 및 삭제하는 코드를 작성해야만 한다. 그러나 redux-persist는 rootReducer파일과 src/index.js 파일에 코드 몇줄만 적어준다면 간편하게 state 유지가 가능하다.

 

2. 단점, 부작용

1) whiteList로 지정한 reducer 내에서도 특정 type에만 persist store를 사용하고 싶을 때가 있다.

그럴 때 특정 type만 reducer로 분리시키지 않는 한, 해당 reducer의 모든 type의 state가 persist store를 이용하게 된다. 이는 곧 불필요한 storage 메모리를 증가시킬 것이다.

 

 

 

 

참고사이트

kyounghwan01.github.io/blog/React/redux/redux-persist/#%EC%86%8C%EA%B0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0