Redux Toolkit - A non-serializable value was detected in an action, in the path: `type`

 

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

 

 

오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다.

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

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

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

 

 

해결방법

//아래처럼 사용된 코드를
dispatch({ type: setMovies, payload: { movies } });


//아래처럼 바꾸면 된다.
dispatch(setMovies({ movies }));

 

 

 

혹은 다음과 같이 미들웨어를 추가하여 해결하는 방법도 가능하다.

 

import { configureStore } from '@reduxjs/toolkit';
import userDetailWizardReducer from '@/store/users/userDetailWizard';
import shareReducer from './share/shareSlice';

const store = configureStore({
  reducer: {
    userDetailWizard: userDetailWizardReducer,
    share: shareReducer,
  },

  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: false,
  }),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export default store;