[Next.js] redux store hydrate 중복 저장 이슈

전체글 가져오는 페이지에서 중복이슈 발견

리덕스 로거를 보면, 액션에서는 분명
데이터가 data/GET_PUBLIC_TASKS가 38개, data/GET_GOALS_BY_IDS가 9개로 배열에 저장되어있다.

원하는 동작은 비어있는 initial store에, 이 값을 저장하는 것 이었는데 prev state를 보니 이미 38개, 9개로 저장이 되어있었다.

그래서 같은 데이터가 2번 중복으로 들어가있는 이슈가 발생했다.

22줄에 rootReducer를 저장하고있는 코드를 보면

액션이 HYDRATE인 경우에, 기존 state와 새로 들어온 incomingState를 deepmerge라이브러리를 통해 merge시킨다.

그런데 25줄에서 로그를 찍어보니 기존 state에 이미 원하는 값이 들어있었다. 그래서 결국 같은 값을 merge하고 있었던 것이다.

const rootReducer = (state = initialRootState, action: any) => {
  if (action.type === HYDRATE) {
    const incomingState = action.payload as RootState

    const nextState: RootState = merge(state, incomingState)

    return incomingState;
  } else {
    return combinedReducer(state, action);
  }
};