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을 유용하게 사용할 수 있을 것 같다.
링크