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

A non-serializable value was detected in an action, in the path: payload. Value: ƒ (){return!window.REDUX_DEVTOOLS_EXTENSION_LOCKED&&o.dispatch(...arguments)} Take a look at the logic that dispatched ...

문제

action에 string타입으로 변환 불가능한 값을 전달할 때 발생하는 에러. (직렬화 불가능)
컴포넌트에서 action으로 dispatch 함수를 넘겨주었더니 발생함.

해결

dispatch 전달이 꼭 필요한 상황이라 reducer를 사용하지 않고 외부 함수로 빼버렸음.

내 프로젝트에선 firebase API 사용 시 데이터베이스 데이터가 변경될 때마다 애플리케이션 state를 업데이트 시키기 위해서 onValue 를 사용했다. onValue는 반환값이 없어 redux-toolkit thunk로도 처리하지 못했다. 때문에 dispatch로 state를 업데이트 시키는 콜백 함수를 전달하고, onValue 하는데

내 프로젝트에선 데이터베이스로부터 최신 데이터를 받아와서 state를 업데이트 하려면 반드시 컴포넌트로부터 dispatch를 전달받아야 한다. 즉, action을 직렬화 시키는건 불가능하므로 데이터페이스와 통신하는 API를
해당 함수를 reduceㄱ가 아닌 외부에 만들어서 해결!