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

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

상황

• 리덕스 툴킷을 사용하여 이미지 데이터를 저장하기 위해, blob객체를 dispatch하여 state에 저장시키려는 과정에서,
• A non-serializable value was detected in an action, in the path: reducername/reducer 와 같은 경고 발생
• 특정 액션을 수행하는 과정에서 문제가 있다고 경고
• blob 객체와 같은 순수 자바스크립트 오브젝트가 아닌 것을 dispatch로 넘겨줄 경우 발생 (직렬화할 수 없는 객체)

해결법

• 필자와 같은 이미지를 다루는 상황이라면 base64String으로 변환해서 전달하는 것도 가능하지만, redux-persist를 localstorage를 활용하여 적용되어 있는 상황이여서, 이미지가 조금만 많아져도 로컬스토리지의 용량을 초과하는 현상이 발생하였다.
• 가장 간단한 방법은

export const store = configureStore({
    reducer: {
      ...reducres,
  },
    // 이부분 => 직렬화 체크 false로 변경
  middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false }),
  devTools: isDev,
}

• 좀더 디테일하게 하려면

export const store = configureStore({
  reducer: {
        ...reducres,
    },
  devTools: isDev,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: { // 이부분 추가
      ignoredActions: [`${reducerName1}/${actionName1}`, `${reducerName2}/${actionName2}`],
    },
  }),
});