Redux Toolkit state 에러 (reducer 중첩 사용 - key 중복 X)

Redux 사용 중 state 에러 발생이 나타났다. 그 이유와 해결 방법에 대해 정리해보자.

문제 상황

Redux와 useSelector Hook을 사용하여 상태를 가져오려고 하였으나 다음과 같이 undefined라는 에러가 발생하였다.

문제 원인

Redux Store의 설정 과정에서 reducer를 중접한 구조로 설정했기 때문이다.
configureStore에서 reducer라는 키 값에 이미 rootReducer를 할당했음에도 이를 다시 중첩된 reducer 키로 정의했기 때문에 최종 상태 구조가 불필요하게 깊어졌다.

잘못된 Store 설정 코드:

// store 설정
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const rootStore = configureStore({
  reducer: {
    reducer: rootReducer, // 'reducer' 키에 다시 reducer를 중첩함
  },
});

export default rootStore;

이로 인해 useSelector로 상태를 가져오려고 할때 중첩된 상태 구조로 인해 올바른 경로를 찾지 못하고 undefined를 반환하여 에러를 발생시켰다.

문제 해결

1. Store 설정 수정
configureStore 의 reducer 키에 rootReducer 를 직접 할당하도록 수정하여 중첩 구조를 제거

// store 설정
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const rootStore = configureStore({
  reducer: rootReducer,
});

export default rootStore;

2. 상태 접근 방식 확인
수정 후 로그로 상태 구조를 확인한 결과 올바르게 변경되었음을 확인

배운점 및 느낀점

Key는 중복되어서는 안된다.
configureStore 에서 reducer 속성을 지정할 때, reducer라는 이름으로 중복된 키를 사용하면 Redux에서 이를 처리하는 데 혼란을 줄 수 있다. Redux는 각 리듀서를 고유한 키로 식별하기 때문이다.
만약 다중 리듀서를 사용해야할 경우

const rootStore = configureStore({
  reducer: {
    user: userReducer,
    posts: postsReducer,
  },
});

이처럼 user, posts라는 key의 이름을 다르게 지정하면 된다.

이 경험을 통해 상태 관리의 한 가지 개념을 배우게 되었고 구현할 때 구조를 명확히 하고 코드의 흐름을 항상 점검하면서 개발을 해야겠다고 생각하는 계기되었다.