redux-persist 초기값 변경 및 버전 관리하기

퍼스트 프로젝트에서는 모든 페이지마다 회원 검증을 해서 매번 불필요한 서버 요청이 발생했다.

파이널때는 로그인 상태를 유지하기 위해 redux persist를 적극적으로 사용했는데, 한번 세팅해두고 나니 로그인 상태 뿐 아니라 팔로우 등 여러 페이지에서 활용되는 상태들을 관리하기 용이했다.

 

공식 문서를 참고해서 rootReducer에 persistConfigure로 persistReducer를, rootComponent인 PersistGate로 App.js를 감싸주면 세팅은 어렵지 않다.

 

☝🏻 migration으로 redux-persist 초기값 변경하기

A. 문제의 발견

내가 맞닥뜨렸던 문제는 redux-persist의 white list에 해당하는 리듀서의 기존 초기 상태가 변경 사항이 있어도 수정되지 않는다는 점이었다.

아래의 예시를 참고해보자.

먼저 reducerA에 state0, state1을 초기값으로 설정하고 나중에 state2 및 관련 action들을 추가해 전역 persist 상태로 사용하려 하고싶더라도, initialState와 reducer 코드만 수정한다고 localStorage에 반영되지 않는다.

// reducer A
const initialState = {
  state0: "zero",
  state1: "one",
}

// add state '2' later  
const initialState = {
  state0: "zero",
  state1: "one",
  state2: "two",
}

// in other file
const {state2} = useSelector(({reducerA}) => reducerA} // undefined

 

B. 구글링과 삽질!

참고할만한 사이트들을 몽땅 찾아봤고 여러 시도를 해봤지만 똑같은 상황의 레퍼런스 솔루션도 적용되지 않았다. 

migration을 통해 버전을 지정해줄 수 있는데, 기본 버전은 -1이고 콘솔을 통해 확인해볼 수 있다. 직접 localStorage를 조회해보았을 때 분명 내가 지정한 버전인데 migration이 적용되지 않아 반환값 설정을 틀리게했는지 하루 종일 오만 레퍼런스를 찾아보며 고민했다🤦🏽‍♀️

아래는 migration 방법을 일반화한 것이다.

import createMigrate from "redux-persist/es/createMigrate";

const migrations = {
  0: (state) => {
    return {
      ...state,
      reducerA: {
        ...state.reducerA,
        state2: "two",
      }
    }
  },
};

const persistConfig = {
  key: 'root',
  storage,
  version: 0,
  migrate: createMigrate(migrations, {debug: true}),
}

 

✌🏻 migration으로 버전 관리시 주의할 점

migration 버전은 immutable하다!

한번 쓴 버전은 최초 선언시 migration코드 대로만 작동하고, 추후 같은 버전에 다른 코드를 작성하더라도 변경되지 않는다.

나는 처음 삽질할 때 엉망인 코드를 버전 0, 1에 써버렸었는데 제대로 된 코드도 계속 사용하던 버전에서만 시도해봐서 적용이 안되었던 것이다 🙂 허무하면서도 해결해서 속이 시원했다 ㅠㅠ

 

참고로 상태값을 초기화하거나 변경할 일이 꾸준히 일어나지 않고 배포 전이라면 작업 중인 PC에서 localStorage.clear()이나 removeItem으로 직접 초기화할 수 있다.

하지만 배포 후이거나 배포 전이더라도 여러 작업자가 있고 매번 수동으로 초기화하기 어렵다면 migration을 유용하게 사용할 수 있을 것 같다.

 

링크

에러 핸들링 기록