A non-serializable value was detected in an action 에러

1. 상황

리덕스로 유저정보(name, company, email)을 저장하는데
아래와 같은 에러가 떴다.

오류 내용을 보면 직렬화할 수 없는 값을 action에 전달했다는 뜻이다.

직렬화(serialization) : object를 string으로 변환하는 것
역직렬화(deserialization) / 파싱(parsing) : object를 string으로 변환하는 것

2. 원인

redux는 state, action에 직렬화가 불가능한 값을 넣을 수 없기에 에러가 발생한 것이다.
redux의 middleware중 serializability check middleware가 있다.
이는 직렬화가 불가능한 것들 (함수, promise, 등의 non-plain-js-data values) 에 대해 state tree(상태 트리)와 action을 검사한다.
직렬화할 수 없는 값이 감지되면 콘솔에 오류를 띄워준다.

3. 해결

해결 방법으로는 toString을 사용해도 되지만,
이는 middleware를 사용해 해결할 수 있다.
아래와 같이 serializableCheck 를 false 로 설정하면 오류를 없앨 수 있다.