Redux-Persist로 state 유지하기

Redux는 새로고침시 state가 사라진다. 여기에 필요한 것이 Redux-Persist이다. Redux-Persist를 이용하면 캐시 기능과 같이 상태 값을 저장할 수 있다.

Redux-Persist 라이브러리 설치

$ npm install --save redux-persist

사용 예시)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
import store from './store/store';
import { Provider } from 'react-redux';
import '@fortawesome/fontawesome-free/js/all.js';
import { persistStore } from "redux-persist"; // 해당 라인 추가
import { PersistGate } from "redux-persist/integration/react"; // 해당 라인 추가

const persistor = persistStore(store); // 해당 라인 추가

const Root = () => (
  <Provider store={store}>
    <PersistGate persistor={persistor}> // 해당 라인 추가
      <App />
    </PersistGate> // 해당 라인 추가
  </Provider>
);

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

src/reducer/index.js

import { combineReducers } from "redux";
import { persistReducer } from "redux-persist"; // 해당 라인 추가
import storage from "redux-persist/lib/storage"; // 해당 라인 추가
import loginReducer from "./loginReducer";

const rootReducer = combineReducers({
    loginReducer,
}); // 추가

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["loginReducer"]
}; // 추가

export default persistReducer(persistConfig, rootReducer); //  해당 라인 추가