[redux] 새로고침해도 state(상태값)를 유지하기

# 배경

회사서비스에 redux를 적용했다. 그런데 새로고침을 누르면 페이지가 하얀페이지로 바뀐다.

로그를 확인하니까 state값이 사라져서 하얀페이지로 변하는 거였다.

 

# 예시

새로고침 전

 

새로고침 후

 

상태값이 새로고침을 하면 초기값에 저장된 데이터로 변경이 된다.

 

# 해결방법

redux-persist 라이브러리를 이용해서 해결해보자

 

 

# 설치

npm install redux-persist

or

yarn add redux-persist

 

# 1) index.js 추가해준다.

- PersistGate를 사용하여 지속성을 관리한다.

import {Provider} from "react-redux";
import { store } from "./page/study/redux/store";
import {PersistGate} from "redux-persist/integration/react";

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

 

# 2) store.js 수정하기

import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; //Redux Persist에서 사용할 스토리지 엔진(로컬 스토리지 사용)
import rootReducer from "./reducer";

const persistConfig = {
  key: "root", // 로컬 스토리지에 저장되는 키
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
//persistConfig에 따라 상태를 로컬 스토리지에 저장하고 관리한다.

const store = createStore(persistedReducer); // persistedReducer 이용해서 지속성 유지한다
const persistor = persistStore(store); // 지속성 객체를 만든다.

export { store, persistor };

 

그러면 

이 화면에서 새로고침을 누르면 원래는 초기값으로 변했다. 

하지만 PersistGate를 이용해서 지속성을 관리하면 새로고침을 해도 상태값(state)가 변경되지 않는다.

 

 

# 참조

https://github.com/YooGenie/react-study/issues/41

redux에 새로고침 기능 넣기 · Issue #41 · YooGenie/react-study