[redux-toolkit] A non-serializable value was detected in the state

A non-serializable value was detected in the state, in the path: <root>. Value: Promise {}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: Array(3)
Take a look at the reducer(s) handling this action type: GET.

발생상황

redux-toolkit 사용중에 컴포넌트에서 dispatch를 호출할 때 발생

원인

redux는 비동기 처리를 지원하지 않는다고 하는데 reducer에서 firebase와 통신하는 비동기 함수를 사용하려고 해서 발생한 것 같다

해결

redux-thunk, redux-observable같은 미들웨어를 사용하면 비동기 통신이 가능하다고 하는데
나는 그냥 redux 말고 react-query를 사용하는 방향으로 바꿨다