[redux-persist] 리덕스 사용하면서, 새로고침시 데이터 안날라가게 하고 싶을때

 

각설하고 redux-persist 먼저 설치해주깅

yarn add redux-persist

 

어떤 방식으로 사용할건지는 둘 중 하나로 결정해주기

( sessionStorage 객체는 localStorage에 비해 자주 사용되진 않는다고 한당. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문!! sessionStorage는 현재 떠 있는 탭 내에서만 유지가 된다)

 

     1. localStorage에 저장할땐

 
import storage from 'redux-persist/lib/storage

 

2.session Storage에 저장할땐

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

 

먼저 configStore 부분 (🟢 : 리팩토링 부분) 

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage";
🟢 import { persistReducer } from "redux-persist"; 
🟢 import { todosSlice } from "../modules/todos";

🟢 const reducers = combineReducers({
  todos: todosSlice.reducer,
});

🟢 const persistConfig = {
  key: "root",
  storage,
  whitelist: ['todos'],
};

🟢 const persistedReducer = persistReducer(persistConfig, reducers);

🟢 const store = configureStore({
  reducer: persistedReducer,
});

export default store;

 

index.js에서 App을 추가로 감싸주기

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";
🟢 import { persistStore } from "redux-persist";
🟢 import { PersistGate } from "redux-persist/integration/react";

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

 

 

이렇게 하면, 새로고침해도 정상적으로 데이터 남아있는거 확인 완료 >_<!!!

 

 

요건 redux-persist까지 적용한 나의 투두리스트 깃헙

https://github.com/ddoqi/advance-assignment/tree/dev

GitHub - ddoqi/advance-assignment