redux persist 사용법 (리덕스 새로고침 데이터 유지)

😎 redux-persist 사용법

✅ redux persist를 사용하는 이유?

리덕스의 store는 페이지 새로고침이 될 때 state 값이 초기화 된다.

만약 페이지 새로고침을 해도 state 값을 유지하고 싶다면

저장하고자 하는 reducer state를 LocalStorage 또는 SessionStorage에 저장해서

새로고침을 해도 저장공간에 있는 데이터를 redux에 불러오는 방법을 사용할 수 있다.

이 방법을 redux-persist를 통해 사용할 수 있다.

 

 

✅ redux persist 세팅 방법

redux가 이미 세팅되어 있는 상황을 가정하고 진행

 

redux persist 설치

yarn add redux-persist

 

reducer에 persist store 정의

//configStore.js

import { createStore, combineReducers } from "redux";
✔ import { persistReducer } from "redux-persist";
✔ import storage from "redux-persist/lib/storage";
//localStorage 사용 : import storage from 'redux-persist/lib/storage
//sessionStorage 사용 : import storageSession from 'redux-persist/lib/storage/session

import todos from '../modules/todo';

✔ const persistConfig = {
    key: "root", //root : 최상단의 파일부터 적용
    storage, //LocalStorage 저장, sessoin -> storage : storageSession
    whitelist: ["todos"] //저장할 reducer
    //blacklist: ["이것만 제외"]
    
};

const rootReducer = combineReducers({ todos });
✔ const perReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(perReducer); 

export default store;

 

persist가 적용된 store 사용

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

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

✔ const persistor = persistStore(store);

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

 

💡 LocalStorage , SessionStorage

서버의 영향을 받지 않는 브라우저의 내부 저장소

LocalStorage : 새로고침을 해도 데이터가 초기화되지 않음
SessionStorage : 새로고침 시 데이터 초기화됨

 

저장소 종류 보러가기

쿠키, 세션, 캐시, 스토리지

 

데이터를 저장하는 persist

 

 

 

참고

https://github.com/rt2zz/redux-persist

https://kyounghwan01.github.io/blog/React/redux/redux-persist/