[redux] 리덕스에 로컬스토리지 적용

redux-persist

리덕스 라이브러리를 통한 상태 관리를 할 경우 리덕스의 store는 새로고침을 할 경우 state 값이 사리지게 된다.

이때 대응 방안으로 localStroage 등에 저장하여 새로고침을 하여도 저장공간에 있는 데이터를 redux에 불러오도록 하여 기존의 상태를 유지하도록 할 수 있다.

redux-persist 사용법

라이브러리 설치

npm install redux-persist

1. app에 persist 적용

기존 Provider에 import { PersistGate } from "redux-persist/integration/react"; 추가하여 PersistGate를 통해App을 감싸준다.

store에서 기존에 가져오던 store 뿐 아니라 추가되는 persistor도 가져와 PersistGate에 persistor로 props로 넘겨준다.

<script>
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

</script>

2. store에 persist 적용

reducer에 persist store 정의

• localStorage / import storage from 'redux-persist/lib/storage
• session Storage / import storageSession from 'redux-persist/lib/storage/session

<script>
const persistConfig = {
  key: "CART",
  storage: storage,
  whiteList: ["cartReducer"],
};
</script>

config의 객체

• key : 스토리지에 사용되는 키 명칭
• storage / sessionStorage : 어떤 스토리지를 쓸지 필수 입력
  // argument는 선택사항
• whiteList : 스토리지를 통해 관리할 항목
• blackList : 스토리지로 관리하지 않을 항목

리덕스에 적용

<script>
const persistConfig = {
  key: "CART",
  storage: storage,
  whiteList: ["cartReducer"],
};

const reducer = combineReducers({
  getBooksReducer,
  cartReducer,
});

const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(persistedReducer, applyMiddleware(thunk));

export const persistor = persistStore(store);
export default store;
</script>

persistReducer(persistConfig, rootReducer)를 통해 만들어둔 persistConfig와 rootReducer를 적용해주고 , store에 persistConfig 와 rootReducer를 담아둔 persistedReducer를 담아준다. 그 후 persistStore(store) 와 같이 작성 후 export 해준다.