redux persist migration

• redux-persist
  • Redux 상태를 브라우저 localStorage나 sessionStorage에 저장해 앱 새로고침 후에도 유지.
• 마이그레이션
  • 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