Redux 새로고침 유지

준비하기

Redux 를 사용하고 있는데, 새로고침을 하게 되면 데이터가 다 날아가는 것을 볼 수 있다.

이를 유지하기 위한 방법으로 redux-persist 가 있는데, 이를 사용하는 방법을 알아보자.

우선 아래와 같이 준비를 해주자.

해당 로직은 redux-toolkit 을 이용한 셋팅이다. combineReducers 까지 사용해서 여러 리듀서를 묶은 것을 확인할 수 있다.

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";
import countReducer from "./countSlice";

// combineReducers 로 리듀서를 묶을 수 있음.
const reducers = combineReducers({
  cartReducer,
  countReducer,
});

export default configureStore({
  reducer: reducers,
});

 

redux-persist

리덕스의 store 는 페이지를 새로고침 할 경우, state 가 날아갑니다. 이것에 대한 대응 방식으로 localStroage, sessionStorage 에 저장합니다.

yarn add redux-persist

 

저장하는 방법으로는 localStorage, sessionStorage 가 있음.

// localStorage
import storage from 'redux-persist/lib/storage

// sessionStorage
import storageSession from 'redux-persist/lib/storage/session'

 

셋팅하기

자, 이제 위에 준비가 되었으면 아래와 같이 코드를 입혀줍니다.

store.js 로 가서 셋팅해줍니다. localStorage 에 countReducer 만 셋팅되도록 입력해줍니다.

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import cartReducer from "./cartSlice";
import countReducer from "./countSlice";

const persistConfig = {
  key: "root",
  // localStorage
  storage,
  // countReducer 만 local 에 저장한다.
  whitelist: ["countReducer"],
};

// combineReducers 로 리듀서를 묶을 수 있음.
const reducers = combineReducers({
  cartReducer,
  countReducer,
});

// persistReducer 적용
const persistedReducer = persistReducer(persistConfig, reducers);

// store 생성
// 에러 처리용 middleware 설정해줍시다. redux 에서 값을 주고 받을 때 object 형태의 값을 string 으로 변환하는데 이 상황에서 변환이 불가능한 값을 전달받은 에러 발생
export default configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
});

 

메인에다가 redux-persist 를 써서 로컬스토리지에 저장하겠다라고 셋팅해줍시다.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./store/store.js";

import { persistStore } from "redux-persist"; // persistStore 설정
import { PersistGate } from "redux-persist/integration/react"; // PersistGate 설정

const persistor = persistStore(store);

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

 

자 이제 실행해보면 아래와 같이 로컬스토리지에 등록되어있으면 완료 입니다. 만약에 나는 브라우저가 꺼지면 날리고 싶다하면 sessionStorage 로 변경해서 사용하시면 됩니다.