[Redux] Redux Toolkit - A non-serializable value was detected in an action 오류 해결

리덕스 미들웨어를 사용하던 도중 다음과 같은 에러가 발생했습니다.

 

 

 

 

오류의 내용은 Redux에서 값을 주고, 받을 때 object 형태의 값을 string 형태로 변환(JSON.stringfy)하는데, 이 상황에서 변환이 불가능한 값을 전달했다는 에러입니다.

 

좀 더 자세히 들여다보면, action에 직렬화가 불가능한 값을 전달했다는 뜻입니다.

 

여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringfy) 

 

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

 

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

 

이는 액션 생성자 함수에 toString() 메서드를 적용해도 된다고 하는데, 이는 미들웨어 설정을 통해서도 해결할 수 있습니다. 

 

 

📌 index.js

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { configureStore } from '@reduxjs/toolkit'; 
import rootReducer from './module';
import { Provider } from 'react-redux';
import loggerMiddleware from './lib/loggerMiddleware';
 
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }).concat(loggerMiddleware)
});
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>
);
 
reportWebVitals();
 

 

 

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }).concat(loggerMiddleware)
});

 

 

ref: https://guiyomi.tistory.com/116

        https://velog.io/@pest95/RTK-non-serializable-value-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95