Redux-persist 란?

개념

Redux store를 브라우저에서 기본적으로 제공해주는 저장소인 localstorage와 sessiongstorage에 저장하게 해주는 라이브러리입니다.

📍 왜 사용했나요?

새로고침하거나 앱을 종료해도 store가 리셋되는 것을 방지하기 위해 사용했습니다. redux-persist를 사용하면 저장공간에 있는 데이터가 사라지지 않고, 이를 redux에 불러올 수 있습니다.

📍 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 렌더링이 지연됩니다.

참고: https://kyounghwan01.github.io/blog/React/redux/redux-persist/#%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2