Redux의 핵심 사용 원칙 중 하나는 직렬화할 수 없는 값을 state,action에 넣지 않아야 한다는 것이다.

직렬화 : redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다.

function.promise,symbol, 다른 non-plain-JS-data값 과 같이 직렬화 할 수 없는 값에 대해 상태 트리와 작업을 심층적으로 확인하는 기능을 한다. 직렬화 할 수 없는 값이 감지되면 직렬화 불가능한 값이 감지된 key경로와 함께 콘솔 오류가 나타난다.

A non-serializable value was detected in an action

Redux Toolkit에서 자동으로 생성해 주는 action 객체는 action 생성자 함수 형태이기 때문에 이러한 오류가 발생한다. type의 인자로 string값이 전달되어야 하는데 함수가 전달되어서 오류가 발생한 것이다. 따라서 액션 생성자 함수에 toString() 메서드를 적용해서 string형태로 만들어서 오류 해결이 가능하다.

나의 경우엔 redux toolkit과 redux-persist를 사용하는데 이러한 오류가 발생했다.

해결

/index.tsx

const store = configureStore({
  reducer: {
    pomo: persistedReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

// configureStore에 middleware를 추가했더니 오류가 해결되었다.