Redux-Persist 사용하여 Store 유지하기

Redux-Persist 사용하여 Store 유지하기

머무르고 있는 페이지에서, useSelector로 store 상태만 가져와 사용하여 개발하던 도중, 새로 고침하면 기존의 store가 초기화되는 문제를 겪었습니다.
해결 방법으로 LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주는 Redux-Persist 라이브러리를 사용하여 해결했습니다.

1. 파일 구성

• Reducer를 관리하는 reducer/index.js
• store를 생성하는 reducer/store.js
• App.js 에서 store를 제공하기 위한 /index.js

2. 기본 사용

reducer/index.js

import { combineReducers } from "redux";
import cart from "./cart";
import loading from "./loading";

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

const persistConfig = {
  key: "root",
  storage: storage,
};

const rootReducer = combineReducers({
  data,
  cart,
  loading,
});

export function* rootSaga() {
  yield all([dataSaga()]);
}

export default persistReducer(persistConfig, rootReducer);

• storage : 웹의 localStoage
• persisConfig = {} : 새로운 persist 선언
  • key : reducer의 어느 지점에서부터 데이터를 저장할 것 인지,
  • storage : 웹의 localStorage
• persistReducer(persisConfig, reducer) : persisConfig가 추가된 reducer 반환

reducer/store.js

import { createStore, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import rootReducer, { rootSaga } from "./index";
import createSagaMiddleware from "redux-saga";
import { composeWithDevTools } from "redux-devtools-extension";

// Redux-Persist
import { persistStore } from "redux-persist";

const logger = createLogger();
const sagaMiddleware = createSagaMiddleware();

export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(rootSaga);

export const persistor = persistStore(store);

export default { store, persistor };

• const store = createStore(rootReducer) : persistConfig가 추가된 rootReducer로 store를 생성
• persistStore : 새로 고침, 종료해도 지속될 store 생성

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";

// Redux-Persist
import { store, persistor } from "./reducer/store";
import { PersistGate } from "redux-persist/integration/react";

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

• PersistGage : react로 개발한다면 App 컴포는터를 PersistGate로 매핑.
  persist store가 redux에 저장될 때까지 앱 UI 렌더링이 지연됩니다.

3. 참고

redux-persist npm