[Redux] Redux Toolkit - A non-serializable value was detected in an action, in the path: `register` 오류 해결

 

리덕스를 이용한 프로젝트를 만들다가 아래와 같은 오류와 직면했습니다.

 

 

🧑🏻‍💻 Non-serializable value 

 

오류 내용을 확인해보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있습니다.

 

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

 

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

 

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

 

⭐️ 해결 방법

import { configureStore } from "@reduxjs/toolkit";
import postsReducer, { PostListsType } from "../features/posts/postsSlice";
import usersReducer, { UserListType } from "../features/users/usersSlice";
import { combineReducers } from "@reduxjs/toolkit";
import storage from 'redux-persist/lib/storage';
import { persistReducer } from "redux-persist";
 
export type RootStateType = {
  posts: PostListsType;
  users: UserListType;
};
const reducers = combineReducers({
  posts: postsReducer,
  users: usersReducer,
});
 
const persistConfig = {
  key: 'root', // localStorage key 
  storage, // localStorage
};
 
const persistedReducer = persistReducer(persistConfig, reducers);
 
export default configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false }),
});
 

 

export default configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false }),
});

 

다음과 같이 미들웨어를 추가하여 해결할 수 있습니다.

 

이런 오류가 발생하는 이유는 Redux Toolkit에서 자동으로 생성해 주는 action 객체는 action 생성자 함수 형태이기 때문입니다.