[TIL] [React] Redux-Persist (새로고침 해도 데이터 유지)

 🔐 Q5. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까?

 

Redux-Persist

redux-persist를 사용하면 새로고침을 해도 저장공간에 있는 데이터가 사라지지 않고 지속적으로 유지된다.

 

설치

npm install redux-persist

 

reducer에 persist store 정의

//store.js

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import reducer from '../reducers/reducer';
import thunk from 'redux-thunk';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
  key: 'root',
  storage: storage, // localStorage에 redux store를 저장합니다
  blacklist: ['token'], // 해당 사항을 제외하고 저장합니다
  stateReconciler : autoMergeLevel2,
};

const middleware = [logger, thunk];
const enhancedReducer = persistReducer(persistConfig, reducer);
const store = createStore(enhancedReducer, applyMiddleware(...middleware));

export default store;

 

localStorage에 store를 저장하고 싶은 경우

import storage from 'redux-persist/lib/storage

 

session Storage에 store를 저장하고 싶은 경우

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

 

persistConfig = {} ?

• 새로운 persist 선언합니다
• key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지를 정의합니다
• storage : 어느 저장소에 저장할 것인지를 정합니다

 

redux-logger

store의 변화 값을 확인할 수 있습니다.

 

persistStore

새로 고침하거나 웹 서비스를 종료해도 지속될 store 생성합니다.

 

persist store 사용

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/store';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

const persistor = persistStore(store);

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

 

PersistGate

• react로 개발하는 경우 App 컴포넌트를 PersistGate로 매핑합니다.
• persist store가 redux에 저장될 때까지 앱 UI 렌더링이 지연됩니다.

 

💡Reference💡

https://velog.io/@franchesca/Redux-persist-%EB%9E%80