[React] Redux-Persist로 새로고침해도 데이터 유지하기

Redux Toolkit으로 로그인 상태를 전역 상태관리 해줬는데 새로고침하니까 날아가버렸다.

이럴 때 로컬스토리지나 세션스토리지에 저장해야 하는 데 Redux-Persist를 사용하면 필요할 때 꺼내 쓸 수 있다.

 

공식문서

먼저 npm i redux-persist 설치해준다.

 

//store.js
import { configureStore } from '@reduxjs/toolkit'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer
})

persistReducer는 지속적으로 상태 저장을 해주는 함수

storage는 실제로 상태 저장을 해주는 저장소 객체로 기본적으로 로컬 스토리지를 사용한다.

만약 세션 스토리지를 사용하고 싶다면 "redux-persist/lib/storage/session"으로 불러오면 된다.

 

persistConfig 객체는 persistReducer 함수를 불러올 때 사용하는 옵션으로 'key'는 저장되는 상태의 키

storage는 위에서 말한 로컬스토리지를 말한다.

persistReducer 함수는 persistConfig와 생성했던 rootReducer를 합쳐주는데 이제 스토어가 생성된 건 store변수에 저장하고

이제 지속적으로 상태가 저장이 된다.

 

// index.js
import { store } from "./redux/store";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/lib/integration/react";

const persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

persistStore는 store를 인자로 받아서 스토어의 상태를 지속적으로 저장할 수 있도록 만들어주는데 persistor변수에 저장한다.

PersistGate는 앱이 로드될 때 지속적으로 저장된 상태를 불러오는 역할을 한다. 

loading은 초기화 되는 동안 보여줄 로딩 컴포넌트를 말하며, 앞서 생성한 persistor로 지속적인 상태 처리를 한다.

 

이렇게 하면 로컬스토리지에 저장이 되고

새로고침해도 Redux DevTools로 확인하면  정보를 확인할 수 있다.