[트러블 슈팅]redux-persist 비직렬화 액션 값 오류

오류 발견

리액트 앱 실행시 콘솔창에 다음과 같은 오류 로그가 나타납니다.

A non-serializable value was detected in an action, in the path: `register`. 
Value: ƒ register(key) {
	_pStore.dispatch({
    	type: _constants__WEBPACK_IMPORTED_MODULE_2__["REGISTER"],
        key: key
    });
}

오류 원인

로그만 보면redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없어 발생하는 오류입니다. 하지만 기능은 정상적으로 작동합니다. 더 찾아본 결과, redux-persist의 고유 문제인것 같습니다.

non-serializable value error · Issue #988 · rt2zz/redux-persist

persist의 몇가지 액션들에서 발생하는 오류였습니다. redux toolkit 공식 문서에서도 이에 대한 설정을 추가해 놓았습니다.

Usage Guide | Redux Toolkit

오류 해결

persist의 몇몇 액션들에 대해서 직렬화 체크를 무시하도록 설정하면 됩니다.

configureStore를 다음과 같이 수정합니다.

import {
	FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER, 
} from "redux-persist";

...  

const store = configureStore({
	reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: (getDefaultMiddleware) =>
    	getDefaultMiddleware({
        	serializableCheck: {
            	ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
        }).concat(sagaMiddleware, logger),
    });