[React] redux-persist

redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다. 

React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다. 

 

이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를 

redux에 가져올 수 있다. 

 

다음과 같은 기능을 redux-persist가 제공해준다. 

 

설치 

yarn add @reduxjs/toolkit react-redux redux-persist

reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다. 

 

만약 타입스크립트를 사용한다면, 

yarn add -D @types/redux-persist

추가로 설치해주면 된다. 

 

persist Store 정의 

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import storageSession from "redux-persist/lib/storage/session";

import Counter from "./counter";
import User from "./user";

const reducers = combineReducers({
  counter: Counter.reducer,
  user: User.reducer,
});

const persistConfig = {
  key: "root",
  storage: storageSession,
  whitelist: ["user"],
};

export const store = configureStore({
  reducer: persistReducer(persistConfig, reducers),
  devTools: process.env.NODE_ENV !== "production",
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

export const persistor = persistStore(store);

전체적으로는 redux 세팅과 동일하지만 다른 부분이 있다. 

 

const persistConfig = {
  key: "root",
  storage: storageSession,
  whitelist: ["user"],
};

persist store의 설정을 나타낸다. 

key는 storage에 저장되는 key 명칭을 의미하고, storage는 local과 session을 설정할 수 있다. 

 

만약 localStorage에 저장하고 싶다면 

import storage from 'redux-persist/lib/storage

sessionStorage의 경우에는 

import storageSession from 'redux-persist/lib/storage/session

를 불러와서 넣어주면 된다. 

 

whitelist의 경우 허용하는 reducer를 지정하는 것이며, blacklist도 설정이 가능하다. 

blacklist는 해당하는 reducer만 제외하고 저장하는 것이다. 

 

export const store = configureStore({
  reducer: persistReducer(persistConfig, reducers),
  
  // ...
});

reducer들을 하나의 Root Reducer로 합쳐주는 configureStore에서 reducer 부분을 persistReducer로 설정과

함께 추가한다.

 

persistReducer는 redux-persist와 리덕스모듈 정보를 종합해서 persist 정보를 반환한다. 

 

export const persistor = persistStore(store);

마지막으로 persistStore는 persist 전용 store를 만들기 위해서 사용한다. 

정의된 store 내용에 따라 리덕스 데이터를 유지시킬 수 있는 리덕스 스토어를 생성한다. 

 

import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Home from "./pages/home";
import { persistor, store } from "./redux/store";

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Home />
      </PersistGate>
    </Provider>
  );
}

export default App;

이제 persist를 설정한다. 

 

<PersistGate loading={null} persistor={persistor}>
  // ...
</PersistGate />

PersistGate는 리덕스 스토어에 유지시키고자 하는 데이터를 문제없이 저장하고 불러올 수 있도록 

UI 렌더링을 지연시키는 역할을 한다. 

 

여기서 사용되는 loading은 UI 렌더링의 지연시간을 나타낸다. 

null 또는 ms 단위로 설정할 수 있다. loading={1000}을 할 경우 1초 뒤에 UI가 렌더링된다. 

 

실행

persist로 지정한 데이터는 애플리케이션에서 확인이 가능한데, 

다음과 같이 데이터가 저장되어 있다.