createStore를 통해 middleware를 등록할 때 오류... - 인프런

const store = createStore(rootReducer, middleware);

강의와 같이 위처럼 코드를 작성할 시 에러가 발생합니다. 버전은 5.0.1 버전입니다.

공식 문서에서 createStore 부분을 보면 reducer와 enhancer이외에 preloadedState라는 값이 있는데 해당 값을 넣어주니 정상적으로 작동했습니다.

const preloadedState = {
  counter: 0,
};

const store = createStore(rootReducer, preloadedState, middleware);

preloadedState는 선택적으로 사용할 수 있다고 되어 있는데 왜 사용하지 않으면 에러가 발생하는지 궁금합니다.
또한 preloadedState는 store의 초기 상태를 나타내고 있다고 하는데 todos의 초기 상태를 어떻게 설정해야할지 궁금합니다. (그냥 undefined로만 적어도 상관없을까요)

안녕하세요, 인프런 AI 인턴입니다.

이수진님, createStore 함수 사용과 관련하여 질문해 주셨군요. Redux를 사용할 때 createStore로 store를 생성하는 과정에서 발생하는 이슈는 여러 가지가 있을 수 있습니다.

createStore의 preloadedState 인수는 초기 상태를 설정하기 위한 값으로, 선택적으로 사용할 수 있습니다. 하지만 createStore에 넘기는 인수의 순서가 중요합니다. createStore(reducer, [preloadedState], [enhancer])와 같이 인수를 순서대로 제공해야 한다는 것을 의미합니다. 만약 createStore 함수에 middleware(enhancer의 일종)만을 넘겼을 경우, 그 middleware가 preloadedState로 잘못 해석되어 에러가 발생할 수 있습니다. 올바른 인수의 순서를 지키지 않았기 때문에 오류가 발생한 것으로 보입니다.
preloadedState로 store의 초기 상태를 설정할 때는 해당 state 모양을 따라야 합니다. 예를 들어, todos 애플리케이션에 대해 초기 상태를 설정한다면 이는 전체 todos 리스트의 초기 상태를 반영해야 합니다. todos의 초기 상태를 설정한다면, 예를 들어 이런 방식이 될 수 있습니다:

const preloadedState = {
  todos: [],
};

만약 todos에 대한 초기 상태를 설정하지 않고 undefined로 남겨두고 싶다면, 해당 reducer 내에서 undefined를 처리하여 기본 상태를 반환하도록 해야 합니다. 예를 들어, todos reducer가 다음과 같이 초기 상태를 설정하도록 작성할 수 있습니다:

function todosReducer(state = [], action) {
  // ... reducer 로직
}

이렇게 하면 preloadedState에서 todos를 제공하지 않아도 todos reducer가 기본적으로 빈 배열을 초기 상태로 사용하게 됩니다.

즉, createStore를 사용할 때 문제없이 작동하려면 인수를 올바른 순서대로 제공하고, 필요에 따라 초기 상태를 설정하는 것이 중요합니다. createStore의 사용법과 관련하여 더 자세한 정보는 Redux 공식 문서를 참조하시는 것을 추천드립니다.

인프런 커뮤니티 질문&답변

createStore를 통해 middleware를 등록할 때 오류 (5.0.1 버전)