A non-serializable value was detected in an action, in the path: `register` 에러 메시지 발생

[somn45]

redux-persist를 사용하고 나서부터 제목과 같은 에러 메세지가 발생합니다. 직렬화 할 수 없는 값을 dispatch 명령을 내려서 생긴 문제라고 해석됩니다. 그런데 mucketllist 앱에서는 string, array, object type들만 dispatch 처리를 하고 있어서 에러 메시지의 내용과 맥락이 맞지 않습니다. 따라서 RTK 자체의 문제이거나 redux-persist에서 발생한 문제 둘 중 하나라고 생각됩니다. 일단 공식 문서와 QnA 홈페이지 등을 통해서 원인을 찾아보겠습니다.

[somn45]

redux-persist의 특정 행동(purge, flush 등)의 사용이 원인이었던것 같습니다. 우선 앞서 말씀드렸다 싶이 mucketlist 앱에서 dispatch 되는 상태들은 모두 직렬화가 가능한 것들이었습니다. 따라서 원인은 redux-persist의 action일 것이라고 생각한 것입니다. 해결방법은 redux-persist의 action을 직렬화 검증 과정에서 무시하는 것입니다. redux-persist의 action은 상태에 영향을 주는 게 아니기 때문에 직렬화 검증 과정에서 배제해도 된다고 생각했습니다. 코드는 다음과 같습니다.

// store.tsx
import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';
import rootReducer from './reducers/rootReducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoreActions: true,
      },
    }),
});

export const persistor = persistStore(store);

export default store;