React - Redux persist를 활용한 리덕스 상태값 유지

 

리액트에서 상태관리를 사용할 때, 주로 리덕스를 사용한다. 이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되면 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다. 새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다. 이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다.

 

1. 설치

npm install redux-persist -D
yarn add redux-persist -D

 

2. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import rootReducer from './modules';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';
import App from './App';

const store = configureStore({
  reducer: rootReducer,
  middleware: [ReduxThunk, logger],
  devTools: true,
  preloadedState: {
    loading: {
      loadingState: true,
    },
  },
}); // redux store 정의

const persistor = persistStore(store); // redux store 생성

ReactDOM.render(
    <Provider store={store} >
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>,
    document.getElementById("root")
);

 

• persistStore : 정의된 store 내용에 따라 리덕스 데이터를 유지시킬 수 있는 리덕스 스토어를 생성한다.
• PersistGate : 리덕스 스토어에 유지시키고자 하는 데이터들이 정상적으로 저장되고 불러올 수 있도록 UI의 렌더링을 지연시키는 역할을 한다. PersistGate로 루트 컴포넌트를 감싸서 사용한다.
• loading : UI 렌더링의 지연시간을 나타낸다. null값으로 지정할 수 있으며, 단위는 ms로 loading={1000}으로 설정한 경우, UI 렌더링이 약 1초간 지연된 후, 렌더링이 시작된다.
• persistor : 스토어 내용이 정의된 변수를 대입한다.

 

3. redux - modules/index.js

import { combineReducers } from 'redux';
import loading from './loading'; // 로딩관련 리덕스 모듈
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage/session"; // session storage
// import storage from "redux-persist/lib/storage" // local storage

const persistConfig = {
    key: "react",
    storage,
    whitelist: ['loading']
};

const rootReducer = combineReducers({ loading });

export default persistReducer(persistConfig, rootReducer);

• redux-persist/lib/storage/session : 세션 스토리지에 데이터를 저장한다.
• redux-persist/lib/storage : 로컬 스토리지에 데이터를 저장한다.
• key : 스토리지에 저장할 때의 키값을 지정한다.
• storage : 세션, 로컬 스토리지 중에서 저장할 스토리지를 지정한다.
• whitelist : 스토리지에 저장할 리덕스 모듈을 나열한다.
• blacklist : 스토리지에 저장하지 않을 리덕스 모듈을 나열한다.
• persistReducer : redux-persist와 리덕스 모듈 정보를 종합하여 persist 정보를 반환한다.

 

위와 같이 입력한 후, 리덕스 스토어에 데이터를 저장, 새로고침하여 리덕스 스토어에 데이터가 유지되는지 확인한다.

 

 

리덕스 사용법 : https://phsun102.tistory.com/83

React - Redux를 통한 상태관리

 

---

참고 사이트 : 

https://github.com/rt2zz/redux-persist

GitHub - rt2zz/redux-persist: persist and rehydrate a redux store

 

https://dev.to/dawnind/persist-redux-state-with-redux-persist-3k0d#:~:text=redux%2Dpersist%20provides%20different%20storage,it%20to%20the%20redux%2Dpersist.

Persist Redux State with redux-persist