redux를 손쉽게 LocalStorage에 저장하자, redux-persist

 

 

redux-persist를 사용하면 별도의 번거로운 작업 없이 state를 LocalStorage 혹은 SessionStorage에 저장하고 불러올 수 있다.

자세한 설명은 깃헙 링크를 참조. (https://github.com/rt2zz/redux-persist)

 

1. 일단 설치

npm install redux-persist || yarn add redux-persist

2. rootReducer가 선언되어 있는 js 파일에 임포트

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

3. persist의 설정 작성

const persistConfig = {
  key: "TODO",
  storage,
  // key와 storage에 저장할 것인지 seesion에 저장할 것인지는 필수로 지정해줘야 한다.
  whiteList: ["loginInputReducer"],
  // whiteList => 이 키만 저장해주세요
  // blackList => 이 키만 저장하지 말아주세요
  // 이렇게 설정하면 loginInputReducer의 state만 저장된다.
};

이것 외에도 version, stateReconciler, debug를 설정해줄 수 있는데 깃헙을 참고합시다. 

 

4. persistReducer에 위에서 작성한 persistConfig와 rootReducer를 집어넣고 내보낸다.

const rootReducer = combineReducers({ loginInputReducer, todoReducer });
export default persistReducer(persistConfig, rootReducer);

 

 

5. index.js에 persistStore, persistGaete, 그리고 아까 내보낸 persistReducer를 임포트.

import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import persistReducer from "./redux/reducer";

 

 

6. createStore에 rootReducer 대신 persistReducer를 넣어주고(이름은 rootReducer로 import해도 상관 없다.)  중간에서 localStorage를 관리해줄 persistor를 만들어준다.

PersistGate로 컴포넌트를 감싸주면 끝. 

const store = createStore(persistReducer);
const persistor = persistStore(store);

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

 

여기까지 설정해줬다면 나머지는 평소에 리덕스 사용하듯 똑같이 하면 된다.