[Node] React 정리(25) - redux-persist

react-redux를 사용하여 상태 관리를 하여 진행하는 프로젝트 도중 새로고침으로 인한 상태 값의 증발이 발생하게 되었습니다. 이것에 대한 대응 방안으로 redux-persist에서는 localStorage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로 이루어집니다. 예시는 아래와 같습니다.

 

 

# Contents

---

• redux-persist

 

 

# 라우터 적용

---

라이브러리를 아래 명령어를 통해 설치합니다.

npm install --save redux-persist

 

그 다음엔, reducer가 정의된 코드를 다음과 같이 수정하였습니다.

 

• localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage
• session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session

 

아래 코드는 reducer/index.js 의 내용입니다.

import { combineReducers } from "redux";
import bizUrlSelector from "./bizUrlSelector";
import ibizReducer from "./ibizReducer";
import menuSelector from "./menuSelector";

import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";

// localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage
// session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["ibizReducer"],
    // blacklist -> 그것만 제외합니다
};

export default function reducer() {
    const rootReducer = combineReducers({ bizUrlSelector, menuSelector, ibizReducer });
    return persistReducer(persistConfig, rootReducer);
}

 

등록된 persistReducer의 사용법은 아래와 같습니다.

 

아래 코드는 index.js 의 내용입니다.

import React from "react";
import ReactDOM from "react-dom";
import "./css/reset.css";
import "./css/code.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { BrowserRouter } from "react-router-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";

import reducer from "./modules/Index";
import ReduxThunk from "redux-thunk";
import logger from "redux-logger";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";

const myReducer = reducer();
const store = createStore(myReducer, applyMiddleware(ReduxThunk, logger));
const persistor = persistStore(store);

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();