Redux-Persist

Redux-Persist

저번 글에서 react-redux를 알아보았다.. 그러나 react-redux를 사용하더라도, 페이지를 새로고침할 경우 저장하고 있던 데이터들이 초깃값으로 돌아간다
만약, 쇼핑몰의 장바구니, 다크모드 등 개인정보 유출에는 크게 문제 없는 부분들은 브라우저에서 계속 저장할수는 없을까 ??

이러한 상황을 위해 사용할 수 있는 Redux-Persist가 있다!

먼저 Web에 데이터를 저장할 수 있는 방법 3가지와 데이터가 삭제되는 시점을 알아보자 😢

• Local Storage : 직접 삭제가 필요
• Session Storage: 윈도우 혹은 브라우저 탭을 종료할 경우 삭제
• Cookies: 만료기간이 있으며 만료기간이 지난 후에만 삭제

이 중 Local Storage와 Session Storage를 Redux와 함께 쉽게 이용가능한 모듈인 Redux-Persist를 간단하게 알아보자

📌 자세한 내용은 해당 Github에서 알아볼 수 있다

사용방법

설치
npm install redux-persist

// configureStore.js
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
//import storageSession from 'redux-persist/lib/storage/session
 
import rootReducer from './reducers'
 
const persistConfig = {
  key: 'root',
  storage,
  //storageSession,
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

• localStorage에 저장하고 싶은 경우 import storage from 'redux-persist/lib/storage'를 사용한다

• SessionStorage에 저장하고 싶은 경우 import storageSession from 'redux-persist/lib/storage/session'를 사용한다

• rootReducer란 내보낸 모든 reducer들을 가져온다

• store는 reudx의 Provider의 속성으로 넣기 위해 내보내고, persistor는 redux persist의 PersistGate의 속성으로 넣기 위해 내보낸다

import { PersistGate } from 'redux-persist/integration/react'
 
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

• PersistGate를 감싸 주어야하며, persistor에는 위에서 내보낸 persistor를 사용한다

사용화면

• 로그인 정보를 담아 사용해보면 개발자 도구에서 Application탭에서 확인이 가능하다

마치며

여기까지 간단하게 Redux-Persist의 사용방법을 알아보았다 자세한 내용은 역시 Github에서 확인하는 것이 확실하고, 사실 로그인정보를 이렇게 저장하는 것이 맞는가에 대한 해답은 아직 찾지 못하였다. 그러나 꼭 로그인이 아니더라도 웹에 데이터를 저장해야하는 경우 유용하게 사용가능할 것 같다 🥲👍🏻