[Redux/Redux-persist] A non-serializable value was detected in an action 에러 해결

참고

https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using

에러

redux-persist 라이브러리를 이용해 새로고침 후에도 state값이 유지되게끔 하려고했는데

DOM로드 후에 갑자기 이런 에러가 떴다.

 

원인

오류 내용만 읽어보면 "action에 직렬화가 불가능한 값을 전달"했다는 내용의 에러였다.

직렬화
redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify)

역직렬화
역직렬화는 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse)

Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 위 에러가 발생한 거였다.

 

해결

다행히도(?) 나와 같은 문제를 겪은 후기가 많아서 해결이 어렵진 않았다.
액션 생성자 함수에 toString() 메소드를 적용해도 된다고 하는데, 내 경우는 그냥 미들웨어 설정을 추가했다.

/* Redux toolkit 불러오기 */
import { configureStore } from '@reduxjs/toolkit';
import imageReducer from './redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'root',
    storage,
}

const persistedReducer = persistReducer(persistConfig, imageReducer);

const store = configureStore({
    reducer: {
        ref: persistedReducer,
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false })
});

const persistor = persistStore(store);

export {store, persistor};

위 코드를 추가해주었더니 에러가 해결됐다.
(깨끗한 콘솔~ 🤣)