redux-persist

redux 상태 관리 라이브러리 사용 시
store은 페이지를 새로고침할 경우 state가 날아감.

이것을 방지하기위해 localStorage/session에 저장하고자하는 reducer state를 저장해
새로고침해도 저장공간에 있는 데이터를 redux에 불러오는 'redux-persist'

쇼핑몰의 장바구니 기능처럼 DB에 넣긴 애매하고 새로고침은 되지 않아야하는 모듈을 구현할 때 많이 사용함

🔮 설치

yarn add redux-persist

🔮 reducer에 persist store 정의

// reducers/index.js

import { combineReducers } from "redux";
➊ import { persistReducer } from "redux-persist";
// localStorage에 저장하고 싶으면
➋ import storage from "redux-persist/lib/storage";
// session Storage에 저장하고 싶으면
➋ import storageSession from "redux-persist/lib/storage/session";

import auth from "./auth";
import board from "./board";
import studio from "./studio";

➌ const persistConfig = {
  key: "root",
  // localStorage에 저장합니다.
  storage,
  // auth, board, studio 3개의 reducer 중에 auth reducer만 localstorage에 저장합니다.
  whitelist: ["auth"]
  // blacklist -> 그것만 제외합니다
};

export const rootReducer = combineReducers({
  auth,
  board,
  studio
});

➍ export default persistReducer(persistConfig, rootReducer);

🔮 persist store 사용

// src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
➊ import { persistStore } from "redux-persist";
➋ import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import configureStore from "./store";
import { rootReducer } from "./reducers";

const store = createStore(rootReducer);
➌ const persistor = persistStore(store);

const Root = () => (
  <Provider store={store}>
    ➍ <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

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