프론트엔드 첫걸음

redux persist migration 본문

개발 공부/React

redux persist migration

차정 2024. 10. 10. 23:15
  • redux-persist
    • Redux 상태를 브라우저 localStoragesessionStorage에 저장해 앱 새로고침 후에도 유지.
  • 마이그레이션
    • persisted state 구조가 변경됐을 때 버전에 따라 변환해서 이전 데이터를 새 포맷으로 맞춰줌.
      • 앱 업데이트 시 state 구조가 바뀌어도 예전 데이터를 안전하게 변환.
      • 예전 버전 사용자가 업데이트된 앱을 열었을 때 에러 방지

✅ migrations

const migrations = {
  0: (state) => {
    return {
      ...state,
      device: undefined
    }
  },
  1: (state) => {
    return {
      device: state.device
    }
  }
}

  • 스토어 버전별 데이터 변환 함수들.
  • 버전이 올라갈 때 createMigrate가 현재 버전과 비교해서 필요한 마이그레이션 실행.
  • 버전별 동작
    1. 0: 기존 상태에서 device만 초기화(삭제).
    2. 1: device만 남기고 나머지 상태는 제거.

✅ persistConfig

const persistConfig = {
  key: 'primary',
  version: 1,
  storage,
  migrate: createMigrate(migrations, { debug: false }),
}
  • key: localStorage에 저장될 이름(prefix).
  • version: 현재 상태 버전 (마이그레이션 시 기준).
  • storage: 사용할 스토리지(localStorage).
  • migrate: 마이그레이션 함수 설정.

✅ persistReducer

const finalReducer = persistReducer(persistConfig, reducer)
  • key: localStorage에 저장될 이름(prefix).
  • version: 현재 상태 버전 (마이그레이션 시 기준).
  • storage: 사용할 스토리지(localStorage).
  • migrate: 마이그레이션 함수 설정.

✅ persistReducer

const finalReducer = persistReducer(persistConfig, reducer)
  • 기존 reducer를 감싸서 persist 기능 추가된 reducer 생성.

✅ configureStore

export default function configureStore() {
  let store = createStore(finalReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}
  • store: Redux 스토어 생성
  • persistor: 상태를 로컬스토리지와 연결하고 복원할 수 있게 해주는 객체


3. 데이터 흐름

  1. 앱 시작 시 persistStore가 localStorage에서 데이터 읽음.
  2. 저장된 버전과 persistConfig.version 비교.
  3. 다르면 migrations 실행 → 데이터 변환 후 reducer에 전달.
  4. 변환된 상태를 store에 로드.



[참고]

https://dev.to/hossain45/how-to-persist-user-info-using-redux-persist-with-typescript-54g9