Redux Toolkit - A non-serializable value was detected in an action, in the path: `type` 오류 해결

리덕스 강의 과제를 따라하다가 아래와 같은 오류와 직면했다.

 

A non-serializable value was detected in an action, in the path: `type`

 

 

오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다.

 

여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify)

 

역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse)

 

Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다.

 

 

해결 방법은 다음과 같다.

 

아래처럼 사용한 코드를

dispatch({ type: setMovies, payload: { movies } });

↓

dispatch(setMovies({ movies }));

이렇게 바꿔주면 해결된다.

 

 

혹은 다음과 같이 미들웨어를 추가하여 해결하는 방법도 가능하다.

const store = configureStore({
  reducer: movieReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false,
  }),
});

 

 

왜 이런 오류가 발생할까?

 

Redux Toolkit에서 자동으로 생성해 주는 action 객체는 action 생성자 함수 형태이기 때문이다.

 

처음 사용한 dispatch 방식은 Redux Toolkit을 사용하지 않았을 경우 직접 생성한 string 타입의 action을 사용하고자 할 때 주로 사용하는 방식이다.

 

type의 인자로 string 값이 전달되어야 하는데 함수가 전달돼서 오류가 발생한 것이다.

 

따라서 액션 생성자 함수에 toString() 메소드를 적용하여 string 형태로 만들어도 오류를 해결할 수 있다.