[Error] non-serializable value was detected in an action...

Redux toolkit과 Redux Thunk를 공부하면서 작은 프로젝트를 만들어보고 있었는데,

Redux Thunk를 통해 api통신을 하는 과정에서 다음과 같은 에러 메시지를 만났다.

 

생소한 에러 로그이기도 하고, 현재 Redux Thunk를 공부하는 데 많이 애먹고 있어서 이번 에러 로그에 관한 정보와 해결 방안을 기록해두려고 한다.

 

## 상황

Redux Thunk를 통해 날씨 API와 GET 통신을 하기 위해서 코드라인을 작성했다.

데이터를 사용하는 쪽에서 console.log를 찍어보니 다음과 같은 에러로그가 나타났다.

에러 로그를 구글링해보니 공식문서의 리덕스 설계 규칙에서 관련 정보를 찾아볼 수 있었다.

Redux 공식문서

Non-Serializable 한 State나 Action을 사용하지 말 것.
Promises, Symbols, Maps/Sets, functions, or class와 같은 인스턴스를 바로 Redux store에 저장하거나 action에 dispatch 되는 것을 피해야 한다. 이렇게 되면 Redux DevTools를 통한 디버깅과 같은 기능이 예정대로 동작하게 되며, UI가 업데이트된다.
예외) Reducer에 도달하기 전에 redux-thunk, redux-promise와 같은 middleware에 의해서 intercept 되고 중지된 경우, non-serializable value를 넣을 수 있다.

참고한 stackoverflow의 답변에 따르면, axios.get의 결과 자체를 넘겨주어서 문제가 생긴 것이라고 한다.

response로 넘겨준 결과 내부에는 data 뿐만 아니라 이번 에러에서 주체가 되는 'config' 부분이 포함되어 전달된다. 모든 부분을 저장하고, 사용하진 않지만 config를 포함한 객체가 store로 전달되면 redux-toolkit이 가지고 있는 미들웨어를 통해 Serializability(직렬화)라는 것을 검증하게 된다. Redux권장사항으로 직렬화 가능한 데이터만 저장하기 때문에 위와 같은 에러가 뜨는 것이라고 설명을 하고 있었다.

## 해결

위 규칙을 보고, 현재 내 코드에서 axios를 통한 API 통신을 바로 return 해주고 있기 때문에 에러 메시지가 발생한 것이라고 판단했고,

다음과 같이 코드라인을 변경하여 에러를 복구할 수 있었다.

사실 지금까지 내용을 100% 제대로 이해하고 코드를 수정한 것이 아니어서, 지금 수정한 코드가 근본적인 문제를 해결한 것인지 잘 모르겠다...

 

일단 새로운 에러 로그를 만났고, 지금까지 그 에러 로그를 고치는 과정에서 만났던 내용을 정리해보았다.

 

## Reference

Style Guide | Redux

Making Http requests with Axios in TypeScript | bobbyhadz

Redux Tool kit 총정리