[Trouble-Shooting] persist로 저장되어 있는 redux state에 field가 추가되는 경우

문제 상황

보통의 redux state는 새로고침 하면 state가 날아가기 때문에 persist 사용이 불가피하다. 현재 프로젝트에도 redux-persist를 사용하고 있었다.

아직까지는 전역으로 관리할 상태가 많지 않아서 reducer를 하나만 두고 사용하고 있는데, 같은 reducer에서 관리할 state에 프로퍼티가 하나 늘었다.

즉,

// Reducer
const initialState = {
    A: []
} 

에서

// Reducer
const initialState = {
    A: [],
    B: []
} 

가 되었다는 뜻이다.

당연히 아무런 문제가 없을 줄 알고 액션마다 객체를 return 할 때 B에 대한 코드를 추가해서 수정해서 커밋했는데…

다른 팀원 분의 컴퓨터에서 테스트를 하니 에러가 났다. 에러는 B를 사용하는 컴포넌트에서 B가 undefined 라는 것이었다.

내 컴퓨터에서는 전혀 문제가 안 되는데 남의 컴퓨터만 가면 에러가 나는 게 제일 속상하다. 하지만 속상하다고 그냥 놔둘 수는 없으니…

팀원 컴퓨터의 로컬 스토리지에서 persist 내용을 지우고 다시 새로고침 했다.

됐다.

그때 알 수 있었다. 이전에 A 하나만 있을 때 persist state가 여전히 남아 있고, 그 상황에서 initialState랑 액션을 업데이트 해 준다고 해서 짠 하고 반영이 되진 않는구나…… 로컬에서 테스트 할 때 나는 dispatch가 잘 되는지 확인하려고 수시로 로컬 스토리지를 지우고 했었기 때문에 에러가 나지 않았던 것이다.

해결 방법

일단 직관적인? 가장 빠르고 쉬운 해결 방법은 커밋 이전의 버전을 가지고 있는 모든 사용자들의 로컬 스토리지를 비워 주는 것이겠다. 그러면 redux state가 예쁘게 초기화가 될 것이다.

하지만 진행하던 프로젝트의 경우 이미 테스트 서버 여러 곳에 올라가 있는 프로젝트였기 때문에 그건 좀 노간지인 부분이었다… 코드 상으로 해결하고 싶었다.

그래서 내가 해결한 방법은 “state 리셋” 이다.

간단하다. A나 B를 사용하는 곳에 찾아가 A나 B가 undefined인 경우 reset을 해 준다.

RESET_STATE 라는 액션을 추가해서, 이 액션이 dispatch 된다면 reducer에서 return initialState; 를 한다.

이 방법을 통해 persist 해당 리듀서에 {A} 만 저장되어 있더라도 redux state를 {A,B}로 업데이트 시킬 수 있었다. 한 번 reset 된다면 다음부터는 reset 액션을 굳이 실행하지 않고, 저장된 state를 사용할 수 있겠다.

이 방법이 이 문제의 좋은 해결 방법인지는 모르겠다… 개발하면서 가장 혼란스러울 때가 이런 때인 것 같은데 경력이 점점 쌓이다 보면 해결되겠지. 혹시 지나가다 이 글을 발견하셨는데 좋은 방법을 아는 분이 계시다면 댓글 남겨 주세요.